A slideshow component for cycling through elements, like a carousel. Nested carousels are not supported.
Questions tagged [bootstrap-carousel]
272 questions
9
votes
1 answer
What is role="listbox" used when creating carousel?
Just a simple question
When I tried to create a carousel, I noticed many sample codes are:
In the above code, what does role="listbox" do?
Please give me an insight.

JustStartedStudying
- 93
- 1
- 1
- 4
8
votes
4 answers
bootstrap carousel hide controls on first and last
How can I hide the left control if the carousel is on the first item, and how can I hide the right control when the carousel is on the last item.
My code below hides the control successfully but on page load it is as if the carousel first item is in…

user667430
- 1,487
- 8
- 38
- 73
7
votes
1 answer
How to modify bootstrap carousel for mobile and tabs
I am using a bootstrap slider.
On desktop, it has three slides with 4 tiles each
On Tabs, they have to be 4 slides with 3 tiles each
On Mobile, there needs to be 12 different slides
I am thinking of the most effective and optimized way of…

Stacy J
- 2,721
- 15
- 58
- 92
6
votes
1 answer
Bootstrap carousel slide start without "active"
i like to use the Bootstrap carousel slider.
Is it possible to start the slider without the active class in the first Image? The code is set with TYPOSCRIPT and i can not set the first item to active. Is there a way with JavaScript?
Thanx for…

schani
- 61
- 1
- 1
- 2
5
votes
3 answers
How can I pause a Bootstrap Carousel on hover and resume it on mouse-out?
I have a Bootstrap Carousel on my website.
When the user hovers over an element #formcontainer, I'd like to pause the carousel. And when I hover off, I'd like to continue the cycle of the carousel. The first part works fine with the following code,…

michaelmcgurk
- 6,367
- 23
- 94
- 190
5
votes
1 answer
Why am I getting this behavior with my Bootstrap 3 carousel?
I am trying to achieve this effect with my own carousel which has a semi-transparent images on the right and left sides; but I am getting this bad effect with my own project when moving between slides : here.
Here is the HTML code that I wrote…

fawzi-k
- 51
- 2
4
votes
3 answers
Bootstrap carousel last item will hide right control
I am using bootstrap 4.0 version. I want to hide left control on the first item, and hide the right control on the last item.
I think using jQuery it can be solved.
Left control will hide all the time it only show on the last item. And right control…

Habib
- 43
- 1
- 5
4
votes
1 answer
Bootstrap Media Slider Carousel repeating items
I am using bootstrap media slider carousel. but, it is repeating items if items are less than 4. I want to slide one item per click.
see my code below
JQUERY
$(document).ready(function(){
$('#media').carousel({
pause:…

MaYaNk
- 392
- 1
- 7
- 16
4
votes
1 answer
Bootstrap 4 Alpha 6 Vertical Carousel
I'm trying to create a vertically oriented carousel in Bootstrap 4 Alpha 6. I still can't figure out for the life of me why the folks at Bootstrap don't include this orientation but I've come close to a solution of my own. I seem to be missing…

ben.kaminski
- 986
- 3
- 13
- 24
4
votes
2 answers
looping to display images one by one from db into bootstrap carousel
Trying to display carousel images from database in a foreach loop in codeigniter. The below code displays all the images at once. How can i display images inside a slider one by one? Also the next and previous buttons are not working?

shank
- 363
- 1
- 7
- 23
3
votes
1 answer
Integrate JQuery Image Magnification with Dynamic Bootstrap 5 Carousel
I have a Wordpress gallery site where images open up in a Bootstrap 5 Modal, which opens up a Bootstrap Carousel.
The images are loaded in a post loop with a php foreach loop, one per slide.
I am trying to add hover magnification to each image with…

SMae
- 41
- 4
3
votes
0 answers
Bootstrap carousel keyboard buttons only work after clicking arrow on screen
Does anyone know how to override the default bootstrap carousel functionality of keyboard left and right buttons working only after first clicking one of the arrows on the screen.
I have rows of cards which when clicked opens a modal and inside that…

BootDev
- 146
- 2
- 9
3
votes
1 answer
Append Data on bootstrap carousel with ajax
I want to ask how I can append ajax data on the bootstrap carousel. 2 post-show on the bootstrap carousel when the page load for the first time then if someone clicks the next arrow bootstrap carousel slide and shows the next 2 posts I'm getting 2…

Yasir Bilal
- 89
- 1
- 8
3
votes
1 answer
show only one image in carousel slider on mobile
I have carousel slider that have 4 images in a row , In desktop and tablet screen size its okay, but in mobile i don't wanna resize my images i want to show only one item in each slide.
bootstrap automatically resizes images and shows smaller items!…

Rmanx77
- 221
- 3
- 11
3
votes
1 answer
Transform animation not working for first slide in bootstrap carousel
I have a bootstrap 4.0 carousel and I want zooming effect when each slides active. I have used transform: scale property for achieving it. I have applied transform: scale to .carousel-item.active img element. And I have added active class for first…

hakkim
- 666
- 15
- 36