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.
Related
I am building a basic "tribute website" for the first of the "Basic Front End Development Projects" in the freecodeCamp.org pipeline. I want to add a gallery that could be clicked through on the page, but after following the w3schools guide and doing about 2 hours of research, I can't find a single discrepancy between my code and what works for others. It may be possible that it only isn't working in the CodePen editor, but when I open a direct link to the page, the issues still occur.
<!-- Carousel Images -->
<div id="myCarousel" class="carousel slide container well" data-ride="carousel">
<!-- Slide Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li> <!-- to s-->`
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Images (add alts)-->
<div class="carousel-inner" role="listbox"> <!-- role="listbox" -->
<div id="img1" class="item active">
<img src="...">
</div>
<div id="img2" class="item">
<img src="...">
</div>
<div id="img3" class="item">
<img src="...">
</div>
<!-- pointers -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span id="leftArrow" class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span id="rightArrow" class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
CodePen link: here
Thanks!!!
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 -->
My slider isn't sliding and when I click on any buttons to change image it does not work. I am guessing this is something to with jQuery or the bootstrap.js file. Here is my HTML code
<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>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="party.png" alt="Slide 1">
</div>
<div class="item">
<img src="party2.png" alt="Slide 2">
</div>
</div>
<a href="#carousel" class="left carousel-control" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a href="#carousel" class="right carousel-control" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
At the bottom of my page I have the JavaScript files. They look like this.
<script src="./js/jquery.js"></script>
I checked and the file paths are correct. Btw I am using Electron and not a plain browser. I don't think it makes a difference but just keep it in mind. Thanks! ;)
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
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>