Bootply: http://www.bootply.com/byUX0u7K0s
css:
.modal-body img{
width:100%;
height:100%;
}
JS:
$('img').click(function(){
$('.modal-body').html( $(this).parent().html() );
$('#myModal').modal({show:true})
});
HTML:
<div id="myCarousel" class="carousel slide" style="width: 400px; margin: 0 auto">
<div class="carousel-inner">
<div class="item">
<img src="http://jasny.github.com/bootstrap/2.3.1/assets/img/bootstrap-mdo-sfmoma-01.jpg" alt="">
</div>
<div class="item">
<img src="http://jasny.github.com/bootstrap/2.3.1/assets/img/bootstrap-mdo-sfmoma-02.jpg" alt="">
</div>
<div class="item active">
<img src="http://jasny.github.com/bootstrap/2.3.1/assets/img/bootstrap-mdo-sfmoma-03.jpg" alt="">
</div>
</div> <a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>
</div>
<div id="myModal" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3>Modal header</h3>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
In the above code i had implemented carousel with popupmodal in bootstrap.everything works fine in the code but when i open a model popup i want to use prev and next button in popup also.had anyone came accross this.any help would be appreciated.
This is not possible with only bootstrap framework, please check some additionl plugin, like this
http://ashleydw.github.io/lightbox/#image-gallery
And use it like this
<div id="myCarousel" class="carousel slide" data-interval="3000" 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>
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item">
<a href="http://25.media.tumblr.com/de356cd6570d7c26e73979467f296f67/tumblr_mrn3dc10Wa1r1thfzo6_1280.jpg" data-gallery="global-gallery" data-parent="" data-toggle="lightbox">
<figure>
<img src="//25.media.tumblr.com/de356cd6570d7c26e73979467f296f67/tumblr_mrn3dc10Wa1r1thfzo6_400.jpg" class="img-responsive" alt="">
<figcaption>#gregfoster</figcaption>
</figure>
</a>
</div>
<div class="item">
<a href="http://distilleryimage10.ak.instagram.com/85c5d0e4039411e3bd9b22000aa82186_7.jpg" data-toggle="lightbox" data-gallery="global-gallery" data-parent="">
<img src="//distilleryimage10.ak.instagram.com/85c5d0e4039411e3bd9b22000aa82186_7.jpg" class="img-responsive">
</a>
</div>
<div class="item">
<a href="http://25.media.tumblr.com/de356cd6570d7c26e73979467f296f67/tumblr_mrn3dc10Wa1r1thfzo6_1280.jpg" data-gallery="global-gallery" data-parent="" data-toggle="lightbox">
<figure>
<img src="//25.media.tumblr.com/de356cd6570d7c26e73979467f296f67/tumblr_mrn3dc10Wa1r1thfzo6_400.jpg" class="img-responsive" alt="">
<figcaption>#gregfoster</figcaption>
</figure>
</a>
</div>
</div>
<!-- Carousel nav -->
<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>
JS
$(document).delegate('*[data-toggle="lightbox"]', 'click', function(event) {
event.preventDefault();
$(this).ekkoLightbox();
});
Working fiddle
http://jsfiddle.net/52VtD/8900/
Related
I've a query. I've three different Bootstrap Tabpane. Each and every Tab has different Carousel Items in it. I would like to activate the carousel when the tab is selected. currently its activated when the pages is loaded. When i select the third tab, its reaches nearly middle of the carousel. Can anyone help me on this. I guess, we can activate it by JS, but i'm not sure how to activate it on each tab selection
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<div style="font-size:12pt;"><ul id="myTab" class="nav nav-tabs"
style="width: 100%; padding-top: 10px;">
<li class="active">tab1</li>
<li>tab2</li>
<li>tab3</li>
</ul></div>
<div class="tab-pane fade" id="tab1">
<div id="myCarousel1" class="carousel slide" data-ride="carousel">
<!-- Carousel indicators -->
<ol class="carousel-indicators carousel-indicators-numbers" style="bottom:
-50px;">
<li data-target="#myCarousel1" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel1" data-slide-to="1"></li>
</ol>
<!-- Wrapper for carousel items -->
<div class="carousel-inner" style="margin-top: 3%;">
<div class="item active"><img class="img-responsive center-block
imageslidesize" src="../Images/01.jpg" alt="First Slide"/></div>
<div class="item"><img class="img-responsive center-block imageslidesize" src="../Images/02.JPG" alt="Second Slide"/></div>
</div>
</div>
<!-- Carousel controls -->
<a class="carousel-control left" href="#myCarousel1"
style="background:none;color:black;" data-slide="prev"><span
class="glyphicon glyphicon-chevron-left"></span></a>
<a class="carousel-control right" href="#myCarousel1"
style="background:none;color:black;" data-slide="next"><span
class="glyphicon glyphicon-chevron-right"></span></a>
</div>
<div class="tab-pane fade" id="tab2">
<div id="myCarousel2" class="carousel slide" data-ride="carousel">
<!-- Carousel indicators -->
<ol class="carousel-indicators carousel-indicators-numbers" style="bottom:
-50px;">
<li data-target="#myCarousel2" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel2" data-slide-to="1"></li>
</ol>
<!-- Wrapper for carousel items -->
<div class="carousel-inner" style="margin-top: 3%;">
<div class="item active"><img class="img-responsive center-block
imageslidesize" src="../Images/01.jpg" alt="First Slide"/></div>
<div class="item"><img class="img-responsive center-block imageslidesize"
src="../Images/02.JPG" alt="Second Slide"/></div>
</div>
</div>
<!-- Carousel controls -->
<a class="carousel-control left" href="#myCarousel2"
style="background:none;color:black;" data-slide="prev"><span
class="glyphicon glyphicon-chevron-left"></span></a>
<a class="carousel-control right" href="#myCarousel2"
style="background:none;color:black;" data-slide="next"><span
class="glyphicon glyphicon-chevron-right"></span></a>
</div>
<div class="tab-pane fade" id="tab3">
<div id="myCarousel2" class="carousel slide" data-ride="carousel">
<!-- Carousel indicators -->
<ol class="carousel-indicators carousel-indicators-numbers" style="bottom:
-50px;">
<li data-target="#myCarousel3" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel3" data-slide-to="1"></li>
</ol>
<!-- Wrapper for carousel items -->
<div class="carousel-inner" style="margin-top: 3%;">
<div class="item active"><img class="img-responsive center-block
imageslidesize" src="../Images/01.jpg" alt="First Slide"/></div>
<div class="item"><img class="img-responsive center-block imageslidesize"
src="../Images/02.JPG" alt="Second Slide"/></div>
</div>
</div>
<!-- Carousel controls -->
<a class="carousel-control left" href="#myCarousel3"
style="background:none;color:black;" data-slide="prev"><span
class="glyphicon glyphicon-chevron-left"></span></a>
<a class="carousel-control right" href="#myCarousel3"
style="background:none;color:black;" data-slide="next"><span
class="glyphicon glyphicon-chevron-right"></span></a>
</div>
If you want to take owl-carousel into the tab then you should give same IDs to each owl carousel with same class="owl-carousel".
Working example : https://codepen.io/manektech/pen/XGagBe
HTML
<div class="container">
<div class="row">
<div class="col-xs-12">
<div>
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">Home</li>
<li role="presentation">Profile</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">
<div id="owl-example" class="owl-carousel">
<div> <img src="https://www.fillmurray.com/640/360"> </div>
<div> <img src="https://www.fillmurray.com/640/360"> </div>
<div> <img src="https://www.fillmurray.com/640/360"> </div>
<div> <img src="https://www.fillmurray.com/640/360"> </div>
<div> <img src="https://www.fillmurray.com/640/360"> </div>
<div><img src="https://www.fillmurray.com/640/360"> </div>
<div> <img src="https://www.fillmurray.com/640/360"> </div>
</div>
</div>
<div role="tabpanel" class="tab-pane" id="profile">
<div id="owl-example" class="owl-carousel">
<div> <img src="https://loremflickr.com/640/360"> </div>
<div> <img src="https://loremflickr.com/640/360"> </div>
<div> <img src="https://loremflickr.com/640/360"> </div>
<div> <img src="https://loremflickr.com/640/360"> </div>
<div> <img src="https://loremflickr.com/640/360"> </div>
<div> <img src="https://loremflickr.com/640/360"> </div>
<div> <img src="https://loremflickr.com/640/360"> </div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
JavaScript
jQuery(document).ready(function() {
jQuery(".owl-carousel").owlCarousel();
});
Working example : https://codepen.io/manektech/pen/XGagBe
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>
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);
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>
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>