I am using Bootstrap carousel and facing an unexpected results. Actually when I click on next or previous next image is not showing And Strange things is that my URL is also change to http:MySITE/Carousel3.
<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="Carousel3" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="item active"><img src="Carousel1-Side.jpg" /></div>
<div class="item"><img src="Carousel2-Front.jpg" /></div>
<div class="item"><img src="Carousel3-Up.jpg" /></div>
<a class="left carousel-control" href="#Carousel3" data-slide="prev">
<span class="glyphicon glyphicon glyphicon-triangle-left"> </span> <span class="sr-only">Previous</span> </a>
<a class="right carousel-control" href="#Carousel3" data-slide="next">
<span class="glyphicon glyphicon glyphicon-triangle-right"></span> <span class="sr-only">Next</span> </a>
</div>
</div>
Related
Now I have this carousel I made with Bootstrap code:
<div id="carouselExample" class="carousel slide d-none d-sm-none d-md-block" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<div class="row logo justify-content-center">
<div class="col">
<img class="image-logo" src="img/..." alt=""/>
</div>
<div class="col">
<img class="image-logo" src="img/..." alt=""/>
</div>
</div>
</div>
<div class="carousel-item">
<div class="row logo justify-content-center">
<div class="col">
<img class="image-logo" src="img/..." alt=""/>
</div>
<div class="col">
<img class="image-logo" src="img/..." alt=""/>
</div>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExample" 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="#carouselExample" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
When I press next and prev butttons, the page moves itself to the top of the browser. How can I disable this?
Thanks!
I have the same problem on my site.
Fix:
href="#carouselExample" change to href="/#carouselExample"
try to remove
href="#carouselExample"
I'm trying to set up a little carousel to display some projects I've worked on. The images display but for some reason the slides don't move the carousel when I click them. Anyone know why?
I've tried messing around with a few different things, but it hasn't fixed it.
Thanks!
<div class="container" style="margin: 50px auto;">
<div>
<h4 style="margin: 1em 1em 1em 1em;">Projects</h4>
<h6>Take a quick look at some of the projects I've worked on.</h6>
<div>
<div id="myCarousel" class="carousel slide" data-ride="carousel" style="margin: 50px auto;height:350px;width:600px;">
<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">
<div class="item active">
<img src="img/bg.jpg" alt="Project #1" class="carousel-item">
<div class="carousel-caption">
<h3>Example #1</h3>
<p>Description #1</p>
</div>
</div>
<div class="item">
<img src="img/bg.jpg" alt="Project #2" class="carousel-item">
<div class="carousel-caption">
<h3>Example #2</h3>
<p>Description #2!</p>
</div>
</div>
<div class="item">
<img src="img/bg.jpg" alt="Project #3" class="carousel-item">
<div class="carousel-caption">
<h3>Example #3</h3>
<p>Description #3</p>
</div>
</div>
</div>
<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>
<div>
</div>
Try adding this instead of yours :
<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>
Make sure that the href to the js and css files of the carousel is right.
and add this at 1st in the <head> section:
<script>
// Load this when the DOM is ready
$(function () {
// You used .myCarousel here.
// That's the class selector not the id selector,
// which is #myCarousel
$('#myCarousel').carousel();
});
</script>
Hope this is helpful :)
I am developing a website for a Real Estate company and I am having problems with Bootstrap's Carousel controls.
My goal is to have a row with three different columns and a Carousel in each column. I get this to work, the problem is that when I get the 3 carousels in their corresponding columns, the controls of the Carousel no.2 and the Carousel no.3 activate the Carousel no.1 and not the Carousel where they belong.
Here is my code:
<div class="row">
<div class="col-md-4">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="http://lorempixel.com/400/400/" alt="...">
</div>
<div class="item">
<img src="https://dummyimage.com/400x400/000/fff" 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>
<!--FIRST COLUMN FINISHES HERE-->
<!--SECOND COLUMN STARTS HERE-->
<div class="col-md-4">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="http://lorempixel.com/400/400/" alt="...">
</div>
<div class="item">
<img src="https://dummyimage.com/400x400/000/fff" 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>
<!--SECOND COLUMN FINISHES HERE-->
<!--THIRD COLUMN STARTS HERE-->
<div class="col-md-4">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="http://lorempixel.com/400/400/" alt="...">
</div>
<div class="item">
<img src="https://dummyimage.com/400x400/000/fff" 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>
Do you guys know why this is happening? What do I have to do to make the controls activate their own carousel and not Carousel number 1?
I hope I was clear and somewhat easy to understand. Thank you in advance for your help.
Because you have used the same IDs for all the three carousels. And by default only the first ID element on the DOM would be selected (First Slider in your case).
Try updating your code like this -
<a class="left carousel-control" href="#carousel-one" 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-one" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
Similarly, please update the ID from carousel-example-generic to carousel-one carousel-two and carousel-three respectively for your three carousels. And also update the href as I did in the code above.
Please let me know if the problem still persist.
All your carousels have same id. Put them unique id and also change in controls with new id's. th
I created a Bootstrap Carousel in my home page, after some text information. I do not want a big Carousel in my page, so I decreased the size using <div class="col-sm-6">.
But my Carousel is positioned on the left side of the page and I was not able to center it. I would like to have it in the center of my page.
The code that I used was:
<div class="container">
<h4 class="text-justify">text here </h4>
</div>
<div class="container">
<div class="col-sm-6">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active"><img src="https://upload.wikimedia.org/xx.JPG" alt=""></div>
<div class="item"><img src="https://upload.wikimedia.org/wikipedia/xxxx.JPG" alt=""></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></div></div>
My CSS code was
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
width: 100%;
margin: auto;
}
How can I change the position?
First you have to place your col-sm-6 inside a row, then you can simply add a class "col-centered" and add the following CSS
.col-centered{
float: none;
margin: 0 auto;
}
Your final code will be like this:
<div class="container">
<h4 class="text-justify">text here </h4>
</div>
<div class="container">
<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"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active"><img src="https://upload.wikimedia.org/xx.JPG" alt=""></div>
<div class="item"><img src="https://upload.wikimedia.org/wikipedia/xxxx.JPG" alt=""></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>
</div>
</div>
</div>
Apply this style. This below code will work.
<div class="col-sm-6" style="
margin: 0 auto;
float: none;">
im added a carousel to my website using boostrap framework, at first i inserted my carousel than added a container to give a paddings at the right and left, than i inserted after the carousel inner the carousel controllers, but for some reason the controllers is not getting the effect of the container.
Html:
<div class="container">
<div class="carousel-inner">
<div class="item active"><img src="images/carousel-lifestyle.jpg" alt="Lifestyle Photo"></div>
<div class="item"><img src="images/carousel-mission.jpg" alt="Mission"></div>
<div class="item"><img src="images/carousel-vaccinations.jpg" alt="Vaccinations"></div>
<div class="item"><img src="images/carousel-fish.jpg" alt="Fish"></div>
<div class="item"><img src="images/carousel-exoticanimals.jpg" alt="Exotic Animals"></div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#featured" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#featured" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
Put the controls inside carousel-inner see fiddle https://jsfiddle.net/sbgxwv8s/1/
<div class="container">
<div class="carousel-inner">
<div class="item active"><img src="http://lorempixel.com/g/1200/1200/" alt="Lifestyle Photo"></div>
<div class="item"><img src="images/carousel-mission.jpg" alt="Mission"></div>
<div class="item"><img src="images/carousel-vaccinations.jpg" alt="Vaccinations"></div>
<div class="item"><img src="images/carousel-fish.jpg" alt="Fish"></div>
<div class="item"><img src="images/carousel-exoticanimals.jpg" alt="Exotic Animals"></div>
<!-- Controls -->
<a class="left carousel-control" href="#featured" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#featured" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>