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
1 answer

Reset slider JavaScript upon window resize (NOT jQuery)

I do not want a jQuery solution. The problem: When my page is resized, the slides in the slider are positioned incorrectly. I'm open to any solution, but my guess is I need to reset the JS for my heroSlider upon window resizing. Here's the JSfiddle…
Justin
  • 15
  • 3
1
vote
1 answer

Carousel React JS, JSON, JSX TypeError: Cannot read property '' of undefined

Im at the beginning of react js, and im new here so sorry if I wrote the problem illegibly I would like to do Carousel using JSON.Data but only i can display one photo, i can not do sliding photos. I hope someone could help me. enter image…
1
vote
0 answers

How to show image from model to carousel(slider) in flutter?

I have json response from API and I want to display it in a carouselslider. here is my response from API [ { "header": "Header 1", "subheader": "", "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet…
MyurA
  • 15
  • 8
1
vote
4 answers

Swiper js slides counter

Can anyone please help? I need a slide counter for my swiper js carousel, but this counter doesn't work: https://codepen.io/pen/?template=wvzKBdW For example, if total slides are 8, then starting value would be like this: Slides: 0/8. When one slide…
Kate
  • 11
  • 1
  • 2
1
vote
1 answer

How can I flip my card and at the same time I can click the picture to produce sounds?

I am new to flutter and I am creating a flashcard that when I long-press the picture, will produce sounds. I did that. My problem is how can I use a flip since it is a flashcard, it has a front and it has a back picture. each picture has its…
1
vote
0 answers

How to prevent open link when user dragging and ends dragging element?

I using react-responsive-carousel for carousel and I need to prevent open link when user dragging and ends dragging the element Help me How can I do this? small example what I mean:
1
vote
1 answer

How to map one image at a time with Alice carousel?

I am trying to add a carousel for my products. I have an array of url images in product.images that i want to show individually in the carousel but when i map them like this:
Francesco
  • 549
  • 1
  • 8
  • 14
1
vote
0 answers

react-slick carousel CSS, "Failed to compile" error

I'm having an issue with my react-slick carousel. I'm following official documentation and installation steps but I'm getting this error: It seems to be a very common error, and I've tried solution which I've found here on stackoverflow - delete…
Pinncik
  • 321
  • 3
  • 14
1
vote
1 answer

I want to tick checkbox after 2 seconds but only when those checkboxes are active in carousel

1
vote
1 answer

Change Number of Items in this Carousel

I found this carousel and wanted to use it. The problem is that the original carousel had many slides (about 8) while I only want 3. It seems like it would be pretty straight-forward, but I just cannot get it to work properly with 3 slides. Instead…
horse
  • 479
  • 7
  • 25
1
vote
1 answer

When I touch my JavaScript slider on mobile, I can't scroll down the page

I've built a slider using pure JavaScript. On mobile screen when I touch the slider I can only change slides but can not scroll down the page. Under the hood when the slider element is touched, a "touchstart" event fires and the corresponding event…
1
vote
1 answer

react-responsive-carousel: how to give fixed height to thumb?

I gave a fixed height to the image. but the problem is now, the height is also applied in thumbs. How can I prevent this? {data?.book?.images.map((image, i) => ( {`${i}`}…</div
Ashik
  • 2,888
  • 8
  • 28
  • 53
1
vote
3 answers

Automatic Javascript slider not repeating on my Tumblr website

I'm using w3 school's automatic slider code on my Tumblr page. Now, I looked high and low on here and have seen several people having similar issues with this same code, but I haven't found any solutions unfortunately. Upon loading, it will cycle…
RMont
  • 23
  • 4
1
vote
2 answers

CSS / Javascript image carousel navigation buttons not working

Can anyone figure out why the navigation buttons don't work on this simple css/javascript image carousel? - https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_slideshow_auto The images successfully transition in/out automatically but the…
1
vote
0 answers

Carousel Effect in React with Styled Components Won't Listen For Media Queries

I am trying to make this component change from a carousel to a display: flex where the projects and laid out above another (for mobile). I have attempted a few things but keep having issues with the refs. I have tried to use innerRef and that didn't…
rafawelsh
  • 11
  • 2