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>
Related
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);
I am trying to make my bootstrap carousel the full width of the page, thinking that that will look the best. I've looked it up and nothing I tried worked, though. Also, if you think that making it a different size would be better, I would love to hear! I'm not great with layout and I'm trying to work on it. Also, my pictures are in SD even though they were HD. Should I link them in the same folder as my html and css files instead of getting them straight from the internet?
HTML
<!DOCTYPE html>
<html>
<head>
<title>Website Template</title>
<!-- links to the css page and bootstrap -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" integrity="sha512-K1qjQ+NcF2TYO/eI3M6v8EiNYZfA95pQumfvcVrTHtwQVDG+aHRqLi/ETn2uB+1JqwYqVG3LIvdm9lj6imS/pQ==" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="main.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
<!-- BEGIN NAVBAR -->
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header pull-left">
<a class="navbar-brand" href="#">Project Name</a>
</div>
<div class="navbar-header pull-right">
<ul class="nav navbar-nav pull-left">
<li><a class="" href="#">Text</a></li>
</ul>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>Text</li>
<li>Text</li>
<li>Text</li>
<li class="dropdown">
Dropdown <b class="caret"></b> <ul class="dropdown-menu">
<li>Text</li>
<li class="divider"></li>
<li class="dropdown-header">Text</li>
<li>Text</li>
<li>Text</li>
</ul>
</li>
</ul>
<div class="navbar-right">
<ul class="nav navbar-nav">
<li>Text</li>
<li>Text</li>
</ul>
</div>
</div>
</div>
</div>
<!-- END NAVBAR -->
<div class="container">
<!-- CAROUSEL START -->
<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="item active">
<img src="http://36646d87786feafc0611-0338bbbce19fc98919c6293def4c5554.r0.cf1.rackcdn.com/images/FiGZ9r3D3E82.878x0.Z-Z96KYq.jpg" alt="First Slide">
<div class="carousel-caption">
<h3>First slide label</h3>
<p>BLAH</p>
</div>
</div>
<div class="item">
<img src="https://media.licdn.com/mpr/mpr/p/2/005/096/045/19d71d5.jpg" alt="Second Slide">
<div class="carousel-caption">
<h3>Second slide label</h3>
<p>BLAH BLAH</p>
</div>
</div>
<div class="item">
<img src="http://d3psvddqt9zx7g.cloudfront.net/blog/wp-content/uploads/2015/05/lol1-2.jpg" alt="Third Slide">
<div class="carousel-caption">
<h3>Third slide label</h3>
<p>BLAH BLAH BLAH</p>
</div>
</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>
<!--CAROUSEL END -->
</div>
</body>
</html>
CSS
body {
padding-top: 50px;
padding-bottom: 20px;
}
.carousel img {
top: 0;
left: 0;
min-width: 100%;
height: 550px;
max-height: 550px;
width: auto;
}
Just remove the container like in this fiddle
https://jsfiddle.net/zdxq5c85/
<!-- CAROUSEL START -->
<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="item active">
<img src="http://36646d87786feafc0611-0338bbbce19fc98919c6293def4c5554.r0.cf1.rackcdn.com/images/FiGZ9r3D3E82.878x0.Z-Z96KYq.jpg" alt="First Slide">
<div class="carousel-caption">
<h3>First slide label</h3>
<p>BLAH</p>
</div>
</div>
<div class="item">
<img src="https://media.licdn.com/mpr/mpr/p/2/005/096/045/19d71d5.jpg" alt="Second Slide">
<div class="carousel-caption">
<h3>Second slide label</h3>
<p>BLAH BLAH</p>
</div>
</div>
<div class="item">
<img src="http://d3psvddqt9zx7g.cloudfront.net/blog/wp-content/uploads/2015/05/lol1-2.jpg" alt="Third Slide">
<div class="carousel-caption">
<h3>Third slide label</h3>
<p>BLAH BLAH BLAH</p>
</div>
</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>
<!--CAROUSEL END -->
I have a MVC5 app, and inside one of my views I have a carousel which is defined as the code below. The point is that it shows okay, and I'm able to navigate through the slides of the carousel by either clicking the left or right arrows or using the points. But when I open the view carousel is in the first slide, and it doesn't move through its other slides. I have to make it change slide after 3 seconds, and then when it comes to the last one, to return to the first, I also want to preserve the functionality of the manual slide changing. I guess I need some JS code for it, but don't know who to achieve it, I tried some things using setInterval and adding "active" class to the next slide, but there was no luck. Here is my carousel code:
<div id="myCarousel" class="carousel slide" style="margin-top:-22px; margin-left:-15px; margin-right:-15px;">
<!-- 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>
<li data-target="#myCarousel" data-slide-to="5"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="~/Content/img/auto.png" alt="slid0" class="img-responsive">
<div class="carousel-caption">
</div>
</div>
<div class="item">
<img src="~/Content/img/business.png" alt="slid1" class="img-responsive">
<div class="carousel-caption">
</div>
</div>
<div class="item">
<img src="~/Content/img/exercise.png" alt="slid2" class="img-responsive">
<div class="carousel-caption">
</div>
</div>
<div class="item">
<img src="~/Content/img/healthcare.png" alt="slid3" class="img-responsive">
<div class="carousel-caption">
</div>
</div>
<div class="item">
<img src="~/Content/img/lawn.png" alt="slid4" class="img-responsive">
<div class="carousel-caption">
</div>
</div>
<div class="item">
<img src="~/Content/img/hair.png" alt="slid5" class="img-responsive">
<div class="carousel-caption">
</div>
</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>
</div>
Any idea, how to solve the problem?
You can add
data-ride="carousel" data-interval="3000"
Try this
jsFiddle
<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="3000" style="margin-top:-22px; margin-left:-15px; margin-right:-15px;">
<!-- 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>
<li data-target="#myCarousel" data-slide-to="5"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="http://lorempixel.com/600/200/" alt="slid0" class="img-responsive">
<div class="carousel-caption"></div>
</div>
<div class="item">
<img src="http://lorempixel.com/600/200/" alt="slid1" class="img-responsive">
<div class="carousel-caption"></div>
</div>
<div class="item">
<img src="http://lorempixel.com/600/200/" alt="slid2" class="img-responsive">
<div class="carousel-caption"></div>
</div>
<div class="item">
<img src="http://lorempixel.com/600/200/" alt="slid3" class="img-responsive">
<div class="carousel-caption"></div>
</div>
<div class="item">
<img src="http://lorempixel.com/600/200/" alt="slid4" class="img-responsive">
<div class="carousel-caption"></div>
</div>
<div class="item">
<img src="http://lorempixel.com/600/200/" alt="slid5" class="img-responsive">
<div class="carousel-caption"></div>
</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>
</div>
So I've read through this question, but I'm still having trouble implementing the code. I've copied that javascript exactly into my custom.js file, and it said my HTML code wouldn't need to be modified. However, it still isn't working. What do I need to change?
Relevant portions of HTML file:
<!-- Nav bar -->
<ul class="dropdown-menu" role="menu">
<li>Project 1</li>
<li>Project 2</li>
<li>Project 3</li>
</ul>
<!-- Carousel -->
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class=""></li>
<li data-target="#myCarousel" data-slide-to="1" class="active"></li>
<li data-target="#myCarousel" data-slide-to="2" class=""></li>
</ol>
<div class="carousel-inner">
<div class="item">
<img src="img/Project1.jpg" alt="First slide">
<div class="container">
<div class="carousel-caption">
<h1>Project 1</h1>
</div>
</div>
</div>
<div class="item active">
<img src="img/Project2.jpg" alt="Second slide">
<div class="container">
<div class="carousel-caption">
<h1>Project 2</h1>
</div>
</div>
</div>
<div class="item">
<img src="img/Project3.jpg" alt="Third slide">
<div class="container">
<div class="carousel-caption">
<h1>Project 3</h1>
</div>
</div>
</div>
</div>
<a class="left carousel-control" href="http://getbootstrap.com/examples/carousel/#myCarousel" role="button" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
<a class="right carousel-control" href="http://getbootstrap.com/examples/carousel/#myCarousel" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
</div>
<!-- /.carousel -->
I notice that the second slide has an active class, but removing that just breaks the carousel.
In order to manually set the active class in HTML, you just need to add the active class to the following elements:
<li data-target="#myCarousel" data-slide-to="1" class="active"></li>
<div class="item active"> <!-- for slide 2 -->
As in this demo:
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<!-- Carousel -->
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class=""></li>
<li data-target="#myCarousel" data-slide-to="1" class="active"></li>
<li data-target="#myCarousel" data-slide-to="2" class=""></li>
</ol>
<div class="carousel-inner">
<div class="item">
<img src="https://picsum.photos/800/300?image=1" alt="First slide">
<div class="container">
<div class="carousel-caption">
<h1>Project 1</h1>
</div>
</div>
</div>
<div class="item active">
<img src="https://picsum.photos/800/300?image=3" alt="Second slide">
<div class="container">
<div class="carousel-caption">
<h1>Project 2</h1>
</div>
</div>
</div>
<div class="item">
<img src="https://picsum.photos/800/300?image=4" alt="Third slide">
<div class="container">
<div class="carousel-caption">
<h1>Project 3</h1>
</div>
</div>
</div>
</div>
<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>
However, doing so will not persist across page refreshes. Or at least certainly won't do so in a dynamic way. If you're going to load the active slide with Javascript, then you don't need to fuss around with manually setting the active class. Just call the .carousel(index) with the zero based index of the side you want to navigate to like this:
$('#myCarousel').carousel(1);
$(function() {
$('#myCarousel').carousel(1);
});
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<!-- Carousel -->
<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" class=""></li>
<li data-target="#myCarousel" data-slide-to="2" class=""></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="https://picsum.photos/800/300?image=1" alt="First slide">
<div class="container">
<div class="carousel-caption">
<h1>Project 1</h1>
</div>
</div>
</div>
<div class="item">
<img src="https://picsum.photos/800/300?image=3" alt="Second slide">
<div class="container">
<div class="carousel-caption">
<h1>Project 2</h1>
</div>
</div>
</div>
<div class="item">
<img src="https://picsum.photos/800/300?image=4" alt="Third slide">
<div class="container">
<div class="carousel-caption">
<h1>Project 3</h1>
</div>
</div>
</div>
</div>
<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>
The million dollar question is how can you get the javascript above to run on page load.
The answer to that depends on how you're configuring your links and your site. For this particular case, you need to pass carousel an integer and the search property always returns a string, even if it's a numeric set of digits. Therefore, you should use the new and improved answer to your linked question:
$(function(){
function getParameterByName(key) {
key = key.replace(/[*+?^$.\[\]{}()|\\\/]/g, "\\$&"); // escape RegEx meta chars
var match = location.search.match(new RegExp("[?&]" + key + "=([^&]+)(&|$)"));
var slide = match && decodeURIComponent(match[1].replace(/\+/g, " "));
if (Math.floor(slide) == slide && $.isNumeric(slide))
return parseInt(slide);
else
return 0;
}
var slideNumber = getParameterByName('slide');
$('#myCarousel').carousel(slideNumber);
});
Assuming your are going to pass in a query string like ?slide= then that information should be available in the window.location.search property.
Neither StackSnippets or jsFiddle seem to pass the location.search. But here's a plunker that demontrates this working:
Working Demo in Plunker
Which you can see working at this address:
http://run.plnkr.co/plunks/WeBsDkRLFop0oY3wHwQY/index.html?slide=1
need to say I'm a newbie in this, and I'm using Mobirise as a support.
That being said, what I haven't found (or haven't understood) in your answers is how to create a link to open a specific slide, user end, maybe adding something at the end of the url? I created a bootstrap carousel sample with mobirise for you to check out.
gallery link