I created the 3D rotating carousel, 8 images with 20px gap, after following your instructions in https://www.sitepoint.com/building-3d-rotating-carousel-css-javascript/, and managed to make it work perfectly. My question is, how do I make it bigger (or smaller, for that matter), and what do I need to change if I have less, or more, images? Thank you.
Take a look at the carousel in the article and check out the SCSS tab.
Where it says //Carousel configuration parameters
$n: 8;
$item-width: 400px;
$item-separation: 80px;
$viewer-distance: 500px;
At a wild guess having just scrolled down the page and not read the article,
$n = number of slides.
$item-width = width of the slides
Dr_John, thanks for your reply. I had seen this section in the SCSS tab, but the problem is that when I compiled it to regular CSS, everything changed, and these parameters, were not so obvious any more.
So, if you would be so kind to suggest how I could change these parameters via the CSS file, I’d really appreciate it. I’m still going up the learning curve.
If you look at the html, you will see that in the section using the figure tags, for three images there are three images listed, for four there are four listed etc.
So changing the number of images you list changes the number of slides you show, so as an experiment, save your html file under a new name, and delete two of the lines that list the images, save, and see if it works.
The size is set in the sccs file as a percentage. $item-width: 40%; changing the % changes the image size.
No, it doesn’t work. It just removes the images. Whole structure still remains based on 8 images, but only 6 are visible.
Don’t worry, it’s good enough as it is. Thanks, just the same.
If its any help at the bottom of the article it shows a version enhanced with JS that can use an arbitrary number of images.
Enhancing with JavaScript
Having seen the basic CSS that lies at the core of the carousel, now JavaScript can be used to enhance the component in several ways, such as:
Arbitrary number of images
Images with percentage widths
Multiple carousel instances on the page
Per-instance configurations, such as the gap size and the back-face visibility
Configuration using HTML5 data-* attributes
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.