I am trying to implement a carousel slider. What I want to do is present a carousel with automatic play. I can create a grid and place a full-width slider in each element of the grid, but to get the visual effect equivalent to an automated carousel, I would need to load all slides into each grid element, but with an offset.
For simplicity, say I want to display a total of 6 images, but only have room to display 4-across at any given time. I would need to create a 4-cell grid, place a full width slider into each of the grid elements, and then load all 6 images into each of the 4 sliders.
However, in the first slider, I would load images in the order 1,2,3,4,5,6. In the second slider, images would be in the order 2,3,4,5,6,1. In the third, the order would be 3,4,5,6,1,2. And so on.
This would result in the visual effect I want, but it's a PAIN (specially with a lot of images).
I have seen some suggestions that a single slider be created, where each slide contains a grid, and each cell of the grid contains a single image. The problem with this method is that the entire group of images within the single slide would move in unison. The effect I want is for only one image at a time to appear/disappear from the screen.
How do I get images to scroll in a way that only ONE image disappears from the screen on the left, while ONE image appears on the screen from the right with a total of 4 images always onscreen, without having to click on an arrow?
I am trying to implement a carousel slider. What I want to do is present a carousel with automatic play. I can create a grid and place a full-width slider in each element of the grid, but to get the visual effect equivalent to an automated carousel, I would need to load all slides into each grid element, but with an offset. For simplicity, say I want to display a total of 6 images, but only have room to display 4-across at any given time. I would need to create a 4-cell grid, place a full width slider into each of the grid elements, and then load all 6 images into each of the 4 sliders. However, in the first slider, I would load images in the order 1,2,3,4,5,6. In the second slider, images would be in the order 2,3,4,5,6,1. In the third, the order would be 3,4,5,6,1,2. And so on. This would result in the visual effect I want, but it's a PAIN (specially with a lot of images). I have seen some suggestions that a single slider be created, where each slide contains a grid, and each cell of the grid contains a single image. The problem with this method is that the entire group of images within the single slide would move in unison. The effect I want is for only one image at a time to appear/disappear from the screen. How do I get images to scroll in a way that only ONE image disappears from the screen on the left, while ONE image appears on the screen from the right with a total of 4 images always onscreen, without having to click on an arrow?Last edited 11 September 2021 by jack.from.canada
