I am creating timeline carousel as below.
So when we click on next or prev button it should move to next archive year and next archive panel.
For example if I click 2018, the 2018 circle should be highlighted and 2018 panel should be shown below.
Here's what I have tried but I couldn't create as expected.
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active">2019</li>
<li data-target="#carousel-example-generic" data-slide-to="1">2018</li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<!--<div class="box"></div>-->
<!--<div class="carousel-caption">
<h3>First Text</h3>
</div>-->
<div class="panel-group" id="accordion">
<!-- First Panel -->
<div class="panel panel-default">
<div class="panel-heading heading-background">
<h4 class="panel-title" style="cursor:pointer;" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true">
2019
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
<p>
Archive 1
</p>
</div>
</div>
</div>
</div>
</div>
<div class="item">
<!--<div class="box"></div>
<div class="carousel-caption">
<h3>Second Text</h3>
</div>-->
<div class="panel-group" id="accordion">
<!-- First Panel -->
<div class="panel panel-default">
<div class="panel-heading heading-background">
<h4 class="panel-title" style="cursor:pointer;" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="true">
2018
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse in">
<div class="panel-body">
<p>
Archive 2
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" data-target="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" data-target="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div> <!-- Carousel -->
CSS
.heading-background {
background-color: rgba(45,175,220,0.8) !important; /* Sample Blue 2*/
}
/*Carousel Start*/
.carousel-indicators .active {
background-color: orange;
}
.carousel-indicators li {
border: 1px solid black;
}
.carousel-control {
width:5%;
}
/*Carousel End*/
Here is below example which you want.. Please have a look... :)
also check this link :
https://www.codeply.com/go/tBbcVXe1xZ
#myCarousel .list-inline {
white-space:nowrap;
overflow-x:auto;
}
#myCarousel .carousel-indicators {
position: static;
left: initial;
width: initial;
margin-left: initial;
}
#myCarousel .carousel-indicators > li {
width: initial;
height: initial;
text-indent: initial;
}
#myCarousel .carousel-indicators > li.active img {
opacity: 0.7;
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<div class="container">
<!-- main slider carousel -->
<div class="row">
<div class="col-lg-8 offset-lg-2" id="slider">
<div id="myCarousel" class="carousel slide">
<!-- main slider carousel nav controls -->
<ul class="carousel-indicators list-inline">
<li class="list-inline-item active">
<a id="carousel-selector-0" class="selected" data-slide-to="0" data-target="#myCarousel">
<img src="http://placehold.it/80x60&text=one" class="img-fluid">
</a>
</li>
<li class="list-inline-item">
<a id="carousel-selector-1" data-slide-to="1" data-target="#myCarousel">
<img src="http://placehold.it/80x60&text=two" class="img-fluid">
</a>
</li>
<li class="list-inline-item">
<a id="carousel-selector-2" data-slide-to="2" data-target="#myCarousel">
<img src="http://placehold.it/80x60&text=three" class="img-fluid">
</a>
</li>
<li class="list-inline-item">
<a id="carousel-selector-3" data-slide-to="3" data-target="#myCarousel">
<img src="http://placehold.it/80x60&text=four" class="img-fluid">
</a>
</li>
<li class="list-inline-item">
<a id="carousel-selector-4" data-slide-to="4" data-target="#myCarousel">
<img src="http://placehold.it/80x60&text=five" class="img-fluid">
</a>
</li>
<li class="list-inline-item">
<a id="carousel-selector-5" data-slide-to="5" data-target="#myCarousel">
<img src="http://placehold.it/80x60&text=six" class="img-fluid">
</a>
</li>
<li class="list-inline-item">
<a id="carousel-selector-6" data-slide-to="6" data-target="#myCarousel">
<img src="http://placehold.it/80x60&text=seven" class="img-fluid">
</a>
</li>
<li class="list-inline-item">
<a id="carousel-selector-7" data-slide-to="7" data-target="#myCarousel">
<img src="http://placehold.it/80x60&text=eight" class="img-fluid">
</a>
</li>
</ul>
<!-- main slider carousel items -->
<div class="carousel-inner">
<div class="active item carousel-item" data-slide-number="0">
<img src="http://placehold.it/1200x480&text=one" class="img-fluid">
</div>
<div class="item carousel-item" data-slide-number="1">
<img src="http://placehold.it/1200x480/888/FFF" class="img-fluid">
</div>
<div class="item carousel-item" data-slide-number="2">
<img src="http://placehold.it/1200x480&text=three" class="img-fluid">
</div>
<div class="item carousel-item" data-slide-number="3">
<img src="http://placehold.it/1200x480&text=four" class="img-fluid">
</div>
<div class="item carousel-item" data-slide-number="4">
<img src="http://placehold.it/1200x480&text=five" class="img-fluid">
</div>
<div class="item carousel-item" data-slide-number="5">
<img src="http://placehold.it/1200x480&text=six" class="img-fluid">
</div>
<div class="item carousel-item" data-slide-number="6">
<img src="http://placehold.it/1200x480&text=seven" class="img-fluid">
</div>
<div class="item carousel-item" data-slide-number="7">
<img src="http://placehold.it/1200x480&text=eight" class="img-fluid">
</div>
<a class="carousel-control left pt-3" href="#myCarousel" data-slide="prev"><i class="fa fa-chevron-left"></i></a>
<a class="carousel-control right pt-3" href="#myCarousel" data-slide="next"><i class="fa fa-chevron-right"></i></a>
</div>
</div>
</div>
</div>
<!--/main slider carousel-->
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
</body>
</html>
Related
I tried to include carousel into my website but no success so far. I googled it and any answer is not helping. Mainly people had problem with not including jQuery.js or bootstrap.js. Both included.
Do I have to call carousel in separate js file? Bootstrap docs says that I do not have to.
Where is the mistake? Thanks for help!
HTML/CSS:
#import "adress-row.css";
#import "offer-head.css";
#import "navbar.css";
.carouselTop {
position: absolute;
width: 100%;
top: 0;
}
.navbar {
background-color: white;
opacity: 65%;
font-weight: 600;
color: black;
}
.toptop {
position: relative;
}
<!DOCTYPE html>
<html lang="pl">
<head>
<!-- META -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<meta name="keywords" content="klimatyzacja, pompa ciepła, pompy ciepła, smart home, cctv, alarm, security">
<meta name="author" content="Dawid Tandos">
<!-- CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="assets/css/styles.css">
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght#0,400;1,200&display=swap" rel="stylesheet">
<!-- Font awsome -->
<!-- <script src="https://kit.fontawesome.com/50e5d27fce.js" crossorigin="anonymous"></script> -->
<title>Technologia dla domu</title>
</head>
<body>
<header>
<!-- Offer header -->
<div class="off-head">
<div class="row">
<div class="col-4" id="left">
<p>
Oferta klimatyzacji od ręki!
</p>
</div>
<div class="col-4">
</div>
<div class="col-4" id="right">
<p>
Umów się na bezpłatną konsultację!
</p>
</div>
</div>
</div>
<!-- Adress row -->
<div class="container-fluid">
<div class="row row-cols-auto top-row">
<div class="col-sm adress-row">
<div class="row row-cols-1">
<div class="col-sm adress-row hours1">
<img class="icons-top" src="assets/ico/clock.png">
</div>
<div class="col-sm adress-row hours">
<p>
Pn - Pt: <br>
Sobota:
</p>
</div>
<div class="col-sm adress-row hours2">
<p>
<span id="bold">7:00 - 17:00</span><br>
<span id="bold">7:00 - 14:00</span>
</p>
</div>
</div>
</div>
<div class="col-sm adress-row">
<div class="row">
<div class="col-sm adress-row hours1">
<img class="icons-top" id="env" src="assets/ico/envelope.png">
</div>
<div class="col-sm adress-row">
E-mail: <br>
tdd#gmail.com
</div>
</div>
</div>
<div class="col-sm adress-row">
<div class="row">
<div class="col-sm adress-row hours1">
<img class="icons-top" id="env" src="assets/ico/headphones.png">
</div>
<div class="col-sm adress-row">
Telefon:<br>
123 456 789
</div>
</div>
</div>
</div>
</div>
<div class="toptop">
<!-- NAVBAR -->
<nav class="navbar sticky-top navbar-expand-lg navbar-light navbar-no-bg" id="top-navbar">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img class="logo" src="assets/images/logo.png">
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarToggler" aria-controls="navbarToggler" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarToggler">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">
<img class="icons-navbar" src="assets/ico/house.png">
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">O nas</a>
</li>
<li class="nav-item dropdown px-3">
<a class="nav-link dropdown-toggle" href="#" id="navOfertyMenu" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Oferta
</a>
<ul class="dropdown-menu" aria-labelledby="navOfertyMenu">
<li><a class="dropdown-item" href="#">Klimatyzacja</a></li>
<li><a class="dropdown-item" href="#">Pompy ciepła</a></li>
<li><a class="dropdown-item" href="#">Systemy alarmowe</a></li>
<li><a class="dropdown-item" href="#">Smart home</a></li>
</ul>
</li>
<li class="nav-item px-3">
<a class="nav-link" href="#">Katalogi i cenniki</a>
</li>
<li class="nav-item px-3">
<a class="nav-link" href="#">Poradnik</a>
</li>
<li class="nav-item px-3">
<a class="nav-link" href="#">Kontakt</a>
</li>
<button type="button" class="btn btn-danger px-3 customButton" href="#">Szybka wycena</button>
</ul>
</div>
</div>
</nav>
<!-- Carousel -->
<div id="carouselTop" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselTop" data-slide-to="0" class="active"></li>
<li data-target="#carouselTop" data-slide-to="1"></li>
<li data-target="#carouselTop" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="assets/images/backgrounds/1.jpg" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="assets/images/backgrounds/2.jpg" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="assets/images/backgrounds/3.jpg" alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselTop" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselTop" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</header>
<!-- JavaScrpit file -->
<script src="assets/js/scripts.js"></script>
<!-- jQuery and Bootstrap.js-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
</body>
</html>
Try putting your JavaScript file after/below the jQuery and Bootstrap files and ensure you have it in the order
<!--jquery, popper.js, bootstrap.js-->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
crossorigin="anonymous"></script>
<!--jquery, popper.js, bootstrap.js-->```
You are using the bootstrap 4 make sure that your code for your carousel is in bootstrap 4 because there is new bootstrap which is bootstrap 5. If your carousel is not working try to add this:
This is for bootstrap 5
var myCarousel = document.getElementById('myCarousel')
myCarousel.addEventListener('slide.bs.carousel', function () {
// do something...
})
This is for bootstrap 4
$('#myCarousel').on('slide.bs.carousel', function () {
// do something...
})
try to put this on above the tags
</body>
in order for it to work
You have to use those script. Hope your problem will be solved
<!-- jQuery and Bootstrap.js-->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
crossorigin="anonymous"></script>
You forget to add js libs and code of carsoul in js file
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Technologia dla domu</title>
<!-- CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght#0,400;1,200&display=swap" rel="stylesheet">
<!-- Font awsome -->
<!-- <script src="https://kit.fontawesome.com/50e5d27fce.js" crossorigin="anonymous"></script> -->
</head>
<body>
<header>
<!-- Offer header -->
<!-- Carousel -->
<div id="carouselTop" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselTop" data-slide-to="0" class="active"></li>
<li data-target="#carouselTop" data-slide-to="1"></li>
<li data-target="#carouselTop" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="https://images.pexels.com/photos/6335/man-coffee-cup-pen.jpg?auto=compress&cs=tinysrgb&dpr=2&w=500" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://images.pexels.com/photos/257897/pexels-photo-257897.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://images.pexels.com/photos/6335/man-coffee-cup-pen.jpg?auto=compress&cs=tinysrgb&dpr=2&w=500" alt="Second slide">
</div>
</div>
</div>
</header>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
crossorigin="anonymous"></script>
</body>
</html>
.carouselTop {
position: absolute;
width: 100%;
top: 0;
}
.navbar {
background-color: white;
opacity: 65%;
font-weight: 600;
color: black;
}
.toptop {
position: relative;
}
$('.carousel').carousel();
Sorry for the size of the links....Stackoverflow doesn't allow link shorteners...
Earlier it was working just fine. But at the time of submission, when I was checking the whole output of the site, I noticed that it wasn't working at all...
It doesn't change on its on..which it use to do earlier...
When I click on the next or the previous button, it just looks as if it was ' href="#" ', it does nothing at all...
Here is the code -
HTML
<div class='container'>
<div class='carousel slide' data-ride='carousel' id='myCarousel'>
<!-- Indicators -->
<ol class='carousel-indicators'>
<li class='active' data-slide-to='0' data-target='#myCarousel'/>
<li data-slide-to='1' data-target='#myCarousel'/>
<li data-slide-to='2' data-target='#myCarousel'/>
</ol>
<!-- Wrapper for slides -->
<div class='carousel-inner'>
<div class='item active'>
<img alt='Statue of Unity' src='https://southindia1-mediap.svc.ms/transform/thumbnail?provider=spo&inputFormat=jpg&cs=fFNQTw&docid=https://lpuin-my.sharepoint.com:443/_api/v2.0/drives/b!oY30talLiUS8rG_BEWnrXVosZvQbZtBCgL0B34hPVyiHfGeNwOpCTIXwHQY9v522/items/01QPSJLNKSLYWYT7SANNHJ7KMPQETY232Q%3Fversion%3DPublished&access_token=eyJ0eXAiOiJKV1QiLCJhbGciOiJub25lIn0.eyJhdWQiOiIwMDAwMDAwMy0wMDAwLTBmZjEtY2UwMC0wMDAwMDAwMDAwMDAvbHB1aW4tbXkuc2hhcmVwb2ludC5jb21AZTE0ZTczZWItNTI1MS00Mzg4LThkNjctOGY5ZjJlMmQ1YTQ2IiwiaXNzIjoiMDAwMDAwMDMtMDAwMC0wZmYxLWNlMDAtMDAwMDAwMDAwMDAwIiwibmJmIjoiMTU5ODcyNjg0NSIsImV4cCI6IjE1OTg3NDg0NDUiLCJlbmRwb2ludHVybCI6Imp3Y0s0OWpDdnJhNmJGalJLTFhBZmFNWHNpMmlXZzkzZTBESWZ3Yk11bTg9IiwiZW5kcG9pbnR1cmxMZW5ndGgiOiIxMTUiLCJpc2xvb3BiYWNrIjoiVHJ1ZSIsImNpZCI6Ik9EaGtZamMwT1dZdE9EQTVPQzB3TURBd0xUUmhOV1V0WlRFMk5qWTNNMlJoT1RkaSIsInZlciI6Imhhc2hlZHByb29mdG9rZW4iLCJzaXRlaWQiOiJZalZtTkRoa1lURXROR0poT1MwME5EZzVMV0pqWVdNdE5tWmpNVEV4TmpsbFlqVmsiLCJzaWduaW5fc3RhdGUiOiJbXCJrbXNpXCJdIiwibmFtZWlkIjoiMCMuZnxtZW1iZXJzaGlwfGFtaXQuMTE4MTI2MjFAbHB1LmluIiwibmlpIjoibWljcm9zb2Z0LnNoYXJlcG9pbnQiLCJpc3VzZXIiOiJ0cnVlIiwiY2FjaGVrZXkiOiIwaC5mfG1lbWJlcnNoaXB8MTAwMzdmZmVhZTQ5YTAwMkBsaXZlLmNvbSIsInR0IjoiMCIsInVzZVBlcnNpc3RlbnRDb29raWUiOiIzIn0.Q0NOVDBRVmVZcW9PanhqdGxiaW4rM3RNY1Y0NzhXLzdyTFJyeG91Sjd5bz0&encodeFailures=1&srcWidth=&srcHeight=&width=1366&height=341&action=Access' style='width:100%;'/>
</div>
<div class='item'>
<img alt='Tea Farms Kerela' src='https://southindia1-mediap.svc.ms/transform/thumbnail?provider=spo&inputFormat=jpg&cs=fFNQTw&docid=https://lpuin-my.sharepoint.com:443/_api/v2.0/drives/b!oY30talLiUS8rG_BEWnrXVosZvQbZtBCgL0B34hPVyiHfGeNwOpCTIXwHQY9v522/items/01QPSJLNNU5JD33JBMEZG2HB4SGJUW4EFW%3Fversion%3DPublished&access_token=eyJ0eXAiOiJKV1QiLCJhbGciOiJub25lIn0.eyJhdWQiOiIwMDAwMDAwMy0wMDAwLTBmZjEtY2UwMC0wMDAwMDAwMDAwMDAvbHB1aW4tbXkuc2hhcmVwb2ludC5jb21AZTE0ZTczZWItNTI1MS00Mzg4LThkNjctOGY5ZjJlMmQ1YTQ2IiwiaXNzIjoiMDAwMDAwMDMtMDAwMC0wZmYxLWNlMDAtMDAwMDAwMDAwMDAwIiwibmJmIjoiMTU5ODcyODk2MSIsImV4cCI6IjE1OTg3NTA1NjEiLCJlbmRwb2ludHVybCI6Imp3Y0s0OWpDdnJhNmJGalJLTFhBZmFNWHNpMmlXZzkzZTBESWZ3Yk11bTg9IiwiZW5kcG9pbnR1cmxMZW5ndGgiOiIxMTUiLCJpc2xvb3BiYWNrIjoiVHJ1ZSIsImNpZCI6Ik9HUmtaRGMwT1dZdE9UQTFNUzB3TURBd0xUVmlZamd0WWpBMU1UUm1abU01WXpnNSIsInZlciI6Imhhc2hlZHByb29mdG9rZW4iLCJzaXRlaWQiOiJZalZtTkRoa1lURXROR0poT1MwME5EZzVMV0pqWVdNdE5tWmpNVEV4TmpsbFlqVmsiLCJzaWduaW5fc3RhdGUiOiJbXCJrbXNpXCJdIiwibmFtZWlkIjoiMCMuZnxtZW1iZXJzaGlwfGFtaXQuMTE4MTI2MjFAbHB1LmluIiwibmlpIjoibWljcm9zb2Z0LnNoYXJlcG9pbnQiLCJpc3VzZXIiOiJ0cnVlIiwiY2FjaGVrZXkiOiIwaC5mfG1lbWJlcnNoaXB8MTAwMzdmZmVhZTQ5YTAwMkBsaXZlLmNvbSIsInR0IjoiMCIsInVzZVBlcnNpc3RlbnRDb29raWUiOiIzIn0.Q2tEV3NBb0dWaE01d3UvR0pRS3lyMnZVWXYyUXlxS21sYS9sMzhneVNoVT0&encodeFailures=1&srcWidth=&srcHeight=&width=1366&height=341&action=Access' style='width:100%;'/>
</div>
<div class='item'>
<img alt='Taj Mahal' src='https://southindia1-mediap.svc.ms/transform/thumbnail?provider=spo&inputFormat=jpg&cs=fFNQTw&docid=https://lpuin-my.sharepoint.com:443/_api/v2.0/drives/b!oY30talLiUS8rG_BEWnrXVosZvQbZtBCgL0B34hPVyiHfGeNwOpCTIXwHQY9v522/items/01QPSJLNKX6KUD55J6GRFYUZH2VXE3LZGZ%3Fversion%3DPublished&access_token=eyJ0eXAiOiJKV1QiLCJhbGciOiJub25lIn0.eyJhdWQiOiIwMDAwMDAwMy0wMDAwLTBmZjEtY2UwMC0wMDAwMDAwMDAwMDAvbHB1aW4tbXkuc2hhcmVwb2ludC5jb21AZTE0ZTczZWItNTI1MS00Mzg4LThkNjctOGY5ZjJlMmQ1YTQ2IiwiaXNzIjoiMDAwMDAwMDMtMDAwMC0wZmYxLWNlMDAtMDAwMDAwMDAwMDAwIiwibmJmIjoiMTU5ODcyODgzNCIsImV4cCI6IjE1OTg3NTA0MzQiLCJlbmRwb2ludHVybCI6Imp3Y0s0OWpDdnJhNmJGalJLTFhBZmFNWHNpMmlXZzkzZTBESWZ3Yk11bTg9IiwiZW5kcG9pbnR1cmxMZW5ndGgiOiIxMTUiLCJpc2xvb3BiYWNrIjoiVHJ1ZSIsImNpZCI6Ik5tVmtaRGMwT1dZdFpqQTNOUzB3TURBd0xUUmhOV1l0TkRjME1tSTRPRFV5TmpZMCIsInZlciI6Imhhc2hlZHByb29mdG9rZW4iLCJzaXRlaWQiOiJZalZtTkRoa1lURXROR0poT1MwME5EZzVMV0pqWVdNdE5tWmpNVEV4TmpsbFlqVmsiLCJzaWduaW5fc3RhdGUiOiJbXCJrbXNpXCJdIiwibmFtZWlkIjoiMCMuZnxtZW1iZXJzaGlwfGFtaXQuMTE4MTI2MjFAbHB1LmluIiwibmlpIjoibWljcm9zb2Z0LnNoYXJlcG9pbnQiLCJpc3VzZXIiOiJ0cnVlIiwiY2FjaGVrZXkiOiIwaC5mfG1lbWJlcnNoaXB8MTAwMzdmZmVhZTQ5YTAwMkBsaXZlLmNvbSIsInR0IjoiMCIsInVzZVBlcnNpc3RlbnRDb29raWUiOiIzIn0.VzdGZGUyZFk5SGpkdFZkNzE1SUdCTXZYcFB1RTBSMTRkTEhoMkRoZ1NzVT0&encodeFailures=1&srcWidth=&srcHeight=&width=1366&height=341&action=Access' style='width:100%;'/>
</div>
</div>
<!-- Left and right controls -->
<a class='left carousel-control' data-slide='prev' href='#myCarousel'>
<span class='glyphicon glyphicon-chevron-left'/>
<span class='sr-only'>Previous</span>
</a>
<a class='right carousel-control' data-slide='next' href='#myCarousel'>
<span class='glyphicon glyphicon-chevron-right'/>
<span class='sr-only'>Next</span>
</a>
CSS -
.carousel{
background: white;
width: 100%;
}
.carousel-item{
text-align: center;
min-height: 360px;
width: 100%;
}
I made a few changes to your code.
The mistakes that were fixed are the following inside of your carousel-indicators your <li> were first closed incorrectly, therefore, you must change them from
<li class='active' data-slide-to='0' data-target='#myCarousel' />
<li data-slide-to='1' data-target='#myCarousel' />
<li data-slide-to='2' data-target='#myCarousel' />
to
<li class='active' data-slide-to='0' data-target='#myCarousel'></li>
<li data-slide-to='1' data-target='#myCarousel'></li>
<li data-slide-to='2' data-target='#myCarousel'></li>
The second mistake I noticed you made was inside carousel-inner content
you should use the class carousel-item instead of item
The third mistake was the class name of the a tag is wrong and you didn't close the span correctly.
<!-- Left and right controls -->
<a class='left carousel-control' data-slide='prev' href='#myCarousel'>
<span class='glyphicon glyphicon-chevron-left'/>
<span class='sr-only'>Previous</span>
</a>
<a class='right carousel-control' data-slide='next' href='#myCarousel'>
<span class='glyphicon glyphicon-chevron-right'/>
<span class='sr-only'>Next</span>
</a>
The a tag class names should be changed from this
<a class='right carousel-control' data-slide='next' href='#myCarousel'>
<a class='left carousel-control' data-slide='prev' href='#myCarousel'>
to this
<a class='carousel-control-prev' data-slide='prev' href='#myCarousel'>
<a class='carousel-control-next' data-slide='next' href='#myCarousel'>
you didn't close a span probably.
Your span:
<span class='glyphicon glyphicon-chevron-left'/>
<span class='glyphicon glyphicon-chevron-right'/>
They should be closed like this
<span class='glyphicon glyphicon-chevron-left'></span>
<span class='glyphicon glyphicon-chevron-right'><span>
I also noticed that you were trying to add a custom icon. you can do that by replacing
<span class='glyphicon glyphicon-chevron-right'><span>
by ( the icon bootstrap uses )
<span class="carousel-control-next-icon" aria-hidden="true"></span>
or ( custom icon from fontawesome)
<span> <i class="fas fa-arrow-circle-left" aria-hidden="true"></i></span>
Don't forget to add the fontawesome CDN in your head if you are going to use the custom icon.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.0/css/all.min.css" integrity="sha512-PgQMlq+nqFLV4ylk1gwUOgm6CtIIXkKwaIHp/PAIWHzig/lKZSEGKEysh0TCVbHJXCLN7WetD8TFecIky75ZfQ==" crossorigin="anonymous" />
===
Here is your code after applying all the fixes to it.
<div class='container'>
<div class='carousel slide' data-ride='carousel' id='myCarousel'>
<!-- Indicators -->
<ol class='carousel-indicators'>
<li class='active' data-slide-to='0' data-target='#myCarousel'></li>
<li data-slide-to='1' data-target='#myCarousel'></li>
<li data-slide-to='2' data-target='#myCarousel'></li>
</ol>
<!-- Wrapper for slides -->
<div class='carousel-inner'>
<div class='carousel-item active'>
<img alt='Statue of Unity' src='https://southindia1-mediap.svc.ms/transform/thumbnail?provider=spo&inputFormat=jpg&cs=fFNQTw&docid=https://lpuin-my.sharepoint.com:443/_api/v2.0/drives/b!oY30talLiUS8rG_BEWnrXVosZvQbZtBCgL0B34hPVyiHfGeNwOpCTIXwHQY9v522/items/01QPSJLNKSLYWYT7SANNHJ7KMPQETY232Q%3Fversion%3DPublished&access_token=eyJ0eXAiOiJKV1QiLCJhbGciOiJub25lIn0.eyJhdWQiOiIwMDAwMDAwMy0wMDAwLTBmZjEtY2UwMC0wMDAwMDAwMDAwMDAvbHB1aW4tbXkuc2hhcmVwb2ludC5jb21AZTE0ZTczZWItNTI1MS00Mzg4LThkNjctOGY5ZjJlMmQ1YTQ2IiwiaXNzIjoiMDAwMDAwMDMtMDAwMC0wZmYxLWNlMDAtMDAwMDAwMDAwMDAwIiwibmJmIjoiMTU5ODcyNjg0NSIsImV4cCI6IjE1OTg3NDg0NDUiLCJlbmRwb2ludHVybCI6Imp3Y0s0OWpDdnJhNmJGalJLTFhBZmFNWHNpMmlXZzkzZTBESWZ3Yk11bTg9IiwiZW5kcG9pbnR1cmxMZW5ndGgiOiIxMTUiLCJpc2xvb3BiYWNrIjoiVHJ1ZSIsImNpZCI6Ik9EaGtZamMwT1dZdE9EQTVPQzB3TURBd0xUUmhOV1V0WlRFMk5qWTNNMlJoT1RkaSIsInZlciI6Imhhc2hlZHByb29mdG9rZW4iLCJzaXRlaWQiOiJZalZtTkRoa1lURXROR0poT1MwME5EZzVMV0pqWVdNdE5tWmpNVEV4TmpsbFlqVmsiLCJzaWduaW5fc3RhdGUiOiJbXCJrbXNpXCJdIiwibmFtZWlkIjoiMCMuZnxtZW1iZXJzaGlwfGFtaXQuMTE4MTI2MjFAbHB1LmluIiwibmlpIjoibWljcm9zb2Z0LnNoYXJlcG9pbnQiLCJpc3VzZXIiOiJ0cnVlIiwiY2FjaGVrZXkiOiIwaC5mfG1lbWJlcnNoaXB8MTAwMzdmZmVhZTQ5YTAwMkBsaXZlLmNvbSIsInR0IjoiMCIsInVzZVBlcnNpc3RlbnRDb29raWUiOiIzIn0.Q0NOVDBRVmVZcW9PanhqdGxiaW4rM3RNY1Y0NzhXLzdyTFJyeG91Sjd5bz0&encodeFailures=1&srcWidth=&srcHeight=&width=1366&height=341&action=Access'
style='width:100%;' />
</div>
<div class='carousel-item'>
<img alt='Tea Farms Kerela' src='https://southindia1-mediap.svc.ms/transform/thumbnail?provider=spo&inputFormat=jpg&cs=fFNQTw&docid=https://lpuin-my.sharepoint.com:443/_api/v2.0/drives/b!oY30talLiUS8rG_BEWnrXVosZvQbZtBCgL0B34hPVyiHfGeNwOpCTIXwHQY9v522/items/01QPSJLNNU5JD33JBMEZG2HB4SGJUW4EFW%3Fversion%3DPublished&access_token=eyJ0eXAiOiJKV1QiLCJhbGciOiJub25lIn0.eyJhdWQiOiIwMDAwMDAwMy0wMDAwLTBmZjEtY2UwMC0wMDAwMDAwMDAwMDAvbHB1aW4tbXkuc2hhcmVwb2ludC5jb21AZTE0ZTczZWItNTI1MS00Mzg4LThkNjctOGY5ZjJlMmQ1YTQ2IiwiaXNzIjoiMDAwMDAwMDMtMDAwMC0wZmYxLWNlMDAtMDAwMDAwMDAwMDAwIiwibmJmIjoiMTU5ODcyODk2MSIsImV4cCI6IjE1OTg3NTA1NjEiLCJlbmRwb2ludHVybCI6Imp3Y0s0OWpDdnJhNmJGalJLTFhBZmFNWHNpMmlXZzkzZTBESWZ3Yk11bTg9IiwiZW5kcG9pbnR1cmxMZW5ndGgiOiIxMTUiLCJpc2xvb3BiYWNrIjoiVHJ1ZSIsImNpZCI6Ik9HUmtaRGMwT1dZdE9UQTFNUzB3TURBd0xUVmlZamd0WWpBMU1UUm1abU01WXpnNSIsInZlciI6Imhhc2hlZHByb29mdG9rZW4iLCJzaXRlaWQiOiJZalZtTkRoa1lURXROR0poT1MwME5EZzVMV0pqWVdNdE5tWmpNVEV4TmpsbFlqVmsiLCJzaWduaW5fc3RhdGUiOiJbXCJrbXNpXCJdIiwibmFtZWlkIjoiMCMuZnxtZW1iZXJzaGlwfGFtaXQuMTE4MTI2MjFAbHB1LmluIiwibmlpIjoibWljcm9zb2Z0LnNoYXJlcG9pbnQiLCJpc3VzZXIiOiJ0cnVlIiwiY2FjaGVrZXkiOiIwaC5mfG1lbWJlcnNoaXB8MTAwMzdmZmVhZTQ5YTAwMkBsaXZlLmNvbSIsInR0IjoiMCIsInVzZVBlcnNpc3RlbnRDb29raWUiOiIzIn0.Q2tEV3NBb0dWaE01d3UvR0pRS3lyMnZVWXYyUXlxS21sYS9sMzhneVNoVT0&encodeFailures=1&srcWidth=&srcHeight=&width=1366&height=341&action=Access'
style='width:100%;' />
</div>
<div class='carousel-item'>
<img alt='Taj Mahal' src='https://southindia1-mediap.svc.ms/transform/thumbnail?provider=spo&inputFormat=jpg&cs=fFNQTw&docid=https://lpuin-my.sharepoint.com:443/_api/v2.0/drives/b!oY30talLiUS8rG_BEWnrXVosZvQbZtBCgL0B34hPVyiHfGeNwOpCTIXwHQY9v522/items/01QPSJLNKX6KUD55J6GRFYUZH2VXE3LZGZ%3Fversion%3DPublished&access_token=eyJ0eXAiOiJKV1QiLCJhbGciOiJub25lIn0.eyJhdWQiOiIwMDAwMDAwMy0wMDAwLTBmZjEtY2UwMC0wMDAwMDAwMDAwMDAvbHB1aW4tbXkuc2hhcmVwb2ludC5jb21AZTE0ZTczZWItNTI1MS00Mzg4LThkNjctOGY5ZjJlMmQ1YTQ2IiwiaXNzIjoiMDAwMDAwMDMtMDAwMC0wZmYxLWNlMDAtMDAwMDAwMDAwMDAwIiwibmJmIjoiMTU5ODcyODgzNCIsImV4cCI6IjE1OTg3NTA0MzQiLCJlbmRwb2ludHVybCI6Imp3Y0s0OWpDdnJhNmJGalJLTFhBZmFNWHNpMmlXZzkzZTBESWZ3Yk11bTg9IiwiZW5kcG9pbnR1cmxMZW5ndGgiOiIxMTUiLCJpc2xvb3BiYWNrIjoiVHJ1ZSIsImNpZCI6Ik5tVmtaRGMwT1dZdFpqQTNOUzB3TURBd0xUUmhOV1l0TkRjME1tSTRPRFV5TmpZMCIsInZlciI6Imhhc2hlZHByb29mdG9rZW4iLCJzaXRlaWQiOiJZalZtTkRoa1lURXROR0poT1MwME5EZzVMV0pqWVdNdE5tWmpNVEV4TmpsbFlqVmsiLCJzaWduaW5fc3RhdGUiOiJbXCJrbXNpXCJdIiwibmFtZWlkIjoiMCMuZnxtZW1iZXJzaGlwfGFtaXQuMTE4MTI2MjFAbHB1LmluIiwibmlpIjoibWljcm9zb2Z0LnNoYXJlcG9pbnQiLCJpc3VzZXIiOiJ0cnVlIiwiY2FjaGVrZXkiOiIwaC5mfG1lbWJlcnNoaXB8MTAwMzdmZmVhZTQ5YTAwMkBsaXZlLmNvbSIsInR0IjoiMCIsInVzZVBlcnNpc3RlbnRDb29raWUiOiIzIn0.VzdGZGUyZFk5SGpkdFZkNzE1SUdCTXZYcFB1RTBSMTRkTEhoMkRoZ1NzVT0&encodeFailures=1&srcWidth=&srcHeight=&width=1366&height=341&action=Access'
style='width:100%;' />
</div>
</div>
<!-- Left and right controls -->
<a class='carousel-control-prev' data-slide='prev' href='#myCarousel'>
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class='sr-only'>Previous</span>
</a>
<a class='carousel-control-next' data-slide='next' href='#myCarousel'>
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class='sr-only'>Next</span>
</a>
</div>
</div>
and here is a working example I added for you. using bootstrap 4.
<!-- CSS only -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<div class="slider">
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="3"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="4"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://picsum.photos/1920/1080 " class="d-block w-100 vh-100" alt="pic-1">
<div class="overlay "> </div>
</div>
<div class="carousel-item">
<img src="https://picsum.photos/1920/1081" class="d-block w-100 vh-100 " alt="pic-2">
<div class="overlay "> </div>
</div>
<div class="carousel-item">
<img src="https://picsum.photos/1920/1082" class="d-block w-100 vh-100 " alt="pic-3">
<div class="overlay "> </div>
</div>
<div class="carousel-item">
<img src="https://picsum.photos/1920/1083" class="d-block w-100 vh-100 " alt="pic-4">
<div class="overlay "> </div>
</div>
<div class="carousel-item">
<img src="https://picsum.photos/1920/1084" class="d-block w-100 vh-100 " alt="pic-5">
<div class="overlay "> </div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<!-- JS, Popper.js, and jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
I have been trying to solve a problem that I have on a website that I am building. The website displays correctly on a desktop browser when it is normal size, but when you make the browser window small or view the site on a mobile phone, I have a layer that overlaps with the footer div on the page.
Please look at this image of the problem:
The layer with the div that overlaps my footer has a class of logodiv, here is my css code for it:
.logodiv{
text-align: center;
top: 50%;
transform: translateY(-50%);
font-family: 'Quicksand', sans-serif;
font-size: 20px;
display: block;
}
The heading has a ID name of logoheadline and has the following css
#logoheadline{
font-family: 'Anton', sans-serif;
font-size: 58px;
position: relative;
}
Lastly my footer has a class name of footerz and it has the following css:
.footerz{
background-color: #323232;
min-height: 200px;
color: white;
font-family: 'Quicksand', sans-serif;
}
the intro-p div has the following css:
.intro-p{
font-family: 'Quicksand', sans-serif;
font-size: 20px;
position: relative;
}
this is the html I have:
<section id="section01" class="demo">
<div class="col-md-12" id="main-bd">
<div class="col-md-4 col-md-offset-1 logodiv" >
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img class="img-responsive center-block" src="images/activities.png" height="470" width="245" alt="Activities">
</div>
<div class="item">
<img class="img-responsive center-block" src="images/chat.png" height="470" width="245" alt="Activities">
</div>
<div class="item">
<img class="img-responsive center-block" src="images/map.png" height="470" width="245" alt="Activities">
</div>
<div class="item">
<img class="img-responsive center-block" src="images/hot.png" height="470" width="245" alt="Activities">
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<div class=" col-md-6 logodiv" >
<br>
<h1 id="logoheadline">Getting together has never been easier! </h1>
<p class="intro-p">Create events and activities, find hot new places to visit, see where your friends hang out all from within the spaze app!</p>
<button class="gbtnHollow">Download</button><br><br><br>
</div>
<span></span>
</div>
</section>
<section id="section02" class="demo2">
<div class="container-fluid footerz">
<div class="col-md-2">
<br>
<ul id="footerul">
<li><a href='privacy.html'>Privacy Policy</a></li>
<li><a href='terms.html'>Terms & Conditions</a></li>
<li><a href='#'>Ads</a></li>
</ul>
</div>
<div class="col-md-4">
<br>
<div class="col-md-4 col-md-offset-2">
<ul id="footerul">
<li>Contact Us</li>
<li><a href='#'>Our Story</a></li>
<li><a href='#'>Press Kit</a></li>
</ul>
</div>
</div>
<div class="col-md-4">
<br>
<div class="col-md-12 ">
<ul id="footerul">
<li><a href='#'>Jobs</a></li>
<li><a href='#'>Angel Investors</a></li>
</ul>
</div>
</div>
<div class="col-md-2">
<br>
<!--This is where all the social media buttons need to go.-->
<ul class="list-inline" >
<li> <img src="./images/facebook.png" alt="Facebook" width="35" height="35"> </li>
<li> <img src="./images/instagram.png" alt="Instagram" width="35" height="35"> </li>
<li> <img src="./images/twitter.png" alt="Instagram" width="35" height="35"> </li>
</ul>
</div><br>
<div class="col-md-12" style="text-align: center;">
<br>
</div>
</div>
</section>
I have been scratching my head for a while, can someone tell me what are my missing?
Remove that top :50% from your logindiv. top is used with position property of Css that may have created problem in your code. Basically avoid using position forcefully. Use them where when it is required.
You are using col-md- class only , that's why you have faced this issues, you can simply fix this you can add col-xs- classes instead of col-md- class , after 1200px col-md- classes getting 100% width
I'm very new to web coding and i need to make background slide show.
But with slideshow code my main navigation disappears. Heare is my code with slide show and image how it looks.
link to photo with slideshow
<div class="bgded overlay";>
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox" class="bgded overlay">
<!-- Slide One - Set the background image for this slide in the line below -->
<div class="carousel-item active" style="background-image: url('woodtrails2en.png')">
<div class="carousel-caption d-none d-md-block" class="bgded overlay">
</div>
</div>
<!-- Slide Two - Set the background image for this slide in the line below -->
<div class="carousel-item" style="background-image: url('wall4.png')">
<div class="carousel-caption d-none d-md-block">
</div>
</div>
<!-- Slide Three - Set the background image for this slide in the line below -->
<div class="carousel-item" style="background-image: url('wall2.jpg')">
<div class="carousel-caption d-none d-md-block">
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!-- ################################################################################################ -->
<div id="logo" class="fl_left">
<h1><img src="woodluck_EN.png"> <img src="ms.png"></h1>
</div>
<nav id="mainav" class="fl_right">
<ul class="clear">
<li>Home</li>
<li>Gallery</li>
<li>Contact</li>
<div class="flag" id="flags">
<li>LT</li>
<li>EN</li>
</div>
</ul>
</div>
</nav>
<!-- ################################################################################################ -->
</header>
and here is code without slideshow
link of photo without slideshow
<!-- Top Background Image Wrapper -->
<h1><img src="woodluck_EN.png"> <img src="ms.png"></h1>
</div>
<nav id="mainav" class="fl_right">
<ul class="clear">
<li>Home</li>
<li>Gallery</li>
<li>Contact</li>
<div class="flag" id="flags">
<li>LT</li>
<li>EN</li>
</div>
</ul>
</nav>
So my main mav disapears, without slideshow everything goes well. Please help guy! Thanks!
I highly suggest using Flickity it is an open source slider all you have to do is download the CSS and JS for it and add them to your files. Then use predefined classes with them. For example...
<div id="slider">
<div class="main-carousel">
<div class="carousel-cell">
<li><img src="#"/></li>
</div>
</div>
</div>
<div id="home-slider" class="carousel slide" data-ride="carousel" data-
interval="5000">
<div class="carousel-inner">
<div class="item active" style="background-image: url(images/slider/1.jpg)">
<div class="caption">
<h1 class="animated fadeInLeftBig">Na mieru <span>pre Vás</span></h1>
<p class="animated fadeInRightBig">Každá naša sauna je originál vyrábaný
na mieru pre Vás, podľa Vašich požiadaviek.</p>
<a data-scroll class="btn btn-start bttn-stt animated fadeInUpBig" data-
scroll-time = 1.25 href="#form_description">Cenová ponuka</a>
</div>
</div>
<div class="item" style="background-image: url(images/slider/2.jpg)">
<div class="caption">
<h1 class="animated fadeInLeftBig">Kvalitné <span>vyhotovenie </span>
</h1>
<p class="animated fadeInRightBig">Precízne remeselné spracovanie a
používanie kvalitných materiálov je pre nás otázkou hrdosti</p>
<a data-scroll class="btn btn-start scrol-btn animated fadeInUpBig"
data-scroll-time = 1.25 href="#gallery">Galéria</a>
</div>
</div>
<div class="item" style="background-image: url(images/slider/3.jpg)">
<div class="caption">
<h1 class="animated fadeInLeftBig">SKUTOČNE <span>PRÍRODNÉ</span></h1>
<p class="animated fadeInRightBig">Ponúkame Vám sauny bez chémie -
žiadne lepidlá, chemické nátery a iné škodlivé látky, ktoré by sa pri
vysokých teplotách mohli uvoľňovať.</p>
<a data-scroll class="btn btn-start animated fadeInUpBig"
href="#product" data-scroll-time = 1.25>Prečo EKO?</a>
</div>
</div>
</div>
<a class="left-control" href="#home-slider" data-slide="prev"><i
class="fa fa-angle-left"></i></a>
<a class="right-control" href="#home-slider" data-slide="next"><i
class="fa fa-angle-right"></i></a>
</div>
I am new to bootstrap, I have started developing website using bootstrap, here is code I have used for Carousel, but images doesn't slides, any help would be appreciated
This is my html markup
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Microvillage Communications</title>
<link rel="shortcut icon" type="image/png" href="Images/favicon.png">
<link href="Css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="Css/style.css" rel="stylesheet" type="text/css">
</head>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/jquery-1.11.2.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-8 col-lg-8 col-md-offset-2">
<div class="row topmargin">
<div class="col-xs-12 col-sm-6 col-md-7 col-lg-8 "><img class="img-responsive" src="Images/microvillage logo.jpg" width="360" height="60" alt=""/></div><!-- logo_container ends here-->
<div class="col-xs-12 col-sm-6 col-md-5 col-lg-4">
<ul class="list-inline topmargin">
<li ><img class="img-rounded img-responsive" src="Images/facebookicon.png" width="30" height="30" alt=""/></li>
<li><img class="img-rounded img-responsive" src="Images/twitter.png" width="30" height="30" alt=""/></li>
<li><img class="img-rounded img-responsive" src="Images/linkedin.png" width="30" height="30" alt=""/></li>
<li><img class="img-rounded img-responsive" src="Images/google+.png" width="30" height="30" alt=""/></li>
<li><img class="img-rounded img-responsive" src="Images/youtube.png" width="30" height="30" alt=""/></li>
</ul>
</div><!-- container for social media-->
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<ul class="nav nav-justified menu_bac">
<li class="active">Home</li>
<li>Company</li>
<li><a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">
Products <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
...
</ul>
</li>
<li>Support</li>
<li>Solution</li>
<li>Services</li>
<li><a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">Enquiry<span class="caret"></span></a>
<ul class="dropdown-menu" role="menu"></ul>
</li>
</ul>
</div>
</div><!-- row ends here-->
</div><!-- row ends here-->
<div class="col-sm-12 col-md-12 col-lg-12">
<div id="carousel" class="carousel slide" data-ride="carousel">
<!-- Menu -->
<ol class="carousel-indicators">
<li data-target="#carousel" data-slide-to="0" class="active"></li>
<li data-target="#carousel" data-slide-to="1"></li>
<li data-target="#carousel" data-slide-to="2"></li>
</ol>
<!-- Items -->
<div class="carousel-inner">
<div class="item active">
<img src="http://lorempixel.com/1500/600/abstract/1" alt="Slide 1" />
</div>
<div class="item">
<img src="http://lorempixel.com/1500/600/abstract/2" alt="Slide 2" />
</div>
<div class="item">
<img src="http://lorempixel.com/1500/600/abstract/3" alt="Slide 3" />
</div>
</div>
<a href="#carousel" class="left carousel-control" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a href="#carousel" class="right carousel-control" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div><!-- container for image slide-->
</div>
</div><!-- row ends here-->
</div><!-- container-fluid end here-->
</body>
</html>
it seems i am missing jQuery plugins, but unable to find the reason exactly
Your structure is not at all matching with bootstrap carousel, and you need not to add any extra js for carousel just use proper structure of carousel given in bootstrap, and your carousel will work
working example : http://jsfiddle.net/juddlyon/Q2TYv/10/
// invoke the carousel
$('#myCarousel').carousel({
interval: 3000
});
/* SLIDE ON CLICK */
$('.carousel-linked-nav > li > a').click(function() {
// grab href, remove pound sign, convert to number
var item = Number($(this).attr('href').substring(1));
// slide to number -1 (account for zero indexing)
$('#myCarousel').carousel(item - 1);
// remove current active class
$('.carousel-linked-nav .active').removeClass('active');
// add active class to just clicked on item
$(this).parent().addClass('active');
// don't follow the link
return false;
});
/* AUTOPLAY NAV HIGHLIGHT */
// bind 'slid' function
$('#myCarousel').bind('slid', function() {
// remove active class
$('.carousel-linked-nav .active').removeClass('active');
// get index of currently active item
var idx = $('#myCarousel .item.active').index();
// select currently active item and add active class
$('.carousel-linked-nav li:eq(' + idx + ')').addClass('active');
});
#import url('//netdna.bootstrapcdn.com/twitter-bootstrap/2.0.4/css/bootstrap-combined.min.css');
#myCarousel {
margin-top: 40px;
}
.carousel-linked-nav,
.item img {
display: block;
margin: 0 auto;
}
.carousel-linked-nav {
width: 120px;
margin-bottom: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.0.4/js/bootstrap.min.js"></script>
<div id="myCarousel" class="carousel slide">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item">
<img src="http://placehold.it/300x200/888&text=Item 1" />
</div>
<div class="item">
<img src="http://placehold.it/300x200/aaa&text=Item 2" />
</div>
<div class="item">
<img src="http://placehold.it/300x200/444&text=Item 3" />
</div>
</div>
<!-- Carousel nav -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
<!-- LINKED NAV -->
<ol class="carousel-linked-nav pagination">
<li class="active">1</li>
<li>2</li>
<li>3</li>
</ol>