I'll preface this by saying I really don't have much experience in this, but I've looked through documentations and solutions that helped others and I've yet to fix my issue so I'll go ahead and make my own post.
<div id="randomCarousel" class="carousel slide" data-ride="carousel">
<!--Indicator Buttons-->
<ol class="carousel-indicators">
<li data-target="#randomCarousel" data-slide-to="0" class="active"></li>
<li data-target="#randomCarousel" data-slide-to="1"></li>
<li data-target="#randomCarousel" data-slide-to="2"></li>
</ol>
<!--Carousel w/Images-->
<div class="container">
<div class="carousel-inner">
<!--ALL PICS ARE PART OF CREATIVE COMMONS; ADDED SIMPLY FOR FUN-->
<div class="carousel-item active">
<img src="https://images.pexels.com/photos/459225/pexels-photo-459225.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260" class="d-block w-100" alt="First">
</div>
<div class="carousel-item">
<img src="https://images.pexels.com/photos/2283759/pexels-photo-2283759.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260" class="d-block w-100" alt="Second">
</div>
<div class="carousel-item">
<img src="https://images.pexels.com/photos/2283759/pexels-photo-2283759.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260" class="d-block w-100" alt="Third">
</div>
</div>
</div>
<!--Next and Previous buttons-->
<a class="carousel-control-prev" href="#randomCarousel" 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="#randomCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
I've gone ahead and added scripts and links found on the bootstrap website also but to no avail. Any additional feedback would also be greatly appreciated.
I'm not sure what is the issue with your code, But when i customize my code then it will worked. Please review my code and let me know further clarification.
Hope it will help
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<div id="carousel-indicators" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-indicators" data-slide-to="0" class="active"></li>
<li data-target="#carousel-indicators" data-slide-to="1"></li>
<li data-target="#carousel-indicators" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="container">
<div class="carousel-inner">
<div class="item active">
<img src="https://images.pexels.com/photos/459225/pexels-photo-459225.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260" class="d-block w-100" alt="First">
</div>
<div class="item">
<img src="https://images.pexels.com/photos/2283759/pexels-photo-2283759.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260" class="d-block w-100" alt="Second">
</div>
<div class="item">
<img src="https://images.pexels.com/photos/2283759/pexels-photo-2283759.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260" class="d-block w-100" alt="Third">
</div>
</div>
</div>
</div>
<!--Next and Previous buttons-->
<a class="carousel-control-prev" href="#randomCarousel" 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="#randomCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
Your code is working fine, may be you forgot to include bootstrap library files (CSS and JS) or may be forgot to include js library file. Not sure exactly what you are missing.
Here is the working example of your code.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div id="randomCarousel" class="carousel slide" data-ride="carousel">
<!--Indicator Buttons-->
<ol class="carousel-indicators">
<li data-target="#randomCarousel" data-slide-to="0" class="active"></li>
<li data-target="#randomCarousel" data-slide-to="1"></li>
<li data-target="#randomCarousel" data-slide-to="2"></li>
</ol>
<!--Carousel w/Images-->
<div class="container">
<div class="carousel-inner">
<!--ALL PICS ARE PART OF CREATIVE COMMONS; ADDED SIMPLY FOR FUN-->
<div class="carousel-item active">
<img src="https://images.pexels.com/photos/459225/pexels-photo-459225.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260" class="d-block w-100" alt="First">
</div>
<div class="carousel-item">
<img src="https://images.pexels.com/photos/2283759/pexels-photo-2283759.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260" class="d-block w-100" alt="Second">
</div>
<div class="carousel-item">
<img src="https://images.pexels.com/photos/2283759/pexels-photo-2283759.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260" class="d-block w-100" alt="Third">
</div>
</div>
</div>
<!--Next and Previous buttons-->
<a class="carousel-control-prev" href="#randomCarousel" 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="#randomCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
https://codepen.io/pgurav/pen/KKKxBwM
Related
The blue section of the following image shows the triggering area of the bootstrap carousel. I took the screenshot from the bootstrap doc.
I would like to modify the height of the triggering region (e.g. From 100% of the carousel height to 50%). May I know how can I modify it?
Thanks in advance
To solve this, just modify the properties of .carousel-control-prev and .carousel-control-prev in the CSS.
.carousel-control-prev,
.carousel-control-next {
height: 25%;
top: 37.5%;
};
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
<body>
<div class="container">
<div class="row">
<div class="col">
<div id="carouselExampleIndicators" class="carousel slide my-4" 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>
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img class="d-block img-fluid" src="http://placehold.it/900x350" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="http://placehold.it/900x350" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="http://placehold.it/900x350" alt="Third slide">
</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>
</div>
</div>
</div>
</body>
I have no idea why the top property could not override in the demo. But it works in my project.
I'm trying to use the bootstrap carousel, however is doesn't want to slide.
My current code is:
<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>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="../../../../assets/foto-1.jpg" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="../../../../assets/foto-2.jpg" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="../../../../assets/foto-2.jpg" alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
</a>
</div>
in my index.html i have:
<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">
Could anyone help me out?
I forgot to import JS. Thanks Boss COTIGA:
JavaScript is missing getbootstrap.com/docs/4.1/getting-started/introduction
I'm using Bootstraps JS CDN.
The code below is directly copied from there docs.
http://v4-alpha.getbootstrap.com
But I get this error and the slides don't change.
Uncaught TypeError: Cannot read property 'offsetWidth' of undefined(…)
<div class="col-lg-8 offset-lg-2">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<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>
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img src="http://lorempixel.com/1200/600" alt="First slide">
</div>
<div class="carousel-item">
<img src="http://lorempixel.com/1200/600" alt="Second slide">
</div>
<div class="carousel-item">
<img src="http://lorempixel.com/1200/600" alt="Third slide">
</div>
</div>
<a class="left carousel-control" href="#carousel-example-generic" 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="#carousel-example-generic" role="button" data-slide="next">
<span class="icon-next" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
Thanks for this helped me figure out why. Basically I was been and idiot and not using the correct CDN.
I have a twitter Bootstrap carousel that I am trying to use within wordpress and it is stacking all the pictures on top of each other and doesn't rotate.
You can view it and see what I mean here.
My code looks like this:
<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://i0.wp.com/www.cattywampur.com/wp-content/uploads/2016/03/8566819595_0f567e8594_k.jpg" >
<div class="carousel-caption">
<h3>Traversing the Grand Canyon</h3>
</div>
</div>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="http://i2.wp.com/www.cattywampur.com/wp-content/uploads/2016/05/26300985983_713ab03dc1_k.jpg" >
<div class="carousel-caption">
<h3>San Jacinto - Deer Springs Trail</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" 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>
You only need one carousel-inner.
And one item set to active.
That way they don't stack and have the same wrapper.
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="http://i0.wp.com/www.cattywampur.com/wp-content/uploads/2016/03/8566819595_0f567e8594_k.jpg">
<div class="carousel-caption">
<h3>Traversing the Grand Canyon</h3>
</div>
</div>
<div class="item">
<img src="http://i2.wp.com/www.cattywampur.com/wp-content/uploads/2016/05/26300985983_713ab03dc1_k.jpg">
<div class="carousel-caption">
<h3>San Jacinto - Deer Springs Trail</h3>
</div>
</div>
</div>
Is there a possibility to stop the autoslide when im on my mobile view.
If it´s possible with css... maybe with mediaquery xs and than manipulate a carousel element ...?
<div id="carousel" class="carousel slide" data-ride="carousel">
<!-- LOGO -->
<div class="container">
<div class="row logo">
<div class="col-lg-12 col-sm-8 col-xs-12"><img class="img-responsive" src="img/logo.png" alt=""/></div>
</div>
</div>
<!-- POINTS -->
<ol class="carousel-indicators hidden-xs">
<li data-target="#carousel" data-slide-to="0" class="active"></li>
<li data-target="#carousel" data-slide-to="1"></li>
<li data-target="#carousel" data-slide-to="2"></li>
<li data-target="#carousel" data-slide-to="3"></li>
</ol>
<!-- SLIDEWRAPPER -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="img/headbild-1.jpg" alt="headbild1">
</div>
<div class="item">
<img src="img/headbild-2.jpg" alt="headbild2">
</div>
<div class="item">
<img src="img/headbild-1.jpg" alt="headbild3">
</div>
<div class="item">
<img src="img/headbild-2.jpg" alt="headbild4">
</div>
</div>
<!-- PREV/NEXT Controls -->
<div class="container hidden-xs">
<a class="left carousel-control" href="#carousel" role="button" data-slide="prev">
<span class="previcon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control pull-right" href="#carousel" role="button" data-slide="next">
<span class="nexticon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
well to stop autoslide on a mobile device you would need to adjust your javascript / the init from the carousel in a different media query.
do you have a possibility to check your media screen size in js? if yes, simply destroy your carousel (sth like $('#carousel').destroy();) and reinit without the autoslide.