I'm having trouble with Bootstrap carousel. I have rounded edges on my carousel but when the image slides, the corner of image appears. I can't explain with words.
Here is a normal and correct carousel image with rounded edges.
But when image slides to another image, it goes out of the frame and makes a solid edge.
Is there a way to fix this using Bootstrap 3?
Thankyou, Ričards.
I believe the "solid edges" you see are the semi-transparent "controls". I have exaggerated them to make the effect more apparent. You will likely want to adjust their styling to something more to your liking. I would recommend removing the gradient background and using a text shadow in stead to help the control stand out.
.carousel {
padding-top: 1em;
padding-bottom: 1em;
width: 350px;
margin: auto;
background-color: transparent;
}
.carousel .item img {
border-radius: 64px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<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="http://placehold.it/350x150" alt="..."></div>
<div class="item"><img src="http://placehold.it/350x150" alt="..."></div>
<div class="item"><img src="http://placehold.it/350x150" 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>
<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.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
Related
So I am making a slideshow for hair page and wanted to use the bootstrap Carousel class. However when I use it my pictures stack on top of each other instead appearing once you click the controls. How would I go about solving this
<div class="row">
<div class="col-sm-6 col-centered">
<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="chocolate.jpg" alt="Los Angeles">
</div>
<div class="item">
<img src="clip1.PNG" alt="Chicago">
</div>
<div class="item">
<img src="clip2.PNG" alt="New York">
</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>
Slideshow:
.col-centered {
float: none;
margin: 0 auto;}
You must change the class of the image to "carousel-item", not just "item". Just like the example below
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="row">
<div class="col-sm-6 col-centered">
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="https://placeimg.com/640/480/any" alt="Los Angeles">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://placeimg.com/640/480/any" alt="Chicago">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://placeimg.com/640/480/any" alt="New York">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
check if you have linked the bootstrap.js file or not!
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!!!
I have a carousel and im trying to replace the indicators with circle images, whenever i do it the image appears but the indicator doesn't disappear, i want to move the indicators and keep the image as an indicator, and i want to move the indicators to the left, how can i do that? here is my code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<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"><img src=" http://placehold.it/140x100" alt="...">
</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=" http://placehold.it/350x150" alt="...">
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src=" http://placehold.it/350x150" 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>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
Please try with this, If you need further assistance, comment bellow the answer.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- 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">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<style>
.carousel-indicators{
list-style: none;
}
.carousel-indicators li, .carousel-indicators li.active{
width: 70px;
height: 70px;
background-color: #fff;
position: relative;
margin: 10px;
}
.carousel-indicators img{
position: absolute;
width: 100%;
border-radius: 50%;
height: 100%;
top: 0;
left: 0;
}
</style>
</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"><img src=" http://placehold.it/70x70" alt="..."></li>
<li data-target="#carousel-example-generic" data-slide-to="1"><img src=" http://placehold.it/70x70" alt="..."></li>
<li data-target="#carousel-example-generic" data-slide-to="2"><img src=" http://placehold.it/70x70" alt="..."></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src=" http://placehold.it/350x150" alt="...">
<div class="carousel-caption">
1
</div>
</div>
<div class="item">
<img src=" http://placehold.it/350x150" alt="...">
<div class="carousel-caption">
2
</div>
</div>
<div class="item">
<img src=" http://placehold.it/350x150" alt="...">
<div class="carousel-caption">
2
</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>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
Change carousel indicators position from bottom to left using ".carousel-indicators" class
add this style at bottom of your css file.
.carousel-indicators {
text-align: left;
left: inherit;
width: 15px;
top: 47%;
position: absolute;
left: 2%;
margin-left: 0;
}
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Closed 7 years ago.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Improve this question
The following carousel does not seem to work.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/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.5/js/bootstrap.min.js"></script>
<div id="number-carousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#number-carousel" data-slide-to="0" class="active"></li>
<li data-target="#number-carousel" data-slide-to="1"></li>
<li data-target="#number-carousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item-active">
<img src="http://www.psdgraphics.com/file/red-number-1.jpg" style="height: 500px;" />
</div>
<div class="item">
<img src="http://www.psdgraphics.com/file/red-number-2.jpg" style="height: 500px;" />
</div>
<div class="item">
<img src="http://www.psdgraphics.com/file/red-number-3.jpg" style="height: 500px;" />
</div>
</div>
<a class="left carousel-control" href="#number-carousel" data-slide="prev">
<span class="icon-prev" aria-hidden="true"></span>
</a>
<a class="right carousel-control" href="#number-carousel" data-slide="next">
<span class="icon-next" aria-hidden="true"></span>
</a>
</div>
I am unable to find the issue. What is happening?
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<style type="text/css">
.carousel{
background: #2f4357;
margin-top: 20px;
}
.carousel .item img{
margin: 0 auto; /* Align slide image horizontally center */
}
.bs-example{
margin: 20px;
}
</style>
</head>
<body>
<div class="bs-example">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- 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 carousel items -->
<div class="carousel-inner">
<div class="item active">
<img src="http://www.iwa2006beijing.com/wp-content/uploads/2013/08/school-fish-thailand-photography-images-ecard_9.jpg" alt="First Slide">
</div>
<div class="item">
<img src="http://aquarium.ucsd.edu/images/yellow_tang.jpg" alt="Second Slide">
</div>
<div class="item">
<img src="https://upload.wikimedia.org/wikipedia/commons/b/bf/Pterois_volitans_Manado-e_edit.jpg" alt="Third Slide">
</div>
</div>
<!-- Carousel controls -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
</body>
Here's a working jsfiddle for you:
http://jsfiddle.net/zafddcx4/6/
<div id="number-carousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#number-carousel" data-slide-to="0" class="active"></li>
<li data-target="#number-carousel" data-slide-to="1"></li>
<li data-target="#number-carousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="http://www.psdgraphics.com/file/red-number-1.jpg" style="height: 500px;">
</div>
<div class="item">
<img src="http://www.psdgraphics.com/file/red-number-2.jpg" style="height: 500px;">
</div>
<div class="item">
<img src="http://www.psdgraphics.com/file/red-number-3.jpg" style="height: 500px;">
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#number-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="#number-carousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
Your version throws an error:
Uncaught TypeError: Cannot read property 'offsetWidth' of undefined
It's caused by this incorrect class name <div class="item-active">. It should be <div class="item active">
https://jsfiddle.net/partypete25/myy0qup7/
Currently my carousel seems to go to the top of the page. I am using a navbar-fixed-top, so obviously the navbar hides the top part of the carousel. How can I make it so that the carousel stays affixed directly below the navbar? Adding a simple padding wouldnt work as when using a smaller screen, the navbar collapses and is a bit of a different height than when its not collapsed.
Code:
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<div class="container">
<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>
<div class="carousel-inner">
<div class="item active">
<img src="/images/p51blueprint.jpg" alt="P-51" width="100%">
</div>
<div class="item">
<img src="/images/f-18-hornet.jpg" alt="F-18" width="100%">
</div>
<div class="item">
<img src="/images/p51blackandwhite.jpg" alt="P-51" width="100%">
</div>
<div class="item">
<img src="/images/B-52-Stratofortress-infographic.jpg" alt="B-52" width="100%">
</div>
</div>
</div>
<!-- Control arrows -->
<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>
The navbar has been known to cover the content of the website so change the padding for the body then use the media queries to change the padding of the body too for different size. Something along the lines of:
body {
padding-top: 70px;
}
#media screen and (min-width:768px) and (max-width:990px) {
body {
margin-top:100px;
}
}
#media screen and (min-width:991px) and (max-width:1200px) {
body {
margin-top:70px;
}
}