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.
Related
How to change from this
To this?
I want to shorten the width of the image in this carousel, but not the actual red box. How can i do it? I'm at my wits end. I tried every solution on this forum, it doesn't shrink it the way i show it in the picture.
<div class="container box">
<div class="row">
<!-- carousel -->
<div class="col-xs-8">
<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>
<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=""
alt="..." />
</div>
<div class="item">
<img src="" alt="..." />
</div>
<div class="item">
<img src="" alt="..." />
</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 class="col-xs-4"></div>
</div>
</div>
try:
.carousel-inner .item img {
width: 100%; /* or width: 100% !important; */
}
Try this:
.carousel-inner > .item > img {
width:100%; /* Or try to use important */
height:auto;
}
A second way to do this:
.carousel {
width:100%; /* Or try to use important */
height:auto;
}
If don't work let me know so I can help
You can use the following to resize an image in Bootstrap Carousel:
.carousel-inner .item img {
height: 100%;
width: 100% !important;
}
I had a similar problem and I solved it through some inline styling.
<div class="carousel-item">
<img
src="images/image.png"
alt="testImg"
style="height: 537px"
/>
</div>
I just used Google Chrome inspect elements to get the height of an image I was happy with and styled the problem images, as I only had some images in my carousel that didn't work properly.
-Note- styling the images like this did also adjust the positions of the indicators correctly in my testing so this shouldn't be a problem with changing the Width as well as the Height if you need.
I did try the other solutions posted here but none seemed to work. So hopefully this will help someone out.
The default bootstrap carousel controls (left and right arrows) have links that span 100% of the height of the image in the carousel. I apologize as this may be a silly question, but how do you change this so that the links are only over the width and height of the arrows themselves?
You can see an example of what I mean under "Carousel" on the Boostrap docs(https://getbootstrap.com/docs/3.3/javascript/#carousel), and the code for the carousel is below.
<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>
<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="..." 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-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>
I ended up here after doing a Google search, figured out on my own, so I'm adding my solution for Bootstrap 4.x so others can find this easy solution.
Since the icons are SVGs, adjusting BOTH the height and width will change the size of the icons. I had assumed they would change size if I increased the width, but that's not the case.
I used vw so they scale along with the screen, but you can use whatever units you want.
.carousel-control-next-icon,
.carousel-control-prev-icon {
width: 5vw;
height: 5vw;
}
add a class with 'carousel-control' and then add the following CSS.
or you can directly add this CSS to your code
#carousel-example-generic a.carousel-control {
height: 26%;
top: 33%;
width: 86px;
background: black;
//add your own CSS as you need
}
add in both .carousel-control.left and .carousel-control.right,
//change the margin to make the width and height more longer or shorter
margin: 100px 0;
//change the radius to make the point of the squared-hover looks rounded
border-radius: 60px;
add max-height & margin-top css values
<a style=" max-height:21%; margin-top:21%; " .....
to visually see the changes ( make aria-hidden="false" in first <span> & add background-color:blue; in <a> )
// note i tried this in bootstrap 4 not sure about 3
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'));
});
});
});
I was examining some past SO posts on this, but none of them helped me. My issue is that my captions are being pushed down to the point where they are no longer visible. This might be due to the varying sizes of my images. How can I make it so that the captions show up right in the center (a fixed position) of the carousel for each slide regardless of what sized image I use?
Here's what I have so far: http://www.bootply.com/KcWhRKSTxi
What I've tried: Previous SO posts mentioned to try margin-bottom for the captions. I've tried to play with the margin-bottom to push my captions up, but there are 2 issues: (1) This isn't responsive & (2) Some captions are lower than others. If you examine my bootply link, the caption in the second slider is visible because the image is the smallest (vertically speaking). In other words, even if I used margin-bottom, some captions will be higher/lower than others. In my current implementation, you won't see the captions on images 1 or 3 because they are being pushed below the 3 dots (image selectors).
Here is my code:
<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<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>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active peopleCarouselImg">
<img class="peopleCarouselImg" src="https://images.unsplash.com/photo-1440637475816-2e8bf1d4b6f3?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=9000dbcc94e0bad6c5005dc1d867b105">
<div class="carousel-caption">
<h3>Caption Text</h3>
</div>
</div>
<div class="item">
<img class="peopleCarouselImg" src="https://images.unsplash.com/photo-1446645681877-acde17e336a9?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=d8507a72935161039a62fbd8bba41283">
<div class="carousel-caption">
<h3>Caption Text</h3>
</div>
</div>
<div class="item">
<img class="peopleCarouselImg" src="https://images.unsplash.com/photo-1443808709349-353c8b390400?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=ae16ad1553fa2305bdab4a73f583a725">
<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 -->
<script src="js/jquery-2.2.3.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
.carousel {
max-height: 600px;
overflow: hidden;
}
.item img {
min-width: 100%;
height: auto;
}
.carousel-caption {
margin-bottom: 100px;
}
If you give your .carousel-inner>.item a max-height, then you could vertically align your carousel-caption content using top and transform css functions:
.carousel-inner > .item {
position: relative;
max-height: 600px;
}
.carousel-caption {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
Example: http://www.bootply.com/H08K4Hxk3C
Edit: Fix CSS Selector & Syntax
I'm still very new to bootstrap/programming html in general as this is a new hobby. I have difficulty using the carousel properly and the next questions should take seconds to anybody I guess but I've been messing with codes for an hour and I can't still find why...
I copy/pasted the given code on bootstrap's site and filled the fields with proper items (used .svg for bg img, named the id differently but changed all the other ids too.). Maybe someone could tell me why the indicators/img are not fitted properly. i.e.: indicators are at the top left corner just like any other ordered list bullets and img show underneath them.
in head there is
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
---
<div class="container">
<!-- CAROUSEL -->
<div id="mon-carousel" class="carousel slide" data-ride="carousel" style="width: 450; height: 250; margin-left: auto; margin-right: auto;>
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#mon-carousel" data-slide-to="0" class="active"></li>
<li data-target="#mon-carousel" data-slide-to="1"></li>
<li data-target="#mon-carousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="img/solid-black.svg" alt="fond-gris" style="width: 450; height: 250;">
<div class="carousel-caption">
<h3>TEST CAPTION 1</h3>
<p>test</p>
</div>
</div>
<div class="item">
<img src="img/solid-black.svg" alt="fond-gris" style="width: 450; height: 250;">
<div class="carousel-caption">
<h3>TEST CAPTION 2</h3>
<p>test</p>
</div>
</div>
<div class="item">
<img src="img/solid-black.svg" alt="fond-gris" style="width: 450; height: 250;">
<div class="carousel-caption">
<h3>TEST CAPTION 2</h3>
<p>test</p>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#mon-carousel" 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="#mon-carousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!-- CAROUSEL -->
</div>
Your webpage is most probably missing the required bootstrap files.
Add this line to your <head>....</head> section:
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
And this line below your jQuery script line:
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
I realized that when I used style in the carousel's div it was the source of the problem... I guess I'll have to find an other way around to size the carousel.