You can push them below the slider like this… .carousel-indicators { bottom:-50px; } Leave space below the carousel so that the pushed indicators don’t interfere with content below the slider.. .carousel-inner { margin-bottom:50px; } Demo
.carousel-control.left, .carousel-control.right { background-image: none }
it’s because the arrow are white by default, so on the white page you can not see it. be sure that the arrows are enabled: $(‘.single-item’).slick({ arrows: true }); add the css code to see: <style> .slick-prev:before, .slick-next:before { color:red !important; } </style>
By adding data-interval=”false” <div id=”carousel-example-generic” class=”carousel slide” data-interval=”false” data-ride=”carousel” data-pause=”hover” > From the documentation Option – Interval – ..If false, carousel will not automatically cycle. 2021 Update In Bootstrap 5 it is data-bs-interval=”false” <div id=”carousel-example-generic” class=”carousel slide” data-bs-interval=”false” data-ride=”carousel” data-pause=”hover”> Documentation
Update Bootstrap 4 Bootstrap 4 has utility classes that make it easier to create a full screen carousel. For example, use the min-vh-100 class on the carousel-item content… <div class=”carousel slide” data-ride=”carousel”> <div class=”carousel-inner bg-info” role=”listbox”> <div class=”carousel-item active”> <div class=”d-flex align-items-center justify-content-center min-vh-100″> <h1 class=”display-1″>ONE</h1> </div> </div> </div> </div> Full screen carousel demo This … Read more
You need to enable navigation and edit navigationText: > Assuming this is version 1.3.2 owlgraphic.com/owlcarousel/#customizing Note: It appears the site for Owl 1.3 is now down, so here is a forked Codepen example. $(“#owl-example”).owlCarousel({ navigation: true, navigationText: [“<img src=”https://stackoverflow.com/questions/31224192/myprevimage.png”>”,”<img src=”mynextimage.png”>”] }); > Assuming it’s version 2: https://owlcarousel2.github.io/OwlCarousel2/docs/api-options.html#nav $(“#owl-example”).owlCarousel({ nav: true, navText: [“<img src=”https://stackoverflow.com/questions/31224192/myprevimage.png”>”,”<img src=”mynextimage.png”>”] }); … Read more
Yes. Bootstrap uses CSS transitions so it can be done easily without any Javascript. The CSS: .carousel .item {-webkit-transition: opacity 3s; -moz-transition: opacity 3s; -ms-transition: opacity 3s; -o-transition: opacity 3s; transition: opacity 3s;} .carousel .active.left {left:0;opacity:0;z-index:2;} .carousel .next {left:0;opacity:1;z-index:1;} I noticed however that the transition end event was firing prematurely with the default interval of … Read more
It looks like bootstrap less/CSS forces an automatic height to avoid stretching the image when the width has to change to be responsive. I switched it around to make the width auto and fix the height. <div class=”item peopleCarouselImg”> <img src=”http://upload.wikimedia.org/…”> … </div> I then define img with a class peopleCarouselImg like this: .peopleCarouselImg img … Read more
I’m a bit late to the party, but here’s a bit of jQuery I’ve been using: $(‘.carousel’).on(‘touchstart’, function(event){ const xClick = event.originalEvent.touches[0].pageX; $(this).one(‘touchmove’, function(event){ const xMove = event.originalEvent.touches[0].pageX; const sensitivityInPx = 5; if( Math.floor(xClick – xMove) > sensitivityInPx ){ $(this).carousel(‘next’); } else if( Math.floor(xClick – xMove) < -sensitivityInPx ){ $(this).carousel(‘prev’); } }); $(this).on(‘touchend’, function(){ $(this).off(‘touchmove’); … Read more
The solution is to put this CSS code into your custom CSS file: .carousel-inner > .item > img { margin: 0 auto; }