Bootstrap caroussel not sliding - javascript

I am trying to add a slideshow to my webpage using Bootstrap Caroussel, but seems that the photos is not sliding, only showing the first picture. And the buttons in the bottom and on both sides are not working well. Any one would like to look at my code and help me with this?
</!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=divice-width, initial-scale=1">
<link rel="stylesheet" href="bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="main.css" type="text/css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
width: 70%;
margin: auto;
}
</style>
</head>
<body>
<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>
<div class="carousel-inner">
<div class="item active">
<img src="images/reverse1.jpg" class="img-responsive">
</div>
<div class="item">
<img src="images/12976329_224255987939469_1210159874_n.jpg" class="img-responsive">
</div>
<div class="item">
<img src="images/13098983_106200126454398_1338693822_n.jpg" width="450" height="450">
</div>
<div class="item">
<img src="images/13166635_879641332146032_791969762_n.jpg" width="450" height="450">
</div>
</div>
<!-- Left and right controls -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script src="jquery-1.12.3.js"></script>
<script>
$('#myCarousel').carousel();
</script>

You have missed bootstrap.min.js
</!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=divice-width, initial-scale=1">
<link rel="stylesheet" href="main.css" type="text/css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<style>
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
width: 70%;
margin: auto;
}
</style>
</head>
<body>
<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>
<div class="carousel-inner">
<div class="item active">
<img src="http://webneel.com/wallpaper/sites/default/files/images/08-2014/2-black-wallpaper-pattern.preview.jpg" class="img-responsive">
</div>
<div class="item">
<img src="http://webneel.com/wallpaper/sites/default/files/images/08-2014/2-black-wallpaper-pattern.preview.jpg" class="img-responsive">
</div>
<div class="item">
<img src="http://webneel.com/wallpaper/sites/default/files/images/08-2014/2-black-wallpaper-pattern.preview.jpg" width="450" height="450">
</div>
<div class="item">
<img src="http://webneel.com/wallpaper/sites/default/files/images/08-2014/2-black-wallpaper-pattern.preview.jpg" width="450" height="450">
</div>
</div>
<!-- Left and right controls -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script>
$('#myCarousel').carousel();
</script>

Related

How to fit portrait image into bootstrap carousel with landscape ones?

I have a bootstrap carousel example with 2 landscape(width is greater than height) and 1 portrait(height is greater than width)images. Since the portrait one is taller than others, it causes overflow like below
Landscape one
Portrait one
I want that portait one to be seem like below(fit into container as same as others and centered)
Besides my carousel works responsively therefore
.carousel-inner img {
width: 100%;
height: 100%;
}
needed
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<style>
/* Make the image fully responsive */
.carousel-inner img {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="demo" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ul class="carousel-indicators">
<li data-target="#demo" data-slide-to="0" class="active"></li>
<li data-target="#demo" data-slide-to="1"></li>
<li data-target="#demo" data-slide-to="2"></li>
</ul>
<!-- The slideshow -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://lh3.googleusercontent.com/proxy/EYt1aGhp1AefOl1X9LbPivgHNrOKjxTvjO7F4290TG3zufR-TId_B9z05719q1vKMwA0pEMlW-nLJlr-lUp0bxkeC3A96LHUjH64U-2pjF8Yotym" alt="Los Angeles">
</div>
<div class="carousel-item">
<img src="https://i.pinimg.com/736x/d1/a6/64/d1a664bca214bf785a293cbc87950fc4--jeff-bridges-male-photography.jpg" alt="Chicago">
</div>
<div class="carousel-item">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcSx7rAWWd5FIGTykriWl1WAKKZFwG9ieWI1aA&usqp=CAU" alt="New York">
</div>
</div>
<!-- Left and right controls -->
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</body>
</html>
If instead of img you put the image as background-image to its containing div the system will automatically resize and position things so they fit as you want - and if the user resizes the window the images will resize accordingly (at the moment the images get 'squished' if the window is narrowed).
The CSS for the div containing the image can have this added:
div.carousel-item {
background-size: contain;
background-position: center center;
background-repeat: no-repeat no-repeat;
width: 100%;
height: 100%;
}
and this
<div class="carousel-item">
<img src="https://i.pinimg.com/736x/d1/a6/64/d1a664bca214bf785a293cbc87950fc4--jeff-bridges-male-photography.jpg" alt="Chicago">
</div>
becomes
<div class="carousel-item" style="background-image="url(https://i.pinimg.com/736x/d1/a6/64/d1a664bca214bf785a293cbc87950fc4--jeff-bridges-male-photography.jpg);">
</div>
Here's the complete code which is working on my Window 10 laptop:
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<style>
/* Make the image fully responsive */
.carousel-inner img {
width: 100%;
height: 100%;
}
div.carousel-item {
background-size:contain;
background-position:center center;
background-repeat:no-repeat no-repeat;
width:100%;
height:100%;
}
</style>
</head>
<body>
<div id="demo" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ul class="carousel-indicators">
<li data-target="#demo" data-slide-to="0" class="active"></li>
<li data-target="#demo" data-slide-to="1"></li>
<li data-target="#demo" data-slide-to="2"></li>
</ul>
<!-- The slideshow -->
<div class="carousel-inner">
<div class="carousel-item active" style="background-image:url(https://lh3.googleusercontent.com/proxy/EYt1aGhp1AefOl1X9LbPivgHNrOKjxTvjO7F4290TG3zufR-TId_B9z05719q1vKMwA0pEMlW-nLJlr-lUp0bxkeC3A96LHUjH64U-2pjF8Yotym);" alt="Los Angeles">
</div>
<div class="carousel-item" style="background-image:url(https://i.pinimg.com/736x/d1/a6/64/d1a664bca214bf785a293cbc87950fc4--jeff-bridges-male-photography.jpg);" alt="Chicago">
</div>
<div class="carousel-item" style="background-image:url(https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcSx7rAWWd5FIGTykriWl1WAKKZFwG9ieWI1aA&usqp=CAU);" alt="New York">
</div>
</div>
<!-- Left and right controls -->
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</body>
</html>
I have centered the 2nd image without scaling using
.mx-auto .d-block bootstrap classes
for the other 2 images , i did a full scale
using `.w-100 class` & `height:100vh`
here height is your required carousal height.
this is what i understood from your required output.
.carousel-inner img {
width: auto;
height: 100vh;
}
.carousel
{
height: 100vh;
width: 100vw;
}
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="carousel slide bg-dark" id="mine" data-ride="carousel">
<ul class="carousel-indicators">
<li data-target="#mine" data-slide-to="0" class="active"></li>
<li data-target="#mine" data-slide-to="1"></li>
<li data-target="#mine" data-slide-to="2"></li>
</ul>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://lh3.googleusercontent.com/proxy/EYt1aGhp1AefOl1X9LbPivgHNrOKjxTvjO7F4290TG3zufR-TId_B9z05719q1vKMwA0pEMlW-nLJlr-lUp0bxkeC3A96LHUjH64U-2pjF8Yotym" class="img-fluid w-100">
</div>
<div class="carousel-item">
<img src="https://i.pinimg.com/736x/d1/a6/64/d1a664bca214bf785a293cbc87950fc4--jeff-bridges-male-photography.jpg " class="img-fluid mx-auto d-block">
</div>
<div class="carousel-item">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcSx7rAWWd5FIGTykriWl1WAKKZFwG9ieWI1aA&usqp=CAU" class="img-fluid w-100">
</div>
</div>
<a class="carousel-control-next" href="#mine" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
<a class="carousel-control-prev" href="#mine" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
</div>
</body>
</html>
I suggest to go for centering all the images as the 2nd one . Since streching won't look good
.carousel-inner img {
width: auto;
height: 100vh;
}
.carousel
{
height: 100vh;
width: 100vw;
}
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="carousel slide" id="mine" data-ride="carousel">
<ul class="carousel-indicators">
<li data-target="#mine" data-slide-to="0" class="active"></li>
<li data-target="#mine" data-slide-to="1"></li>
<li data-target="#mine" data-slide-to="2"></li>
</ul>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://lh3.googleusercontent.com/proxy/EYt1aGhp1AefOl1X9LbPivgHNrOKjxTvjO7F4290TG3zufR-TId_B9z05719q1vKMwA0pEMlW-nLJlr-lUp0bxkeC3A96LHUjH64U-2pjF8Yotym" class="img-fluid mx-auto d-block">
</div>
<div class="carousel-item">
<img src="https://i.pinimg.com/736x/d1/a6/64/d1a664bca214bf785a293cbc87950fc4--jeff-bridges-male-photography.jpg " class="img-fluid mx-auto d-block">
</div>
<div class="carousel-item">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcSx7rAWWd5FIGTykriWl1WAKKZFwG9ieWI1aA&usqp=CAU" class="img-fluid mx-auto d-block">
</div>
</div>
<a class="carousel-control-next" href="#mine" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
<a class="carousel-control-prev" href="#mine" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
</div>
</body>
</html>

How to stop scroll top on clicking next or prev btn of Carousel?

Following is the simple carousel in use, even it looks fine here in coding, however on browser whenever tried to click next or prev button, page is scrolled to top of HTML.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
width: 70%;
margin: auto;
}
</style>
</head>
<body>
<h1>SAMPLE CONTENT HERE</h1>
<h1>SAMPLE CONTENT HERE</h1>
<h1>SAMPLE CONTENT HERE</h1>
<h1>SAMPLE CONTENT HERE</h1>
<div class="container">
<br>
<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" role="listbox">
<div class="item active">
<img src="img_chania.jpg" alt="Chania" width="460" height="345">
</div>
<div class="item">
<img src="img_chania2.jpg" alt="Chania" width="460" height="345">
</div>
<div class="item">
<img src="img_flower.jpg" alt="Flower" width="460" height="345">
</div>
<div class="item">
<img src="img_flower2.jpg" alt="Flower" width="460" height="345">
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</body>
</html>
Found the reason somewhere with data-target, however, unable to figure it out, and how to stop scrolling top...
Looking for simplest solution to understand, as new to HTML..
Thanks in advance
Cheers..
Just change href="#myCarousel" to data-target="#myCarousel" .
Tip #1:
You can add event.preventDefault() to prevent default behaviour with hashbang:
$('a[class^=carousel-control-]').click(function (event) {
event.preventDefault();
});
Tip #2:
If you have plugins like SmoothScroll, you can unbind it by:
$('a[class^=carousel-control-]').unbind('click.SmoothScroll');
To look for all the click events bind to the element, use:
jQuery._data($('a[class^=carousel-control-]')[0], "events")

Bootstrap 4 carousel doesn't autoplay

EDIT : It's looking like it finally works, the problem isn't that it doesn't works apparently, it's that it doesn't autoplay, I have to click one time on left or right, and then it will works :/ How to do the autoplay so ? The "trigger.click" way is really ... awful.
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img src="/slider1.jpg" alt="First slide">
</div>
<div class="carousel-item">
<img src="/slider2.jpg" alt="Second slide">
</div>
<div class="carousel-item">
<img src="/slider3.jpg" alt="Third slide">
</div>
</div>
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="icon-prev" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="icon-next" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
my index.html head :
<!DOCTYPE html>
<html lang="en" style="height: 100vh;">
<head>
<base href="/">
<link rel="icon" type="image/x-ico" href="/favicon.ico" />
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js" integrity="sha384-THPy051/pYDQGanwU6poAc/hOdQxjnOEXzbT+OuUAFqNqFjL+4IGLBgCJC3ZOShY" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/css/bootstrap.min.css" integrity="sha384-MIwDKRSSImVFAZCVLtU0LMDdON6KVCrZHyVQQj6e8wIEJkW4tvwqXrbMIya1vriY" crossorigin="anonymous">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>TV</title>
<script src="bower_components/angular/angular.js"></script>
<script src="/bower_components/angular-component-router/angular_1_router.js"></script>
<script src="/bower_components/angular-component-router/ng_route_shim.js"></script>
<script src="/contents/contents.component.js"></script>
<script src="bootstrap.js"></script>
<script src="/contents/builderror/buildError.component.js"></script>
<script src="/contents/infosAno/infosAno.component.js"></script>
<script src="/contents/infosImp/infosImp.component.js"></script>
<script src="/contents/slider/slider.component.js"></script>
<script src="/contents/slider/carousel.js"></script>
</head>
I'm using Angular 1.5 to make a Single Page Application.
The example run without any js file just make sure you have to include Jquery before bootstrap js file
Here is the js fiddle code that I just created.
Link: https://jsfiddle.net/nxtvhj5r/

Simple Bootstrap Carousel

I need a simple bootstrap carousel for my website. I found the above code. However the CSS height of carousel seems to be the issue. The CODE is the same code from the EXAMPLE on the website below:
http://www.tutorialrepublic.com/codelab.php?topic=bootstrap&file=carousel
What I have:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example of Bootstrap 3 Carousel</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style type="text/css">
.carousel{
background: #2f4357;
margin-top: 20px;
}
.carousel .item img{
margin: 0 auto; /* Align slide image horizontally center */
}
.bs-example{
margin: 20px;
}
</style>
</head>
<body>
<div class="bs-example">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- 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>
</ol>
<!-- Wrapper for carousel items -->
<div class="carousel-inner">
<div class="item active">
<img src="../images/slide1.png" alt="First Slide">
</div>
<div class="item">
<img src="../images/slide2.png" alt="Second Slide">
</div>
<div class="item">
<img src="../images/slide3.png" alt="Third Slide">
</div>
</div>
<!-- Carousel controls -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
</body>
</html>
Help? I don't understand why it looks like this?
Images were not define:
jsfiddle.net/sdc9cpga
The carousel height is determined by an image, with your code, I added an image in the path and it worked fine. Otherwise add a defined height here: .carousel-inner > .item > img

How to implement panel carousel bootstrap

How would I be able to carousel through multiple bootstrap panels by showing them one at a time?
I have a 5 different divs which are all panels and I'm trying to show only one at a time instead of all 5.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style>
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
width: 70%;
margin: auto;
}
</style>
</head>
<body>
<div class="container">
<br>
<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" role="listbox">
<div class="item active">
<p>You can have your div here</p>
</div>
<div class="item">
<div>
<ul>
<li> Stuff 1 </li>
<li> Stuff 2 </li>
</ul>
</div>
</div>
<div class="item">
<img src="img_flower.jpg" alt="Flower" width="460" height="345">
</div>
<div class="item">
<img src="img_flower2.jpg" alt="Flower" width="460" height="345">
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</body>
</html>

Categories