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
138
votes
16 answers

Bootstrap carousel multiple frames at once

This is the effect I'm trying to achieve with Bootstrap 3 carousel Instead of just showing one frame at a time, it displays N frames slide by side. Then when you slide (or when it auto slides), it shifts the group of slides like it does. Can this…
121
votes
11 answers

Preventing twitter bootstrap carousel from auto sliding on page load

So is there anyway to prevent twitter bootstrap carousel from auto sliding on the page load unless the next or previous button is clicked? Thanks
Tepken Vannkorn
  • 9,648
  • 14
  • 61
  • 86
112
votes
17 answers

Change arrow colors in Bootstraps carousel

I'm obviously missing something stupidly simple here. I have images with a white background so I want to be able to edit the arrows on the Bootstraps Carousel so they are visible. So many changing the color of the arrows (NOT the background like…
Paul Young
  • 1,131
  • 2
  • 8
  • 4
97
votes
13 answers

Bootstrap Carousel image doesn't align properly

Please take a look at the following image, we are using bootstrap carousel to rotate the images. However, when the window width is large, the image doesn't align with the border properly. But the carousel example provided by bootstrap always works…
Nambi
  • 2,688
  • 8
  • 28
  • 37
75
votes
10 answers

How to make Bootstrap carousel slider use mobile left/right swipe

DEMO JSSFIDDLE
69
votes
14 answers

Twitter Bootstrap carousel different height images cause bouncing arrows

I've been using Bootstrap's carousel class and it has been straightforward so far, however one problem I've had is that images of different heights cause the arrows to bounce up and down to adjust to the new height.. This is the code I'm using for…
steve-gregory
  • 7,396
  • 8
  • 39
  • 47
68
votes
6 answers

Can the Twitter Bootstrap Carousel plugin fade in and out on slide transition

I have a very basic implementation of the Twitter Bootstrap Carousel plugin on a site that I am working on (http://furnitureroadshow.com/). I was just wondering if anyone had extended the Carousel plugin so that it fades in and fades out on slide…
generalopinion
  • 1,437
  • 2
  • 13
  • 21
60
votes
9 answers

Owl Carousel, making custom navigation

So i have an Owl Carousel that contains three images. I also added custom navigation arrows (.png images) on left and right sides. However, those arrows are currently useless, because I can't find a way to actually make them switch between images of…
bltzrrr
  • 789
  • 1
  • 8
  • 14
59
votes
5 answers

Bootstrap Carousel Full Screen

I am trying to get the image in the bootstrap carousel to show full screen but haven't been able to figure it out, I've been working on this for awhile and am totally stuck. Right now I have just one image, but I will add more once it…
Tyler B. Wear
  • 717
  • 1
  • 9
  • 13
57
votes
9 answers

How to stop Bootstrap carousel from autosliding?

I have built a bootstrap video carousel. It is working just fine but, the only problem I have is the carousel keeps sliding to the next slide after 5 seconds. How do I make it stop autosliding and only slide when the user clicks on the left or right…
user3123222
  • 1,185
  • 2
  • 10
  • 13
49
votes
10 answers

Slick Carousel arrows do not appear and work as they ought to

I am using http://kenwheeler.github.io/slick/ but can't seem to get it working as it ought to. Upon running the code below, I can see that the CSS and js files are loaded but not reflected. e.g there are no arrows. Is there something i might be…
BusyBee
  • 493
  • 1
  • 4
  • 5
46
votes
6 answers

How do you remove the default Bootstrap 3 carousel control background gradients?

I'm pretty sure this is the code I need to modify, but for some reason I can't get the gradients to disappear in IE. I want them completely gone! .carousel-control { text-shadow: none; opacity: 1; filter: alpha(opacity=100) } .carousel-control.left…
VSHoward
  • 567
  • 1
  • 4
  • 5
42
votes
6 answers

Bootstrap 3 default Carousel: How to move indicators down and outside of slide container?

What's an easy (and clean) way to move Bootstrap 3's carousel indicators down and outside of the slide container so it's not overlayed on the photos? See image below on where I want to move the indicators. Link to live code
redshift
  • 4,815
  • 13
  • 75
  • 138
37
votes
8 answers

How to Get total and Current Slide Number of Carousel

Can you please let me know how I can get the total and current number of the carousel slides in bootstrap like the image below? I have an standard Bootstrap carousel and a
with the .num class to display the total and current number and I used…
Mona Coder
  • 6,212
  • 18
  • 66
  • 128
35
votes
5 answers

How to create scrollable page of carousels in Android?

I am attempting to build a UI for my Android app which contains a vertically scrollable page of horizontally scrollable carousels (something like what the Netflix app does). How is this type of behaviour accomplished? A basic implementation would…
paulscode
  • 1,049
  • 1
  • 12
  • 29
1
2 3
99 100