Questions tagged [carousel]

A rotating display of content can house a variety of content that usually includes "next" and "previous" buttons to rotate through the content.

A rotating display of content can house a variety of content that usually includes "next" and "previous" buttons to rotate through the content.

A simple example of a carousel that displays images:
A Simple Example

Image Source: http://sorgalla.com/projects/jcarousel/

6217 questions
1
vote
2 answers

Give an item the class of anothers item's children with jQuery or JS ( owl-carousel)

This is my problem. I'm using the owl.carrousel MIT libraries in my page. This libraries automatly creates a div to give it the class "active" when it has to be shown. I want to set a different background in the carrousel section when any different…
manuelmsni
  • 23
  • 7
1
vote
0 answers

Infinite loop swiper with custom pagination

I'm trying to make an infinite loop slider with custom pagination. It's working when the slide is not that long. When the slide is longer than the viewport when you click on "Go to 2" for example the swiper move the first slide to the left of the…
SensationBox
  • 11
  • 1
  • 3
1
vote
1 answer

How can I dsplay a carousel on index page only and have it fit the whole screen? - asp.net core mvc bootstrap

I am new to ASP.NET Core and Bootstrap. I am trying to display a carousel on the index page only and have it fit the whole screen. I tried adding the carousel to the _Layout.cshtml file and it fit the screen how I wanted it to, but it was visible on…
1
vote
1 answer

CarouselView ScrollTo workaround on bug

I am using a CarouselView and a Timer to have it make the changing effect every X seconds. Now as I am finding out there are a few bugs. ScrollTo doesn't really scroll the CarouselView to the position asked. Setting the Position property doesn't…
Alejandro
  • 308
  • 2
  • 11
1
vote
0 answers

Bootstrap 4 Carousel - Bring carousel Caption on top of the overlay - Z-Index Issue

Basically, I am using Bootstrap 4 Carousel and I am using a
with position:absolute; to put the gradient effect on top of it but I want the text to be visible on top. When the slide changes you will see the Text is grey for some seconds and…
IUK
  • 66
  • 1
  • 9
1
vote
1 answer

Bootstrap Carousel how to vertical align images with img-fluid class applied

I am trying to center the images both horizontally and vertically using the img-fluid class in the bootstrap carousel, I need the images to be fully visible(100%) and adaptable to different screens, for this i am using the img-fluid class, the only…
MattC
  • 447
  • 6
  • 21
1
vote
2 answers

How to change TextView with the change of the ImageView in a Carousel in Android

I am working on a project in which I have created a Carousel using this library. I also want to show the Image Description in a TextView which should change as the image changes. I am unable to change the TextView as the image changes. What should I…
Shrish Sharma
  • 90
  • 1
  • 1
  • 9
1
vote
1 answer

React JS Infinite Carousel

I'm building a portfolio app in React JS and one of my pages is an About Me page. I stumbled upon a youtube video that builds an infinite carousel using vanilla JavaScript, and during my initial testing it worked. However, when I navigate away from…
Kevin G
  • 168
  • 2
  • 15
1
vote
2 answers

What could be the bare minimum steps to animate the following carousel implementation?

I am making a vanilla js carousel. I have laid out basic previous and next functionality using js along with html and css. Now I tried to use css-animations (keyframes) to do left and right slide-in/slide-out animations but the code became messy for…
Lakshya Thakur
  • 8,030
  • 1
  • 12
  • 39
1
vote
1 answer

Carousel doesn't work in latest Bootstrap's versions

I've been trying to make a simple carousel but for some reason can't get it working. I tried using only sample code provided by Bootstrap's docs, and even so it doesn't work as intended. (Slides won't pass and next/previous buttons don't work) Using…
Sagyo
  • 23
  • 3
1
vote
1 answer

Display number of slides as owl carousel's pagination?

I'm creating a slider using the Owl Carousel. I'd like to display something like "1 of number of slides" and increment the number on each slide. I've tried a couple of methods using jQuery but they haven't worked. HTML:
hamscript
  • 73
  • 1
  • 9
1
vote
1 answer

Use Glider in Svelte with no dev dependency

I'm trying to use Glider.js with Svelte component. Unfortunately I'm not allowed to change body or head tag to import it's dependencies as it is pointed out in docs. What I've tried to do was importing the glider.min.css and glider.min.js to the…
KellyCMI
  • 177
  • 2
  • 12
1
vote
1 answer

Extra empty item in Owl Carousel

I know this has been asked before, but none of the answers there were marked as the correct one, neither did anyone of them work for me. I have an Owl Carousel that has an empty space before the first slide (or after the last one...). I tried…
1
vote
1 answer

Placing a jumbotron over a carousel in Bootstrap

I'm attempting to simply place a jumbotron on top of a carousel in Bootstrap 5. I figured out a work around, but for some reason my Jumbotron does not overlay the carousel. The goal here is to have a static message with two active buttons lay on top…
Conley Rasor
  • 51
  • 1
  • 6
1
vote
0 answers

Slick Carousel not displaying properly

I am trying to show product recommendations in a slick carousel. But the products are just showing in a list and not displaying in a carousel. The carousel displays correctly on the cart page, but not on the product page. The only difference between…