I'm working with the Carousel within bootstrap. I have tested this with many different variations. Even when I copy and paste the example code from bootstrap it still does not work. I have verified that the file paths are accurate. The controls still appear but they do not seemed to be linked to anything. I've seen a few places that mention a "function" but when I add this in nothing changes.
<div class="container">
<div id="myCarousel-example-generic" class="carousel slide">
<!-- 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" role="listbox">
<div class="item active">
<img src="pics/01.jpg" style="max-width: 100%;" />
<div class="carousel-caption">
This should be first picture
</div>
</div>
<div class="item">
<img src="pics/02.jpg" style="max-width: 100%;" />
<div class="carousel-caption">
This should be another picture
</div>
</div>
<div class="item">
<img src="pics/03.jpg" style="max-width: 100%;" />
<div class="carousel-caption">
This is the last picture
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
<span class="icon-next"></span>
</a>
</div>
</div>
This is my code relevant to the carousel and I have below that these two js script calls
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/bootstrap.min.js"></script>
I'm sure that its something simple but I cannot find what is wrong with this.
You changed the id of carousel but you didn't update any of the controls referencing that id. Your carousel-indicators and carousel-control need to reference "myCarousel-example-generic" not "carousel-example-generic".
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<div class="container">
<div id="myCarousel-example-generic" class="carousel slide">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel-example-generic" data-slide-to="1"></li>
<li data-target="#myCarousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="http://placehold.it/750x150?text=1" style="max-width: 100%;" />
<div class="carousel-caption">
This should be first picture
</div>
</div>
<div class="item">
<img src="http://placehold.it/750x150?text=2" style="max-width: 100%;" />
<div class="carousel-caption">
This should be another picture
</div>
</div>
<div class="item">
<img src="http://placehold.it/750x150?text=3" style="max-width: 100%;" />
<div class="carousel-caption">
This is the last picture
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#myCarousel-example-generic" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="right carousel-control" href="#myCarousel-example-generic" data-slide="next">
<span class="icon-next"></span>
</a>
</div>
</div>
Related
Image slider not working when i click on the arrows or when i try to manually change the image.
With my limited knowledge, i tried editing the code with no luck
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:400,500,700,300,100">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="styles/style.css">
<div class="container" id="slider"><!-- Container Starts -->
<div class="col-md-12"><!-- col-md-12 Starts -->
<div id="myCarousel" class="carousel slide" data-ride="carousel"><!-- carousel slide Starts -->
<ol class="carousel-indicators"><!-- carousel-indicators Starts -->
<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><!-- carousel-indicators Ends -->
<div class="carousel-inner"><!-- carousel-inner Starts -->
<div class="item-active">
<img src="admin_panel/slides_images/1.jpg" alt="slide 1">
</div>
<div class="item">
<img src="admin_panel/slides_images/2.jpg" alt="slide 2">
</div>
<div class="item">
<img src="admin_panel/slides_images/3.jpg" alt="slide 3">
</div>
<div class="item">
<img src="admin_panel/slides_images/4.jpg" alt="slide 4">
</div>
</div><!-- carousel-inner Ends -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev"><!-- left carousel-control Starts -->
<span class="glyphicon glyphicon-chevron-left"> </span>
<span class="sr-only"> Previous </span>
</a><!-- left carousel-control Ends -->
<a class="right carousel-control" href="#myCarousel" data-slide="next"><!-- right carousel-control Starts -->
<span class="glyphicon glyphicon-chevron-right"> </span>
<span class="sr-only"> Next </span>
</a><!-- right carousel-control Ends -->
</div><!-- carousel slide Ends -->
</div><!-- col-md-12 Ends -->
</div><!-- Container Ends -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</body>
</html>
The slider is supposed to change when i click on the arrow or try and change it manually. No errors appear, just not the expected result.
Use The Below Code
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:400,500,700,300,100">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="styles/style.css">
<div class="container">
<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>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="https://images.pexels.com/photos/34950/pexels-photo.jpg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" alt="slide 1" style="width:100%;">
</div>
<div class="item">
<img src="https://images.pexels.com/photos/459225/pexels-photo-459225.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="slide 2" style="width:100%;">
</div>
<div class="item">
<img src="https://images.pexels.com/photos/326055/pexels-photo-326055.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="slide 3" style="width:100%;">
</div>
<div class="item">
<img src="https://cdn.pixabay.com/photo/2018/10/30/16/06/water-lily-3784022__340.jpg" alt="slide 4">
</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>
<!-- Container Ends -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</body>
</html>
When slide changes indicators are in right position (1-2-3). But when I click on them, they are not responding. Prev and next links are working fine. Here is my code:
<div id="theCarousel" class="carousel-slide hidden-xs" data-interval ="3000">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#theCarousel" data-slide-to="0" class="active"></li>
<li data-target="#theCarousel" data-slide-to="1"></li>
<li data-target="#theCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active"><img class="img-responsive" src="eberhard-grossgasteiger-311213.jpg" alt="slide 1"></div>
<div class="item"><img class="d-block img-fluid" src="annie-spratt-176376.jpg" alt="slide 2"></div>
<div class="item"><img class="d-block img-fluid" src="joanna-kosinska-129039.jpg" alt="slide 3"></div>
</div><!-- /carousel-inner -->
<!-- navigation -->
<a class="left carousel-control" href="#theCarousel" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
<a class="right carousel-control" href="#theCarousel" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
</div><!-- /carousel-slide --
Here is JS file:
// Activate Carouse
$("#theCarousel").carousel();
// Enable Carousel Indicators
$(".item").click(function(){
$("#theCarousel").carousel(1);
});
// Enable Carousel Control
$(".left").click(function(){
$("#theCarousel").carousel("prev");
});
$(".right").click(function(){
$("#theCarousel").carousel("next");
});
What is wrong?
Click button "Run code snippet" and check its working, No need to add extra script(js), All controls of carousel handled by bootstrap.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<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>
</head>
<body>
<div class="container">
<h2>Carousel Example</h2>
<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">
<div class="item active">
<img src="http://midtowncarpetcleaning.com/wp-content/themes/envision/lib/images/default-placeholder-1000x600.png" alt="Los Angeles" style="width:100%;">
</div>
<div class="item">
<img src="http://midtowncarpetcleaning.com/wp-content/themes/envision/lib/images/default-placeholder-1000x600.png" alt="Chicago" style="width:100%;">
</div>
<div class="item">
<img src="http://midtowncarpetcleaning.com/wp-content/themes/envision/lib/images/default-placeholder-1000x600.png" alt="New york" style="width:100%;">
</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>
</body>
</html>
I finally found out what went wrong. Instead of two classes: <div id="myCarousel" class="carousel slide" data-ride="carousel"> i wrote one with hyphen between: <div id="theCarousel" class="carousel-slide hidden-xs" data-interval ="3000">.
It's my first time using Bootstrap Carousel, I did exactly what the documentation says, I have all four slides showing on top of each other. Any hints?
<div id="madinah-carousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#madinah-carousel" data-slide-to="0" class="active"></li>
<li data-target="#madinah-carousel" data-slide-to="1"></li>
<li data-target="#madinah-carousel" data-slide-to="2"></li>
<li data-target="#madinah-carousel" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img src="img/mad/1.jpeg" alt="Madinah first screenshot">
</div>
<div class="carousel-item">
<img src="img/mad/2.jpeg" alt="Madinah second screenshot">
</div>
<div class="carousel-item">
<img src="img/mad/3.jpeg" alt="Madinah third screenshot">
</div>
<div class="carousel-item">
<img src="img/mad/4.jpeg" alt="Madinah fourth screenshot">
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#madinah-carousel" role="button" data-slide="prev">
<span class="icon-prev" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#madinah-carousel" role="button" data-slide="next">
<span class="icon-next" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
I also included this JS function:
$(function(){
$('.carousel').carousel()
});
This is the header:
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--- Font Awsome -->
<script src="https://use.fontawesome.com/4c7009c904.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- my CSS -->
<link rel="stylesheet" href="css/styles.css">
At the bottom of the I have the following:
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://code.jquery.com/jquery-3.1.1.slim.js" integrity="sha256-5i/mQ300M779N2OVDrl16lbohwXNUdzL/R2aVUXyXWA=" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- Scrolling Nav JavaScript -->
<script src="js/jquery.easing.min.js"></script>
<script src="js/scrolling-nav.js"></script>
<script src="js/script.js"></script>
You have wrong classes setted in the div
it's not div class="carousel-item" it's just div class="item"
<div id="madinah-carousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#madinah-carousel" data-slide-to="0" class="active"></li>
<li data-target="#madinah-carousel" data-slide-to="1"></li>
<li data-target="#madinah-carousel" data-slide-to="2"></li>
<li data-target="#madinah-carousel" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="img/mad/1.jpeg" alt="Madinah first screenshot">
</div>
<div class="item">
<img src="img/mad/2.jpeg" alt="Madinah second screenshot">
</div>
<div class="item">
<img src="img/mad/3.jpeg" alt="Madinah third screenshot">
</div>
<div class="item">
<img src="img/mad/4.jpeg" alt="Madinah fourth screenshot">
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#madinah-carousel" role="button" data-slide="prev">
<span class="icon-prev" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#madinah-carousel" role="button" data-slide="next">
<span class="icon-next" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
I've tried that in fiddle and it's working.
Regards
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 -->
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