Effect Coverflowpossible with slider?

[stephen]

Is it possible to recreate the Swiper “Effect coverflow” within the Finsweet Slider components? I only see “swipe” and “fade” under the effects dropdown in the FS Components window.

[Support-Finn]

Hey @stephen!

You’re right that the Finsweet Slider interface only shows “swipe” and “fade” effects, but since our Slider is built on top of Swiper.js, you can absolutely access the coverflow effect!

You’ll need to use the Components Callback to tap into Swiper’s full API. Here’s how to enable coverflow:

<script>
  window.fsComponents = window.fsComponents || [];
  window.fsComponents.push([
    'slider',
    (sliderInstances) => {
      const [sliderInstance] = sliderInstances;
      
      // Configure coverflow effect
      sliderInstance.params.effect = 'coverflow';
      sliderInstance.params.coverflowEffect = {
        rotate: 50,
        stretch: 0,
        depth: 100,
        modifier: 1,
        slideShadows: true,
      };
      
      // Update the slider with new params
      sliderInstance.update();
    },
  ]);
</script>

You can customize the coverflow parameters to match your design needs:

• rotate: Slide rotate in degrees
• stretch: Stretch space between slides (in px)
• depth: Depth offset in px (slides translate in Z axis)
• modifier: Effect multipler
• slideShadows: Enables shadows on slides

Add this script to your page’s custom code section (before </body>) and you’ll have the full coverflow effect!

The beauty of our approach is that you get the visual interface for basic setup plus access to Swiper’s complete feature set when you need advanced effects. If you need any help implementing this, @Support-Luis, @Support-Pedro or @jesse.muiruri can assist further.