I have made a Carousel with Bootstrap with 5 images but when I click the Next button to go through the slides its fine until on the third click it freezes and never makes it to the fourth slide, i'd be grateful for any solution so the Next button works for all slides, heres my code-
<div class="container">
<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>
<li data-target="#carousel-example-generic" data-slide-to="3"></li>
<li data-target="#carousel-example-generic" data-slide-to="4"></li>
<li data-target="#carousel-example-generic" data-slide-to="5"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="images2/MindBodyPilatesLogo1Carousel.png" alt="logo">
<div class="carousel-caption">
<h3>Caption Text</h3>
</div>
</div>
<div class="item">
<img src="images2/Voucher3Carousel.png" alt="...">
<div class="carousel-caption">
<h3>Caption Text</h3>
</div>
</div>
<div class="item">
<img src="images2/EagleCarousel.png" alt="...">
<div class="carousel-caption">
<h3>Caption Text</h3>
</div>
</div>
<div class="item">
<img src="images2/RestCarousel.png" alt="...">
<div class="carousel-caption">
<h3>Caption Text</h3>
</div>
</div>
<div class="item">
<img src="images2/AndyPosterCarousel.png" alt="...">
<div class="carousel-caption">
<h3>Caption Text</h3>
</div>
</div>
<div class="item">
<img src="images/tracelarge.png" alt="...">
<div class="carousel-caption">
<h3>Caption Text</h3>
</div>
</div>
</div>
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
</div>
Related
I would like to create a carousel with a fixed background. Only the text should change.
I tried to put the same background-image into every slide but I don't like the switch animation. I think it would be better if only the text would change.
My code:
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<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>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="first-slide" src="img/earth1.jpg" alt="First slide">
<div class="container">
<div class="carousel-caption text-left">
<h1>TEXT 1</h1>
<p id="screen"></p>
<p>text1</p>
</div>
</div>
</div>
<div class="carousel-item">
<img class="second-slide" src="img/earth1.jpg" alt="Second slide">
<div class="container">
<div class="carousel-caption">
<h1>TEXT 2</h1>
<p id="screen"></p>
<p>text2</p>
</div>
</div>
</div>
<div class="carousel-item">
<img class="third-slide" src="img/earth1.jpg" alt="Third slide">
<div class="container">
<div class="carousel-caption text-right">
<h1>TEXT 3</h1>
<p id="screen"></p>
<p>text3</p>
</div>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#myCarousel" 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="#myCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
What do I need to add?
Thank you,
Jay
you should try this: add new div above carousel item as shown below and set background image to it whatever you want, you can get same image on every slide, just style your content inside carousel item. you can also set min height to background image as shown in below code.
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<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>
<div class="carousel-inner">
<div class="img" style="background-image: url('your image path');">
<div class="carousel-item active">
<img class="first-slide" src="img/earth1.jpg" alt="First slide">
<div class="container">
<div class="carousel-caption text-left">
<h1>TEXT 1</h1>
<p id="screen"></p>
<p>text1</p>
</div>
</div>
</div>
<div class="carousel-item">
<img class="second-slide" src="img/earth1.jpg" alt="Second slide">
<div class="container">
<div class="carousel-caption">
<h1>TEXT 2</h1>
<p id="screen"></p>
<p>text2</p>
</div>
</div>
</div>
<div class="carousel-item">
<img class="third-slide" src="img/earth1.jpg" alt="Third slide">
<div class="container">
<div class="carousel-caption text-right">
<h1>TEXT 3</h1>
<p id="screen"></p>
<p>text3</p>
</div>
</div>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#myCarousel" 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="#myCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<style type="text/css">
.img{
background-repeat: no-repeat;
background-size: cover;
background-position: center;
min-height:400px;
}
</style>
I am learning modal carousel to create a image slideshow when the user click on a image thumbnail but I don't know how to create a close button to close the modal after the slideshow has been started.
Here's the code:
<div class="modal fade" id="vnModal">
<div class="modal-body">
<div id="thanhhoa" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ul class="carousel-indicators">
<li data-target="#thanhhoa" data-slide-to="0" class="active"></li>
<li data-target="#thanhhoa" data-slide-to="1"></li>
<li data-target="#thanhhoa" data-slide-to="2"></li>
</ul>
<!-- The slideshow -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="http://go-ixe.com/img/thanhhoa/thanhhoa1.jpg" class="img-responsive image2" alt="ThanhHoa1" class="img-rounded">
</div>
<div class="carousel-item">
<img src="http://go-ixe.com/img/thanhhoa/thanhhoa2.jpg" class="img-responsive image2" alt="ThanhHoa2" class="img-rounded">
</div>
<div class="carousel-item">
<img src="http://go-ixe.com/img/thanhhoa/thanhhoa3.jpg" class="img-responsive image2" alt="ThanhHoa3" class="img-rounded">
</div>
</div>
<!-- Left and right controls -->
<a class="carousel-control-prev" href="#thanhhoa" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#thanhhoa" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</div>
</div>
I am developing a front-end website using bootstrap. I have inserted a slideshow but it doesn't fit the screen. I have inserted the image into the HTML, not into the CSS. Here is my code:
<div class="container-fluid" id="background">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" id="slideShow">
<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>
<li data-target="#myCarousel" data-slide-to="4"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="pics/happiness1.jpg" alt="Happiness" class="slideShow">
</div>
<div class="item">
<img src="pics/happiness2.jpg" alt="Happiness" class="slideShow">
</div>
<div class="item">
<img src="pics/happiness3.jpg" alt="Happiness" class="slideShow">
</div>
<div class="item">
<img src="pics/happiness4.jpg" alt="Happiness" class="slideShow">
</div>
<div class="item">
<img src="pics/happiness5.jpg" alt="Happiness" class="slideShow">
</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>
</div>
</div>
How to make those images fit to the screen?
Append this last of your css file ..
.carousel-inner>.item>a>img, .carousel-inner>.item>img, .img-responsive, .thumbnail a>img, .thumbnail>img{
min-height: 100vh;
}
Here is the code of the carousel tutorial that i've got from http://bootstrapbay.com/blog/bootstrap-3-carousel-tutorial/. The carousel next button and the carousel dotted button doesn't work. I don't know what happen. Please help me about this. I put the image and the red button determines the buttons that doesn't work.
<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"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="http://placehold.it/1200x315" alt="...">
<div class="carousel-caption">
<h3>Caption Text</h3>
</div>
</div>
<div class="item">
<img src="http://placehold.it/1200x315" alt="...">
<div class="carousel-caption">
<h3>Caption Text</h3>
</div>
</div>
<div class="item">
<img src="http://placehold.it/1200x315" alt="...">
<div class="carousel-caption">
<h3>Caption Text</h3>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div> <!-- Carousel -->
Carousel ScreenShot
As the step 2 of the tutorial you linked in the question says, you have to add the following tags to add jquery (order matters):
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
I have written the following code for carousel. First problem faced that I could not find the slide class with carousel, kindly tell me where it occur.Second, it shows First image properly, but no sliding occur after that. In last sliding glyphicons are also not working.
<div class="row" id="carosal-row">
<div id="carousal" class="carousel slide col-md-offset-3 col-md-9" data-ride="carousel" data-interval="3000" data-wrap="true" data-pause="hover">
<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>
<li data-target="#carousel" data-slide-to="3"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="images/dog1.jpg" alt="Doggy" />
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="images/cat.jpg" alt="caty" />
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="images/parrots.jpg" alt="caty" />
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="images/dog2.png" alt="caty" />
<div class="carousel-caption">
...
</div>
</div>
</div>
<a class="left carousel-control" href="#carousel" 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="#carousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
is my code right or i'm missing something?
wrong spelling for carousel on multiple occations. Here is a fiddle for your code which seems to work. Did you import bootstrap?
Changed the images though:
<div class="row" id="carosal-row">
<div id="carousal" class="carousel slide col-md-offset-3 col-md-9" data-ride="carousel" data-interval="3000" data-wrap="true" data-pause="hover">
<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>
<li data-target="#carousel" data-slide-to="3"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="http://upload.wikimedia.org/wikipedia/commons/7/7f/Terrestrial_planets_size_comparison.png" alt="Doggy" />
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="http://upload.wikimedia.org/wikipedia/commons/3/3e/1e7m_comparison_Uranus_Neptune_Sirius_B_Earth_Venus.png" alt="caty" />
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="http://upload.wikimedia.org/wikipedia/commons/9/9b/Planets_everywhere_(artist%E2%80%99s_impression).jpg" alt="caty" />
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="http://upload.wikimedia.org/wikipedia/commons/9/97/The_Earth_seen_from_Apollo_17.jpg" alt="caty" />
<div class="carousel-caption">
...
</div>
</div>
</div>
<a class="left carousel-control" href="#carousel" 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="#carousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
There was a problem with my jQuery version. i have installed jQuery v1.1.9 and bootstrap v3.3.1 don't support it. That's why slide class was also missing. Now i updated my jQuery version ti v2.1.3
the bootstrap v3.3.1 works fine with it. so problem is solved.