1

I've been searching for a way that I can figure out (and learn) how to recreate this 3D carousel slider style used in the Salient theme (as seen in the "What they've said about us" and "Our Mugshots" sections of https://themenectar.com/salient/business-2/)

Slider carousel in default (non-sliding) state:

Slider in default, non-sliding state

Slider carousel in mid-slide state (Outgoing slide moves to the background and decreases in opacity, scale, etc.)

Slider carousel in mid-slider state

To me, at least, it's unusual since it's one of the few carousels that pushes slides back "underneath" the slider and creates a kind of "shuffling" effect while also allowing for static content to the left of the slider (rather than most sliders which take up the full width of an interface).

I've searched through a number of online tutorials, codepen examples, and have read through "Intro to 3D CSS transforms" (written by the author of the Flickity slider), but I can't find anything that steers me in the right direction.

I've even licensed the Salient theme in the hopes that I could learn direct from the source. As far as I got is that it's a Flickity slider with the following relevant excerpt in the associated initialization JavaScript:

flkInstanceSlide.find('.inner-wrap-outer').css({
                            'transform': 'perspective(800px) translateX(' + $translateXAmt + 'px) rotateY(' + $rotateAmt + 'deg) translateZ(0)',
                            'opacity': $opacityAmt
                        });

                        flkInstanceSlide.find('.inner-wrap').css({
                            'transform': 'scale(' + $scaleAmt + ') translateZ(0)'
                        });

Admittedly, this could all be very well beyond me. I'm trying to learn to make interfaces that are a little more novel than most of what's out there and use projects like this as a way to learn more about JavaScript, CSS, etc.

Thank you for any & all help.

LosHantos
  • 23
  • 4
  • Did you ever work this out? – alexkodr Apr 07 '23 at 10:35
  • @alexodr I got close, but never to a viable solution. I ended up trying SwiperJS [link](https://swiperjs.com/) with some extensive tweaks, but it didn't match the elegance of the original reference. Currently, on the SwiperJS homepage, there's a version of what I was going for within their primary banner content area (a slider where the slides/cards "stack" on top of one another as you scroll through). I tried starting with this & modifying via CSS to approach the style of the original source, but was ultimately unsuccessful. – LosHantos Apr 08 '23 at 18:30

0 Answers0