Following is the link to my carousel code
https://jsfiddle.net/65jbbp2c/2/
Here I want the text below the image to move along with the respective slide.
The problem here is the text is out side "myCarousel"s scope.
<div class="container">
<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="3000">
<!-- 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 text-center" role="listbox">
<div class="item active">
<img src="https://static.pexels.com/photos/36762/scarlet-honeyeater-bird-red-feathers.jpg" alt="Chania" width="400" height="200">
</div>
<div class="item">
<img src="https://dncache-mauganscorp.netdna-ssl.com/thumbseg/1404/1404088-bigthumbnail.jpg" alt="Chania" width="400" height="200">
</div>
<div class="item">
<img src="https://static.pexels.com/photos/55813/geranium-wave-water-rings-55813.jpeg" alt="Flower" width="400" height="200">
</div>
<div class="item">
<img src="http://tsikave.ostriv.in.ua/images/publications/4/15434/1364988835.jpg" alt="Flower" width="400" height="200">
</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 id="slideCapstion" class="text-center">
<div class="side1">
side1 text
</div>
<div class="side2">
side2 text
</div>
<div class="side3">
side3 text
</div>
<div class="side4">
side4 text
</div>
</div>
</div>
First of all did you check the documentation for the caption option on bootstrap website (exactly what #HenryDev posted)
Otherwise you can use this code if it helps :
$('#myCarousel').on('slide.bs.carousel', function (e) {
// Hide all caption
$('div#slideCapstion div').addClass('hidden');
// Show the specific caption associated to the image
$('div#slideCapstion div.' + e.relatedTarget.dataset.caption).removeClass('hidden');
})
<div class="container">
<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="3000">
<!-- 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 text-center" role="listbox">
<div class="item active" data-caption="side1">
<img src="https://static.pexels.com/photos/36762/scarlet-honeyeater-bird-red-feathers.jpg" alt="Chania" width="400" height="200">
</div>
<div class="item" data-caption="side2">
<img src="https://dncache-mauganscorp.netdna-ssl.com/thumbseg/1404/1404088-bigthumbnail.jpg" alt="Chania" width="400" height="200">
</div>
<div class="item" data-caption="side3">
<img src="https://static.pexels.com/photos/55813/geranium-wave-water-rings-55813.jpeg" alt="Flower" width="400" height="200">
</div>
<div class="item" data-caption="side4">
<img src="http://tsikave.ostriv.in.ua/images/publications/4/15434/1364988835.jpg" alt="Flower" width="400" height="200">
</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 id="slideCapstion" class="text-center">
<div class="side1">
side1 text
</div>
<div class="side2 hidden">
side2 text
</div>
<div class="side3 hidden">
side3 text
</div>
<div class="side4 hidden">
side4 text
</div>
</div>
</div>
I just added data to your item containing the images and used the event handler from bootstrap to manage the current item shown and get the data-caption value to show the right one.
This code is basic but it does the job.
Here's a working solution. Hope it helps!
jQuery(function ($) {
$('.carousel').carousel();
var caption = $('div.item:nth-child(1) .carousel-caption');
$('.information').html(caption.html());
caption.css('display', 'none');
$(".carousel").on('slide.bs.carousel', function (evt) {
var caption = $('div.item:nth-child(' + ($(evt.relatedTarget).index() + 1) + ') .carousel-caption');
$('.information').html(caption.html());
caption.css('display', 'none');
});
});
.container, .information {
width: 600px;
margin: auto;
color: #000;
}
.carousel-caption {
color: #000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<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/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div id="carousel-example-captions" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel-example-captions" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-captions" data-slide-to="1" class=""></li>
<li data-target="#carousel-example-captions" data-slide-to="2" class=""></li>
<li data-target="#carousel-example-captions" data-slide-to="3" class=""></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img data-src="holder.js/900x500/auto/#777:#777" alt="900x500" src="https://static.pexels.com/photos/36762/scarlet-honeyeater-bird-red-feathers.jpg" alt="Chania" width="400" height="200">
<div class="carousel-caption">
<h3>side 1 text</h3>
</div>
</div>
<div class="item">
<img data-src="holder.js/900x500/auto/#666:#666" alt="900x500" src="https://dncache-mauganscorp.netdna-ssl.com/thumbseg/1404/1404088-bigthumbnail.jpg" alt="Chania" width="400" height="200">
<div class="carousel-caption">
<h3>side 2 text</h3>
</div>
</div>
<div class="item">
<img data-src="holder.js/900x500/auto/#555:#5555" alt="900x500" src="https://static.pexels.com/photos/55813/geranium-wave-water-rings-55813.jpeg" alt="Chania" width="400" height="200">
<div class="carousel-caption">
<h3>side 3 text</h3>
</div>
</div>
<div class="item">
<img data-src="holder.js/900x500/auto/#555:#5555" alt="900x500" src="http://tsikave.ostriv.in.ua/images/publications/4/15434/1364988835.jpg" alt="Chania" width="400" height="200">
<div class="carousel-caption">
<h3>side 4 text</h3>
</div>
</div>
</div>
<a class="left carousel-control" href="#carousel-example-captions" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-captions" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
<div class="information"></div>
Related
I am not able to display images in carousel through image URL(JSON data). I am trying to set attribute using attr() in jquery but cannot achieve desired result. Here is my code:
<div class="col-md-8">
<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="1"></li>
</ol>
<!-- Wrapper for slides-->
<div class="carousel-inner">
<div class="item active">
<img src="" alt="myimage1" style="width: 100%">
<div class="carousel-caption">
<h3>Your news title</h3>
<p>news in short</p>
</div>
</div>
<div class="item">
<img src="" alt="myimage2" style="width: 100%">
<div class="carousel-caption">
<h3>Your news title</h3>
<p>news in short</p>
</div>
</div>
<div class="item">
<img src="" alt="myimage3" style="width: 100%">
<div class="carousel-caption">
<h3>Your news title</h3>
<p>news in short</p>
</div>
</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>
In .js file:
$(document).ready(function() {
$.getJSON('https://newsapi.org/v1/articles?source=techcrunch&sortBy=top&apiKey=my-api-key',function(json) {
console.log(json);
console.log(json.articles.length);
for(var i = 0 ;i<3;i++){ //As my carousel contains only 3 images
$(".item").attr("src",json.articles[i].urlToImage);
}
});
});
The JSON response of API:
$(".item").attr("src",json.articles[i].urlToImage);
should be
$(".item img").attr("src",json.articles[i].urlToImage);
Firstly this is not duplicate of any post I have bootstrap carousel and I'm trying to set interval for my each bootstrap carousel .item and I found a code for it from here but this example is not work on my snippet where is my mistake ? my code is same as with this carousel but nothing happening how can I set interval for my each bootstrap carousel item ?
At the moment this only work per carousel and I think it should work per slide (overwrite default) for 2 reasons:
First slide can be set to show a quick overview, etc
Some slides may have more text and require a longer delay to read, some have less....
E.g
<div class="carousel-inner">
<div class="active item" data-interval="500">…</div>
<div class="item" data-interval="5000">…</div>
<div class="item" data-interval="5000>…</div>
</div>
And my real example
$(window).load(function() {
var t;
var start = $('#carousel').find('.active').attr('data-interval');
t = setTimeout("$('#carousel').carousel({interval: 1000});", start - 1000);
$('#carousel').on('slid.bs.carousel', function() {
clearTimeout(t);
var duration = $(this).find('.active').attr('data-interval');
$('#carousel').carousel('pause');
t = setTimeout("$('#carousel').carousel();", duration - 1000);
})
$('.ani-icon-right-chevron').on('click', function() {
clearTimeout(t);
});
$('.ani-icon-chevron-pointing-to-the-left').on('click', function() {
clearTimeout(t);
});
});
#carousel {
width: 700px;
margin: 70px auto;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
<div id="carousel" class="carousel slide" data-ride="carousel">
<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>
<div class="carousel-inner">
<div class="item active" data-interval="300">
<img src="http://placekitten.com/1600/600" />
<div class="carousel-caption">
<h3>Meow</h3>
<p>Just Kitten Around</p>
</div>
</div>
<div class="item" data-interval="600">
<img src="http://placekitten.com/1600/600" />
<div class="carousel-caption">
<h3>Meow</h3>
<p>Just Kitten Around</p>
</div>
</div>
<div class="item" data-interval="900">
<img src="http://placekitten.com/1600/600" />
<div class="carousel-caption">
<h3>Meow</h3>
<p>Just Kitten Around</p>
</div>
</div>
</div>
<a class="left carousel-control" href="#carousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
edited your code and so far its working on my end
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
<div id="carousel" class="carousel slide" data-ride="carousel" data-interval="1000" >
<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>
<div class="carousel-inner">
<div class="item active" interval="1000">
<img src="http://placekitten.com/1600/600" />
<div class="carousel-caption">
<h3>Meow</h3>
<p>Just Kitten Around</p>
</div>
</div>
<div class="item" interval="10000">
<img src="http://placekitten.com/1600/600" />
<div class="carousel-caption">
<h3>Meow</h3>
<p>Just Kitten Around</p>
</div>
</div>
<div class="item" interval="5000">
<img src="http://placekitten.com/1600/600" />
<div class="carousel-caption">
<h3>Meow</h3>
<p>Just Kitten Around</p>
</div>
</div>
</div>
<a class="left carousel-control" href="#carousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script>
$(window).load(function () {
var st;
$('#carousel').on('slid.bs.carousel', function () {
// debugger;
var newinterval = $('#carousel .carousel-inner').find('.active').attr('interval');
$('#carousel').carousel("pause");
clearTimeout(st);
st = setTimeout("$('#carousel').carousel()", newinterval);
// $('#carousel').carousel({ interval: newinterval });
});
});
</script>
Try adding data-interval="value" to <div id="carousel" class="carousel slide" data-ride="carousel">
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
<div id="carousel" class="carousel slide" data-ride="carousel" data-interval="1000" >
<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>
<div class="carousel-inner">
<div class="item active">
<img src="http://placekitten.com/1600/600" />
<div class="carousel-caption">
<h3>Meow</h3>
<p>Just Kitten Around</p>
</div>
</div>
<div class="item">
<img src="http://placekitten.com/1600/600" />
<div class="carousel-caption">
<h3>Meow</h3>
<p>Just Kitten Around</p>
</div>
</div>
<div class="item">
<img src="http://placekitten.com/1600/600" />
<div class="carousel-caption">
<h3>Meow</h3>
<p>Just Kitten Around</p>
</div>
</div>
</div>
<a class="left carousel-control" href="#carousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
My carousel is showing each slide below each other instead of one.
I have 3 slides that are below each other, instead I want them to be "inside" with a slide, but for some reason it doesn't work.
A snippet is below:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
$('.carousel').carousel({
interval: 1000
})
});
</script>
<script type="text/javascript">
$(document).ready(function(){
$(".carousel-inner div:first").addClass("active");
});
</script>
<div id="carousel" class="carousel slide" data-ride="carousel">
<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>
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img class="d-block img-fluid" src="http://veterans4you.com/wp-content/uploads/2013/03/landscape-7-800x400.jpg" alt="1">
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="http://veterans4you.com/wp-content/uploads/2013/03/landscape-7-800x400.jpg" alt="2">
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="http://veterans4you.com/wp-content/uploads/2013/03/landscape-7-800x400.jpg" alt="3">
</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>
The div containing the images shoud have class="item" not "carousel-item", change it.
Here's the working snippet.
jQuery(document).ready(function($) {
$('.carousel').carousel({
interval:2000
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div id="carousel" class="carousel slide" data-ride="carousel">
<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>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img class="d-block img-fluid" src="http://veterans4you.com/wp-content/uploads/2013/03/landscape-7-800x400.jpg" alt="1">
</div>
<div class="item">
<img class="d-block img-fluid" src="http://veterans4you.com/wp-content/uploads/2013/03/landscape-7-800x400.jpg" alt="2">
</div>
<div class="item">
<img class="d-block img-fluid" src="http://veterans4you.com/wp-content/uploads/2013/03/landscape-7-800x400.jpg" alt="3">
</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>
Late to the game. The prev post got it. :)
The div container classes holding the images were using a different class. This line of JS isn't necessary because the class can be included in the HTML.
$(".carousel-inner div:first").addClass("active");
The extra CSS is just for the example.
jQuery(document).ready(function($) {
$('.carousel').carousel({
interval: 1000
})
// Not needed because the class can be included in the HTML
// $(".carousel-inner div:first").addClass("active");
});
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
width: 70%;
margin: auto;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<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="item active">
<img class="d-block img-fluid" src="http://veterans4you.com/wp-content/uploads/2013/03/landscape-7-800x400.jpg" alt="1">
<div class="carousel-caption"></div>
</div>
<div class="item">
<img class="d-block img-fluid" src="http://veterans4you.com/wp-content/uploads/2013/03/landscape-7-800x400.jpg" alt="2">
<div class="carousel-caption"></div>
</div>
<div class="item">
<img class="d-block img-fluid" src="http://veterans4you.com/wp-content/uploads/2013/03/landscape-7-800x400.jpg" alt="3">
<div class="carousel-caption"></div>
</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>
Is there a way to have multiple generic bootstrap carousels without IDs on a page work separately? Currently, both carousels are working, but when I click prev/next then it changes both carousels. I would think this would target the carousel clicked?
Thanks!
HTML
<div class="carousel slide" data-ride="carousel" data-wlp-component="wlp.carousel">
<!-- Indicators -->
<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>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=960%C3%97370&w=960&h=370" alt="Image1">
</div>
<div class="item">
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=960%C3%97370&w=960&h=370" alt="Image2">
</div>
<div class="item">
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=960%C3%97370&w=960&h=370" alt="Image3">
</div>
<div class="item">
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=960%C3%97370&w=960&h=370" alt="Image4">
</div>
</div>
<!-- Left and right controls -->
<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>
<!-- Second Carousel -->
<div class="carousel slide" data-ride="carousel" data-wlp-component="wlp.carousel">
<!-- Indicators -->
<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>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=960%C3%97370&w=960&h=370" alt="Image1">
</div>
<div class="item">
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=960%C3%97370&w=960&h=370" alt="Image2">
</div>
<div class="item">
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=960%C3%97370&w=960&h=370" alt="Image3">
</div>
<div class="item">
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=960%C3%97370&w=960&h=370" alt="Image4">
</div>
</div>
<!-- Left and right controls -->
<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>
JS
$('.carousel').each(function(){
$(this).carousel({
interval: 3000
});
$(this).on('click', '.left', function(){
$(this).carousel('prev');
});
$(this).on('click', '.right', function(){
$(this).carousel('next');
});
});
As per my understanding you need to have different selected to bind the events for 2 different carousel. So you need to use different class or different ID or any 2 different selected.
I have found a perfectly working solution to the question of how to link to a specific slide in a bootstrap carousel. However, I have multiple carousels with different Id's running on the same page. How can my link target a specific carousel id?
The specifics:
I have three carousels
They have different ids: "carousel-01", "carousel-02", "carousel-03".
I call the function to be able to link to specific slides. Here it is carousel-01. Could also be carousel-03
function goToSlide(number) {$("#carousel-01").carousel(number);}
Then I put my link in the markup
Go to slide #5
My question is: How can I make the link target a carousel with a specific id. Let's say, I'd want not #carousel-01 move but #carousel-03?
You must use different id for both carousel like this
<!--carousel one -->
<div id="carousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<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>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="..." alt="...">
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="..." alt="...">
<div class="carousel-caption">
...
</div>
</div>
...
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div><!--end of carousel one -->
<!--carousel two -->
<div id="carousel2" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel2" data-slide-to="0" class="active"></li>
<li data-target="#carousel2" data-slide-to="1"></li>
<li data-target="#carousel2" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="..." alt="...">
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="..." alt="...">
<div class="carousel-caption">
...
</div>
</div>
...
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel2" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel2" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div><!--end of carousel two -->
Then call the carousel via javascript
<script>
//for carousel one
$('#carousel').carousel()
//for carousel two
$('#carousel2').carousel()
</script>
Here is the solution for that on click if 'Go to slide3' , It will take the specific slider , ex: that is now i am targeting it to the class 'slidehere' in '#carousel2'
<!-- link to specific slider -->
Go to slide3
<!--carousel one -->
<div id="carousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<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>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="..." alt="...">
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="..." alt="...">
<div class="carousel-caption">
...
</div>
</div>
...
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div><!--end of carousel one -->
<!--carousel two -->
<div id="carousel2" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel2" data-slide-to="0" class="active"></li>
<li data-target="#carousel2" data-slide-to="1"></li>
<li data-target="#carousel2" data-slide-to="2" class="slidethis"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="..." alt="...">
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="..." alt="...">
<div class="carousel-caption">
...
</div>
</div>
<div class="item slidethis"> <!-- targeted item on click 'slidethis'-->
<img src="..." alt="...">
<p>slide</p>
<div class="carousel-caption">
...
</div>
</div>
...
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel2" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel2" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div><!--end of carousel two -->
javascript required
<script>
//for carousel one
$('#carousel').carousel()
//for carousel two
$('.slide3').click(function() { //onclick
/* Act on the event */
$('#carousel2 .carousel-inner .slidethis').siblings().removeClass('active');//removes active class from siblings
$('#carousel2 .carousel-inner .slidethis').addClass('active') //adding active class to targeted slide
$('#carousel2 .carousel-indicators .slidethis').siblings().removeClass('active');//removes active class from siblings
$('#carousel2 .carousel-indicators .slidethis').addClass('active')/adding active class to targeted slide
});
</script>