I'm having this weird problem where the controls won't show up for my bootstrap 4 beta carousel unless I place the controls links inside the carousel-inner div.
jquery & the bootstrap files are working because nothing else on the website is wrong (and I've used lots of jquery on it). The indicators also work fine without being inside "carousel inner".
I've copied and pasted this code directly from bootstrap's site, as well as trying to copy and paste from other examples. The controls are only appearing for me if I move them before the closing div for carousel-inner. All my divs are closed properly (I'm using brackets so it tells me if any aren't closed). The rest of my code is also basically copied and pasted from the bootstrap 4 page/examples. All I did was add more slides but this issue was occurring before that as well.
Only piece of custom css, which if I comment this out doesn't fix the controls problem. (it moves captions underneath slide instead of layered on top of slide, and moves indicators so they're above slides instead of layered on top.):
.carousel-caption {
position: relative;
left: auto;
right: auto;
}
.carousel-indicators {
position: relative;
margin: 0 auto;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />
<div id="myCarousel" class="carousel slide bg-inverse hidden-mobile" data-ride="carousel">
<ol class="carousel-indicators" style="padding-bottom:2%;padding-top:2%;">
<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>
<li data-target="#myCarousel" data-slide-to="4"></li>
<li data-target="#myCarousel" data-slide-to="5"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img class="d-block img-fluid ml-auto mr-auto" src="backgroundimages/step1.gif" alt="First slide">
<div class="carousel-caption" style="padding-top:3%;">
<h3>Title</h3>
<p>text text text</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block img-fluid ml-auto mr-auto" src="backgroundimages/step2.gif" alt="Second slide">
<div class="carousel-caption" style="padding-top:3%;">
<h3>Title</h3>
<p>text text text</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block img-fluid ml-auto mr-auto" src="backgroundimages/step3.gif" alt="Third slide">
<div class="carousel-caption" style="padding-top:3%;">
<h3>Title</h3>
<p>text text text</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block img-fluid ml-auto mr-auto" src="backgroundimages/step4.gif" alt="Fourth slide" width="55%" height="auto">
<div class="carousel-caption" style="padding-top:3%;">
<h3>Title</h3>
<p>text text text</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block img-fluid ml-auto mr-auto" src="backgroundimages/step5.gif" alt="Fifth slide">
<div class="carousel-caption" style="padding-top:3%;">
<h3>Title</h3>
<p>text text text</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block img-fluid ml-auto mr-auto" src="backgroundimages/step6.gif" alt="Sixth slide">
<div class="carousel-caption" style="padding-top:3%;">
<h3>Title</h3>
<p>text text text</p>
</div>
</div>
<a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev" onclick="$('#myCarousel').carousel('prev')">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next" onclick="$('#myCarousel').carousel('next')">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
Related
I'm having some issues with bootstrap's carousel, I have some images with different resolutions and ratios, and when I use the carousel-fade effect and two images with different ratios are next to each other the animation comes out janky.
I was wondering if there was a way to alleviate or solve this problem entirely
<div id="demo" class="carousel slide carousel-fade" data-ride="carousel" style="width: 800px;">
<ul class="carousel-indicators" id="car_ind">
<li data-target="#demo" data-slide-to="0" class="active"></li>
<li data-target="#demo" data-slide-to="1"></li>
<li data-target="#demo" data-slide-to="2"></li>
</ul>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://images.corsidia.com/ckeditor/pictures/data/000/000/086/content/immagini-e-tabelle-html-00.jpg" alt="Los Angeles" />
</div>
<div class="carousel-item">
<img src="https://www.urbannaturale.com/wp-content/uploads/2019/06/face-800-x-533px-photo-1498842812179-c81beecf902c.jpg" alt="Chicago" />
</div>
<div class="carousel-item">
<img src="https://script.meteolive.it/admin/immaginiNotizie/SRC/__130766___taal1.jpg" alt="New York" />
</div>
</div>
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"> </span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"> </span>
</a>
demo:
https://jsfiddle.net/02fxt9de/2/
The main issue here is your image resolution
if they are different it is obvious that the slide transition would appear janky . This can be solved by
setting resolution of image as equal
just replace this section in your code and try out
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://images.corsidia.com/ckeditor/pictures/data/000/000/086/content/immagini-e-tabelle-html-00.jpg" class="carousel-img-size" alt="Los Angeles" />
</div>
<div class="carousel-item">
<img src="https://www.urbannaturale.com/wp-content/uploads/2019/06/face-800-x-533px-photo-1498842812179-c81beecf902c.jpg" class="carousel-img-size" alt="Chicago" />
</div>
<div class="carousel-item">
<img src="https://script.meteolive.it/admin/immaginiNotizie/SRC/__130766___taal1.jpg" class="carousel-img-size"alt="New York" />
</div>
</div>
CSS code
.carousel-img-size {height:200px ; width:400px;}
change width and height as per your requirement. :)
I have a problem on my carousel using controls and indicators, which does not make my photos slide through other pictures, the only picture I see is the one you marked as active.
<div class="col-6 text-center m-auto ">
<div id="example" class="carousel slide" data-ride="carousel">
<ul class="carousel-indicators">
<li data-target="#example" data-slide-to='0' class="active"></li>
<li data-target="#example" data-slide-to='1'> </li>
<li data-target="#example" data-slide-to='2'> </li>
<li data-target="#example" data-slide-to='3'> </li>
</ul>
<div class="carousel-inner">
<div class="carousel-item active"> <img src="/setup/img/portfolio.jpg" alt="port" class="d-block w-100 height-100"></div>
<div class="carousel-item"> <img src="/setup/img/mypic.jpg" alt="ports" class="d-block w-50"></div>
<div class="carousel-item"> <img src="/setup/img/code.jpg" alt="port1" class="d-block w-50"></div>
<div class="carousel-item"> <img src="/setup/img/about.jpg" alt="port2" class="d-block w-50"></div>
</div>
<!-- controls-->
<a href="#example" class="carousel-control-prev" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a href="#example" class="carousel-control-next" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</div>
I expect to be able to use my controls or even even just the indicators.
Your code looks like using bootstrap.
Please double check that you have links for jQuery and Bootstrap.js in your code.
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
Trying to add a bootstrap carousel to my site to display images, the first images show, however the buttons do not work to change the image
I've tried adding some javascript, however nothing seems to work.]
Overall I feel it is just a stupid mistake somewhere but I honestly am not sure, and do not know what else to do
<div class="row">
<div class="col-sm-4">
<div class="midcol">
<h2>Some of our current stock</h2>
<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>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img class="first-slide" src="#routes.Assets.versioned("images/1.jpeg")" alt="First slide">
<div class="container">
<div class="carousel-caption">
<p>Volkswagen Polo 2012</p>
</div>
</div>
</div>
<div class="item">
<img class="second-slide" src="#routes.Assets.versioned("images/2.jpeg")" alt="Second slide">
<div class="container">
<div class="carousel-caption">
<p>Opel Corsa 2010</p>
</div>
</div>
</div>
<div class="item">
<img class="third-slide" src="#routes.Assets.versioned("images/3.jpeg")" alt="Third slide">
<div class="container">
<div class="carousel-caption">
<p>Renautl Clio 2014</p>
</div>
</div>
</div>
</div>
<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><!-- /.carousel -->
</div>
</div>
I think you should use item like this
<div class="carousel-item active">
<img class="d-block w-100" src="#routes.Assets.versioned("images/1.jpeg")" alt="First slide">
<div class="carousel-caption d-md-block">
<p>Volkswagen Polo 2012</p>
</div>
</div>
and also you should use jquery code
$('.carousel').carousel({
interval: 6000,
pause: "false"
});
when you are using bootstrap carousel you need to use carousel-item
instade of using item class
just use carousel- before your item hope it will solve your problem
I am currently trying to create side bar next to my carousel, However for some reason, I can't get the carousel to center on the page while the aside is next to it. I tried using margin:auto auto but had no luck. I also tried using Justify-content:center. Anyone know why it won't move?
html:
<section id="carouselSlides" class="carousel slide container" data-ride="carousel" style="background:#979BAF; ">
<!--Indicators-->
<ol class="carousel-indicators">
<li data-target="#carouselSlides" data-slide-to="0" class="active"></li>
<li data-target="#carouselSlides" data-slide-to="1"></li>
</ol>
<!--The slideshow-->
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img class="d-block img-fluid" src="slideshow/sunglasses.jpg" alt="sunglasses">
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="slideshow/lady.jpeg" alt="women">
</div>
<!--<div class="carousel-item">
<img src="" alt>
</div>-->
<!--Left and right controls-->
<a class="carousel-control-prev" href="#carouselSlides" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#carouselSlides" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</section>
<aside class="rightSideSection container clearfix">
<header style="background: #2A2A36;"><h1 class="bold">Whats popular</h1></header><br>
<ul class="popularList">
<li>example1</li>
<li>example2</li>
<li>example3</li>
</ul>
</aside>
CSS:
#carouselSlides{
display: inline-block;
width: 700px;
justify-content: center;
}
.carousel-inner img{
}
/*right side bar*/
.rightSideSection{
background: #ffffff;
width: 280px;
float: right;
margin-top: 40px;
}
.rightSideSection h1{
font-size: 30px;
}
.popularList li{
margin-left: 20px;
}
maybe this can work for you, to align the carousel to center:
<div style="text-align: center; text-align: -webkit-center;">
<section id="carouselSlides" class="carousel slide container" data-ride="carousel" style="background:#979BAF; ">
<!--Indicators-->
<ol class="carousel-indicators">
<li data-target="#carouselSlides" data-slide-to="0" class="active"></li>
<li data-target="#carouselSlides" data-slide-to="1"></li>
</ol>
<!--The slideshow-->
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img class="d-block img-fluid" src="slideshow/sunglasses.jpg" alt="sunglasses">
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="slideshow/lady.jpeg" alt="women">
</div>
<!--<div class="carousel-item">
<img src="" alt>
</div>-->
<!--Left and right controls-->
<a class="carousel-control-prev" href="#carouselSlides" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#carouselSlides" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</section>
<div>
Here basically the "carouselSlides" is contained in a div
providing the div styles as:
div{
text-align: center;
text-align: -webkit-center;
}
So there's like a tearing or flickering effect when the carousel slides left, as if the image disappears somewhere too far left, and a white space appears instead of it. I tried to add overflow: hidden or width: 100% but that didn't really work either.
The thing is, it works very well on Chrome; the effect only happens on Safari.
Here is my component scss and html files:
/* Make the carousel take the full screen height */
.fullscreen {
height: 100vh;
.carousel-inner {
.carousel-item {
height: 100vh;
}
}
}
<div id="landingCarousel" class="carousel slide fullscreen" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#landingCarousel" data-slide-to="0" class="active"></li>
<li data-target="#landingCarousel" data-slide-to="1"></li>
<li data-target="#landingCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img class="d-block img-fluid" src="../assets/images/s1.jpg">
<div class="carousel-caption">
<h1 class="text-uppercase">Slide1</h1>
<p>Slide 1 text</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="../assets/images/s2.jpg">
<div class="carousel-caption">
<h1 class="text-uppercase">Slide 2</h1>
<p>Slide 2 text</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="../assets/images/s3.jpg">
<div class="carousel-caption">
<h1 class="text-uppercase">Slide 3</h1>
<p>Slide 3 text</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#landingCarousel" 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="#landingCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>