Pressing the "right" after 3 slides, the page becomes white.
But when you press the "left", ie go to the previous slide all goes well, the slides are changing.
Why are the buttons do not work the same way (to the right) causes a white screen?
<div class="container">
<div id="myCarousel" class="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">
<!--First slide-->
<div class="item active">
<img src="http://picsfab.com/download/image/26763/800x600_dogs-caravan.jpg" style="height: 100%; width: 100%; display: block;">
<!--For text to be centered-->
<div class="container">
<div class="carousel-caption">
<h1>It's my dogs. Welcome.</h1>
<p>This tag will container the text.
This tag will container the text.
This tag will container the text.
</p>
<p><a class="btn btn-sm btn-primary">Sign up</a></p>
</div>
</div>
</div>
<!--Second slide-->
<div class="item">
<img src="http://picsfab.com/download/image/82752/800x600_yukon-dogs-cold-for-cats-canada-expedition.jpg" style="height: 100%; width: 100%; display: block;">
<!--For text to be centered-->
<div class="container">
<div class="carousel-caption">
<h1>It's my dogs. Welcome.</h1>
<p>This tag will container the text.
This tag will container the text.
This tag will container the text.
</p>
<p><a class="btn btn-sm btn-primary">Sign up</a></p>
</div>
</div>
</div>
<!--Third slide-->
<div class="item">
<img src="http://picsfab.com/download/image/81152/800x600_sobaka-drug-wizard-dog.jpg" style="height: 100%; width: 100%; display: block;">
<!--For text to be centered-->
<div class="container">
<div class="carousel-caption">
<h1>It's my dogs. Welcome.</h1>
<p>This tag will container the text.
This tag will container the text.
This tag will container the text.
</p>
<p><a class="btn btn-sm btn-primary">Sign up</a></p>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div> <!-- Carousel inner-->
</div> <!-- Carousel-->
</div> <!-- Container-->
All works!
</div> <!-- Carousel inner-->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
Related
this is my 1st page where logo and carousel both are in the top section of the pageI was trying to put a responsive logo over carouser from bootstrap. Logo was over the carousel but it does not shows the responsive behavior. I used the code from www.w3schools.com i think its somewhere in the carousel class in bootstrap.min.css but cant locate it. If someone has work on it plz leave the comment.
html:
<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>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="overlay">
<!--<img src="images/logo.png" class="img-responsive" alt="">-->
</div>
<div class="item active">
<img src="images/1bg.jpg" alt="">
<div class="carousel-caption">
</div>
</div>
<div class="item">
<img src="images/11bg.jpg" alt="">
<div class="carousel-caption">
</div>
</div>
<div class="item">
<img src="images/111bg.jpg" alt="">
<div class="carousel-caption">
</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>
logo is in overlay div.I want logo to be responsive
.overlay {background: url('../images/logo.png') top left no- repeat;position: absolute;top: 30px;
left: 600px;width: 100%;height: 100%;z-index: 10;pointer-events: none;}
Use percentage instead of pixel in overlay class.
For Example:
.overlay {background: url('../images/logo.png') top left no- repeat;position: absolute;top: 3%;left: 50%;width: 100%;height: 100%;z-index: 10;pointer-events: none;}
change top and left percentages value as you need.
I am asking that i have added carousel-indicators by using Bootstrap3.and my carousel-indicator looking like rectangle shape.
I have wrote the code as i given below.
<div class="item active">
<img src="image/1.jpg" class="img-responsive">
</div>
<div class="item">
<img src="image/2.jpg" class="img-responsive">
</div>
<div class="item">
<img src="image/3.jpg" class="img-responsive">
</div>
<div class="item">
<img src="image/4.jpg" class="img-responsive">
</div>
<div class="item">
<img src="image/5.jpg" class="img-responsive">
</div>
<div class="item">
<img src="image/6.jpg" class="img-responsive">
</div>
<div class="item">
<img src="image/7.jpg" class="img-responsive">
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div><!--closing carousel-->
And I Wanted my Carousel-indicator look like smaller dot.
you can draw SVG figures to use for your carousel controls, you can add an event listener to literally anything to control your carousel.
<circle cx="25" cy="75" r="20"/> Play around with the size of it, you can assign it color or other attributes as you would any other HTML element.
Am trying to put one bootstrap carousal (with 4 images at a time scroll)
into a bootstrap tabs. I have tried many examples but am not getting. Am using bootstrap 3.0. Can anybody please give an idea for this? Am unable to see at least one bootstrap 3.0 carousal anywhere
You can just use the standard markup but add four images inside each of your .item slide wrappers.
HTML:
<div class="carousel slide" data-ride="carousel" id="carousel4img">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel4img" data-slide-to="0" class="active"></li>
<li data-target="#carousel4img" data-slide-to="1"></li>
<li data-target="#carousel4img" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="http://placehold.it/350/E83E00/fff&text=Image+1">
<img src="http://placehold.it/350/00ACE7/fff&text=Image+2">
<img src="http://placehold.it/350/e8117f/fff&text=Image+3">
<img src="http://placehold.it/350/C7FF0D/fff&text=Image+4">
</div>
<div class="item">
<img src="http://placehold.it/350/FF0000/fff&text=Image+5">
<img src="http://placehold.it/350/E8950C/fff&text=Image+6">
<img src="http://placehold.it/350/782AE8/fff&text=Image+7">
<img src="http://placehold.it/350/393CE8/fff&text=Image+8">
</div>
<div class="item">
<img src="http://placehold.it/350/40083D/fff&text=Image+9">
<img src="http://placehold.it/350/FF1919/fff&text=Image+10">
<img src="http://placehold.it/350/00E790/fff&text=Image+11">
<img src="http://placehold.it/350/FFB500/fff&text=Image+12">
</div>
</div><!--/.carousel-inner -->
<!-- Controls -->
<a class="left carousel-control" href="#carousel4img" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel4img" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div><!--/.carousel -->
CSS:
.item img {
width:25%;
float:left;
}
I can't make my slideshow automatically scroll through all of my pictures. It scrolls through three pictures, but I have six. When I click on the arrows, it scrolls through all of the pictures, but it doesn't scroll through all of the pictures automatically. It works when the site isn't live, but it doesn't work in Chrome when it is live. Here is my code..
<div id="carousel-example-generic" class="carousel-inner" 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>
<div class="carousel-inner">
<div class="item active">
<img src="img/landscape.jpg" alt="landscape design and installation">
<div class="carousel-caption"></div>
</div>
<div class="item">
<img src="img/patio.jpg" alt="stonework">
<div class="carousel-caption"></div>
</div>
<div class="item">
<img src="img/patio2.jpg" alt="full-service">
<div class="carousel-caption"></div>
</div>
<div class="item">
<img src="img/firepit.png" alt="Fire Pit">
<div class="carousel-caption"></div>
</div>
<div class="item">
<img src="img/deck.png" alt="deck">
<div class="carousel-caption"></div>
</div>
<div class="item">
<img src="img/gardens.png" alt="deck">
<div class="carousel-caption"></div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span></a>
<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span></a>
</div>
</div>
You need to add more data-targets:
<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>
Since you have 6 slides you need to to have 6 data targets (starting with 0)
I created a carousel using Twitter Bootstrap 3 and I cannot get it to work correctly. The slides seem to Overlay each other and it does not cycle through them all. Checked for coding errors but found none. Here is a Jsfiddle with my code: (http://jsfiddle.net/N6Y4D/)
Or here:
<div id="myCarousel" class="carousel slide">
<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="item-active">
<img src="img/slide1.png" style="height: 100%; width: 100%; display: block"/>
<div class="container">
<div class="carousel-caption">
<h1>Heading text</h1>
<p>Description</p>
</div>
</div>
</div>
<div class="item">
<img src="img/slide2.png" style="height: 100%; width: 100%; display: block"/>
<div class="container">
<div class="carousel-caption">
<h1>Heading text</h1>
<p>Description</p>
</div>
</div>
</div>
<div class="item">
<img src="img/slide3.png" style="height: 100%; width: 100%; display: block"/>
<div class="container">
<div class="carousel-caption">
<h1>Heading text</h1>
<p>Description</p>
</div>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
<script src= "js/jquery-2.0.2.js"></script>
<script src= "js/bootstrap.js"></script>
</body>
Here is complete code for it.. Inside the 'carousel-inner' you have written as 'item-active' , it should be 'item active' Both are separate classes.
<div id="myCarousel" class="carousel slide">
<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="item active"> // error was occurring here it should item active not item-active
<img src="img/slide1.png" style="height: 100%; width: 100%; display: block"/>
<div class="container">
<div class="carousel-caption">
<h1>Heading text</h1>
<p>Description</p>
</div>
</div>
</div>
<div class="item">
<img src="img/slide2.png" style="height: 100%; width: 100%; display: block"/>
<div class="container">
<div class="carousel-caption">
<h1>Heading text</h1>
<p>Description</p>
</div>
</div>
</div>
<div class="item">
<img src="img/slide3.png" style="height: 100%; width: 100%; display: block"/>
<div class="container">
<div class="carousel-caption">
<h1>Heading text</h1>
<p>Description</p>
</div>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>