I am working on a website, and Twitter Bootstrap's carousel controls don't seem to be working. Clicking on indicators allows me to navigate, and the .carousel() function works, so the website scrolls through the images without any problems, but when I try to navigate using the buttons, I can move one image to either way, but after that clicking on the button just sends me back to the previous animation, before sending me to the slide I was already on. Here's my code
<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>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div id="mainCarousel" class="carousel slide" data-ride="carousel" data-interval="6000">
<ol class="carousel-indicators">
<li data-target="mainCarousel" data-slide-to="0" id="cib1" class="active"></li>
<li data-target="#mainCarousel" data-slide-to="1" id="cib2"></li>
<li data-target="#mainCarousel" data-slide-to="2" id="cib3"></li>
<li data-target="#mainCarousel" data-slide-to="3" id="cib4"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="/res/img/carousel/image1.png" />
</div>
<div class="item">
<img src="/res/img/carousel/image2.png" />
</div>
<div class="item">
<img src="/res/img/carousel/image3.png" />
</div>
<div class="item">
<img src="/res/img/carousel/image4.png" />
</div>
</div>
<a class="left carousel-control" href="#mainCarousel" 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="#mainCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<script>
$("#mainCarousel").carousel();
</script>
Sorry if I explained it badly. I can't give anything visual. It seems to only be a problem with the website I'm making, because the code snippet works perfectly on here. In short, the left navigation button, for instance, will take me to the left once, but every time I click it after that, it moves to the right with no animation, before sliding back to the left, leaving me on the same slide I started on.
EDIT:
I am using Angular JS with routing on the same website, so that might affect how the carousel works.
See if this works, you have a few small errors in your code. You added / after the the end of the img source, not sure why. You forgot a # before the first main carousel in your ordered list, and the script at the end is unnecessary. I have done this for you here: https://jsfiddle.net/owq0e5vv/ and it seems to work fine.
I discovered the answer with a different question. After remembering that I had Angular Routing, I could narrow my search. Here's the answer:
Bootstrap carousel not working with angularjs
Related
Creating a sailing website, in the testimonials part the left and right controls and indicators are not responding. Is this because I have not included or called the function in the app.js or am I missing some jQuery? (Using .ejs)
I have looked into slick-carousel-npm and other packages, in simple HTML and CSS form the code isnt working also.
<section class="colouredSection">
<div id="sectionContainer">
<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">
<h2 class="testimonial-text">"What a beautiful day! Our skipper was amazing and even taught us how to sail a bit. I would
definitely recommend and repeat in the future!!! A perfect way to spend an afternoon in Barcelona."</h2>
</div>
<div class="item">
<h2 class="testimonial-text">"What a beautiful day! Our skipper was amazing and even taught us how to sail a bit. I would
definitely recommend and repeat in the future!!! A perfect way to spend an afternoon in Barcelona."</h2>
</div>
<div class="item">
<h2 class="testimonial-text">"What a beautiful day! Our skipper was amazing and even taught us how to sail a bit. I would
definitely recommend and repeat in the future!!! A perfect way to spend an afternoon in Barcelona."</h2>
</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>
</section>
<!-- CSS -->
<link rel="stylesheet" href="css/styles.css">
<!-- Font Awesome -->
<script defer src="https://use.fontawesome.com/releases/v5.0.7/js/all.js"></script>
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,400i,800,800i|Special+Elite|Playfair+Display:400i" rel="stylesheet">
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
In the app.get("/", .. I have made no reference to the carousel. There is no responsiveness when I expect it to move through the slides of sailing trip reviews.
You need to include utils.js or bootstrap.js somewhere in your <body> tags.
Lastly, if you’re building our JavaScript from source, it requires util.js.
https://getbootstrap.com/docs/4.0/components/carousel/
All Bootstrap’s JavaScript files depend on util.js and it has to be included alongside the other JavaScript files. If you’re using the compiled (or minified) bootstrap.js, there is no need to include this—it’s already there.
https://getbootstrap.com/docs/4.0/getting-started/javascript/#util
This is my first carousel project and I have a question on the proper/preferred way of adding hyperlinks to the images. Here is my item format (using w3school's example):
<div class="item"><a href="videos/Reports.mp4" target="_blank">
<img src="graphics/reportsCarousel.png" /></a>
<a href="videos/Reports.mp4" target="_blank"><div class="carousel-caption">
<p>Reports</p>
</div></a>
</div>
Notice I have both the image and the caption linked, because the caption div caused a dead spot so that only the top and bottom of the image was active, i.e., clickable. I tried putting the caption in the image, but didn't like the results. I also tried moving the caption above and below the image, but the caption didn't display. I really like the way this looks, but wonder if there's a better way to set up the link?
Extra Credit: Also, I wonder if there is a way to have two or three images display side-by-side using the current div setup? When I put the second image into the item div the images display vertically instead of horizontally, even using an inline ul. I can do it using a more complicated method, but if I can easily tweak this one it would save me a lot of time.
I had some time today and put this together. It seems to work.
However, I am not sure it addresses your issues since, lacking a [mcve], I cannot reproduce your issues.
I added the JS to log the click event to console - you may or may not need it in your final version (again I am unsure of what you need since the code you provided is not complete/verifiable)
Please note
that the runnable snippet below is inside a frame and the x-frame-options is set to SAMEORIGIN so the link will not actually work here (you will need to copy/paste into your own page to see the links work)
$(function() {
$('.item').on('click', function() {
console.log('clicked! going to: ' + $(this).find('a').attr('href'));
window.location = $(this).find('a').attr('href');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<a href="http://google.com" target="_blank">
<img src="http://lorempixel.com/1024/480/" />
<div class="carousel-caption">
<h3>caption 1</h3>
</div>
</a>
</div>
<div class="item">
<a href="http://google.com" target="_blank">
<img src="http://lorempixel.com/1024/480/" />
<div class="carousel-caption">
<h3>caption 2</h3>
</div>
</a>
</div>
<div class="item">
<a href="http://google.com" target="_blank">
<img src="http://lorempixel.com/1024/480/" />
<div class="carousel-caption">
<h3>caption 3</h3>
</div>
</a>
</div>
<div class="item">
<a href="http://google.com" target="_blank">
<img src="http://lorempixel.com/1024/480/" />
<div class="carousel-caption">
<h3>caption 4</h3>
</div>
</a>
</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>
Doesnt't work. With that code you find the first href ever.
Try this one:
$(function() {
$( ".item" ).each(function(index) {
$(this).on("click", function() {
console.log('clicked! going to: ' + $(this).find('a').attr('href'));
});
});
});
My bootstrap carousel looks fine on desktop. The images are sized at 1200x400. But on mobile, it shrinks in so much that you can't ready the text on the images. Also, the navigation dots on the bottom of the player move up on top of the image.
1) How do I keep the size big enough to read the text on the images on mobile
2) How do I prevent the navigation dots on the bottom of the player from overlapping on my image on mobile
Here's my bootply:
http://www.bootply.com/huskydawgs/6UtgjHqm8f
Here's my html:
<div class="content-section-b">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- 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>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img class="img-responsive" src="http://www.onvia.com/responsive/apple_orange_testimonials.png" alt="Apples and Oranges">
</div>
<div class="item">
<img class="img-responsive" src="http://www.onvia.com/responsive/pears_mangos_testimonials.png" alt="Pears and Mangos">
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" 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="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>
<!-- /.container -->
</div>
<!-- /.content-section-b -->
Here's my css:
.content-section-b {
padding: 50px 0;
background-color: #3C5A78;
}
.carousel-control.left {
background-image:none;
}
.carousel-control.right {
background-image:none;
}
The problem is with the source images: they make it seem as if they were two different carousel items, when are in fact only one (apple-orange & pear-mango)... For a quick fix, you could make individual images from the sources (one for each fruit), hide the regular carousel through media queries on xs screens, and have a visible-xs carousel which has 4 instead of 2 carousel items.
It's not a great solution, though.
Fast example: http://www.bootply.com/U5uYwmnt1g
EDIT
Added the CSS to move the navigation dots on mobile not to overlap with the slides.
Expanding on why it's not the best solution:
-You should make the elements of the carousel be html elements, for a start, and not rely completely on images with shapes and text inside (everything on your images can be replicated easily with CSS, using images only for the fruits, or for the fruits and the cirle, if you don't care to make the circle with CSS)
-Once this is done, you could skip the 2nd carousel and modify the content of each slide through media queries (or helper classes) to get the desired result
-The CSS for the navigation dots uses the max-width query, which I understand is not usually recomended, though in this case it might be well used (if somebody can expand on this, please do)
I am having an issue with the Bootstrap Carousel component, where the image is not sliding during transition.
Basically, the image seems to just get replaced (and does not slide) as can be seen from the Bootstrap site.
The other issue I am facing is that the image, when changing from one to the other seems to get overlaid on top of the left and right chevron icon controls.
I've scoured SO and found something similar:
Twitter Bootstrap Carousel Not Sliding
But the solution provided does not seem to apply for me as I am using the minified version of the Bootstrap JS which already has the transition function embedded.
Anyone came across a similar issue before?
As Leon has asked for some codes, I am practically perusing the same codes as posted in the Bootstrap website. Its just the issue has been the same where the image is not sliding in transition, but rather just getting invisible / visible and after a while where the slide gets visible, the chevron control seems to be behind the image (for a split second) and then gets on top of the image afterwards.
<!-- Carousel [START] -->
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- <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> -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="assets/img/slider-images/header-images-01.jpg" alt="Slide 1" class="img-responsive">
</div>
<div class="item">
<img src="assets/img/slider-images/header-images-02.jpg" alt="Slide 2" class="img-responsive">
</div>
<div class="item">
<img src="assets/img/slider-images/header-images-03.jpg" alt="Slide 3" class="img-responsive">
</div>
</div>
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left glyphcolor" 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 glyphcolor" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!-- Carousel [END] -->
UPDATE: The chevron icon also gets covered when I clicked on it to transition to the next slide.
Check out the css of div.item, if you have position: absolute / relative.
In other cases, try to create new document only your carousel, check if it works alone and if that's the case, your problem must be coming from earlier part of your code... Sometimes console wont show you what's wrong so you'll have to trace by yourself
My carousel from Bootstrap won't display my images or react to the controls.
This is my HTML:
<!DOCTYPE HTML>
<html>
<head>
<title>Skates R Us</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/global.css">
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#" class="navbar-brand">
Skates R Us
</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">
Home
</li>
<li>
Contact / About
</li>
<li>
Shop
</li>
<li>
New Products
</li>
<li>
Media
</li>
</ul>
</div>
</div>
</div>
<div id="carousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="carousel" data-slide-to="0"></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">
<img src="img/slide_1.png" alt="Slide 1">
</div>
<div class="item">
<img src="img/slide_2.png" alt="Slide 2">
</div>
<div class="item">
<img src="img/slide_3.png" alt="Slide 3">
</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>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script>
$("#carousel").carousel();
</script>
</body>
</html>
My CSS:
#carousel {
margin-top: 50px;
}
.carousel {
height: 500px;
margin-bottom: 60px;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
z-index: 10;
}
/* Declare heights because of positioning of img element */
.carousel .item {
width: 100%;
height: 500px;
background-color: #777;
}
.carousel-inner > .item > img {
position: absolute;
top: 0;
left: 0;
min-width: 100%;
height: 500px;
}
#media (min-width: 768px) {
.carousel-caption p {
margin-bottom: 20px;
font-size: 21px;
line-height: 1.4;
}
}
img {
background: red;
}
There are no errors in the Chrome console and the code is pretty much the exact same as that from the Bootstrap examples.
This is what the site looks like on my end:
There are just two minor things here.
The first is in the following carousel indicator list items:
<li data-target="carousel" data-slide-to="0"></li>
You need to pass the data-target attribute a selector which means the ID must be prefixed with #. So change them to the following:
<li data-target="#carousel" data-slide-to="0"></li>
Secondly, you need to give the carousel a starting point so both the carousel indicator items and the carousel inner items must have one active class. Like this:
<ol class="carousel-indicators">
<li data-target="#carousel" data-slide-to="0" class="active"></li>
<!-- Other Items -->
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="https://picsum.photos/1500/600?image=1" alt="Slide 1" />
</div>
<!-- Other Items -->
</div>
Working Demo in Fiddle
Here is the changes you need to be done
just replace the carousel div with the below code
You have missed the '#' for data-target and add active class for the first item
<div id="carousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel" data-slide-to="0"></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="img/slide_1.png" alt="Slide 1">
</div>
<div class="item">
<img src="img/slide_2.png" alt="Slide 2">
</div>
<div class="item">
<img src="img/slide_3.png" alt="Slide 3">
</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>
Well, Bootstrap Carousel has various parameters to control.
i.e.
Interval: Specifies the delay (in milliseconds) between each slide.
pause: Pauses the carousel from going through the next slide when the mouse pointer enters the carousel, and resumes the sliding when the mouse pointer leaves the carousel.
wrap: Specifies whether the carousel should go through all slides continuously, or stop at the last slide
For your reference:
Fore more details please click here...
Hope this will help you :)
Note: This is for the further help.. I mean how can you customise or change default behaviour once carousel is loaded.
Recently I was helping a friend to find why their carousel was not working. Controls would not work and images were not transitioning. I had a working sample on a page I had used and we went through all the code including checking the items above in this post. We pasted the "good" carousel into the same page and it still worked. Now, all css and bootstrap files were the same for both. The code was now identical, so all we could try was the images.
So, we replaced the images with two that were working in my sample. It worked. We replaced the two images with the first two that were originally not working, and it worked. We added back each image (all jpegs) one-by-one, and when we got to the seventh image (of 18) and the carousel failed. Weird. We removed this one image and continued to add the remaining images until they were all added and the carousel worked.
for reference, we were using jquery-3.3.1.slim.min.js and bootstrap/4.3.1/js/bootstrap.min.js on this site.
I do not know why an image would or could cause a carousel to malfunction, but it did. I couldn't find a reference to this cause elsewhere either, so I'm posting here for posterity in the hope that it might help someone else when other solutions fail.
Test carousel with limited set of "known-to-be-good" images.
For me, the carousel wasn't working in the DreamWeaver CC provided the code in the "template" page I am playing with. I needed to add the data-ride="carousel" attribute to the carousel div in order for it to start working. Thanks to Adarsh for his code snippet which highlighted the missing attribute.