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
Related
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>
How can the background pic of my page change after 5 seconds?
I was thinking to use carousel with twitter bootstrap. But every example I've seen so far is to change the image when I press the next button.
What is the best to do it? should I focus just with asp.net and css file to make this? and the code behind on C#, or add javascript or jquery?
You can use bootstrap carousel with data-interval="5000" to set the time where 5000 is in milli seconds equals to 5 seconds.
Smaple code:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="5000">
<!-- 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>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="http://placehold.it/1200x315" alt="...">
<div class="carousel-caption">
<h3>Caption Text</h3>
</div>
</div>
<div class="item">
<img src="http://placehold.it/1200x315" alt="...">
<div class="carousel-caption">
<h3>Caption Text</h3>
</div>
</div>
<div class="item">
<img src="http://placehold.it/1200x315" alt="...">
<div class="carousel-caption">
<h3>Caption Text</h3>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div> <!-- Carousel -->
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>
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>
Here's my markup:
<div id="carousel-example-generic" class="carousel slide" data-interval="false" data-pause="hover">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<div style="height:200px;">Slide 1</div>
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<div style="height:200px;">Slide 2</div>
<div class="carousel-caption">
...
</div>
</div>
<div class="item ">
<div style="height:200px;">Slide 3</div>
<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>
I am using bootstrap v3.0.3, and yet the carousel still starts scrolling after page is loaded. I have also tried including:
$(function () {
$(".carousel").carousel({ interval: false });
});
I've done this with and without the data-interval attribute, all to no avail. The carousel automatically starts scrolling after page is loaded. I have seen other questions about this but they were all referring to older version and implied it has been fixed by now.
Any ideas please?
Your carousel markup is correct for 3.0.3 (http://bootply.com/103352)
Make sure there is not other JavaScript code or other carousels on the same page.