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;
}
Related
First time updating this website and unsure how to activate the carousel... currently it just stays on the first image and won't rotate to the next slide.
I have confirmed the image file names and paths are correct. Any insights or suggestions would be much appreciated. Thanks!
Had to Screenshot the code because the portion <ol class="carousel-indicators".... disappears when entering in post body on stackflow... weird... maybe an indication that is the problem area?
See Screenshot of Coding Here
<!-- Header Carousel -->
<header id="myCarousel" class="carousel slide">
$('.carousel').carousel({
interval: 5000
})
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1" class="active"></li>
</ol>
<!-- Wrapper for slides (v2/legends_treasures.html) -->
<div class="carousel-inner">
<div class="item active">
<a href="">
<div class="fill" style="background-image:url('https://guernseys.com/Guernseys%20New/images/1900x1080artauction.jpg');"></div>
</a>
</div>
<div class="item active">
<a href="">
<div class="fill" style="background-image:url('https://guernseys.com/Guernseys%20New/images/1900x1080henrymiller.jpg');"></div>
</a>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="icon-next"></span>
</a>
</header>
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.
Why aren't the carousel-indicators or carousel-controls working here...
<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>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active" id="slide1">
<div class="container">
<div class="carousel-caption">
<h2>Title</h2>
<p>Text...p>
<p><a class="btn btn-md btn-success" href="#" role="button">Button</a></p>
</div>
</div>
</div>
<div class="item" id="slide2">
<div class="container">
<div class="carousel-caption">
<h2>Factors Suite</h2>
<p>Enjoy a luxury stay in the Factors Suite which features furniture crafted from reclaimed timber and works by contemporary Scottish artists.</p>
<p><a class="btn btn-md btn-info" href="#" role="button">View Gallery</a></p>
</div>
</div>
</div>
</div><!-- end carousel-inner -->
<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><!-- end carousel -->
At the foot of my page I have:
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/docs.min.js"></script>
I have tried using bootstrap.js instead - that doesn't work. Driving me mad this because I have the Carousel example from the Bookstrap 3 website, which works when I test it, and it is identical!
This is all live at the following URL:
http://www.cairnsmorecottages.co.uk/rickwood/index.php
Hoping some bright spark will spot the glaring mistake because there clearly is one here (my conception?)! Thank you.
NJ
Why ID from DIV <div id="#myCarousel" class="carousel slide" data-ride="carousel"> include '#' character?
Remove '#' from id
EDITED AFTER COMMENTS:
Review your html div tags. You can compare your html with this:
https://jsfiddle.net/35esebmp/
check this solution, work fine for me
$(document).ready(function(e) {
$(".carousel-indicators").click(function(){
$(".carousel").carousel('prev');
})
$(".left").click(function(){
$(".carousel").carousel('prev');
})
$(".right").click(function(){
$(".carousel").carousel('next');
})
});
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)
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>