To enable the coverflow effect, add the data-effect="creative-coverflow" attribute.

<div data-wm-plugin="collection-carousel"
  data-source="/journal/category/Product+Spotlights"
  data-effect="creative-coverflow"
  data-loop="true"
></div>

Recommended settings for best effect:

<div data-wm-plugin="collection-carousel"
  data-source="/journal"
  data-effect="creative-coverflow"
  data-loop="true"
  data-slides-per-view-sm="1.5"
></div>
  • data-loop="true", otherwise it starts in this weird offset fashion.

  • data-slides-per-view-sm="1.5" - Be sure you can see enough of the items on mobile.

  • data-free-mode="true" - This one is super fun, but not always necessary. It’s also possible to cause issues if you don’t have enough items in the slider and viewing on very large screens.

Previous
Previous

Open in new url