Integrating swiper js in shopify

Le-Million
Visitor
3 0 0

Does anyone knows how to integrate Swiper Js into shopify asset section ? Do i need to download each asset inscribed and create a folder for it ? 

I’m really been stuck into this and can’t really see any tutorial about it or something. 

purpose is i want to add a custom slider into my shopify store. 

LeMillion
Replies 2 (2)

bytamins
Shopify Partner
6 0 1

Hey, if you're looking for an engaging swiping experience, we've just built an app for that: https://apps.shopify.com/hypeswipe

 

It's very customizable, you get swiping insights, and you don't have to make any changes to your theme. Happy to answer any questions you might have!

Unam1
Shopify Partner
1 0 0

@Le-Million follow https://swiperjs.com/get-started download the package via https://www.jsdelivr.com/package/npm/swiper then get 

swiper-bundle.min.css and swiper-bundle.min.js from the bundle and put them into your assets folder.
 
In the section you want to use it use:
{{ 'swiper-bundle.min.css' | asset_url | stylesheet_tag }}
{{ 'swiper-bundle.min.js' | asset_url | script_tag }}
 
Otherwise just load via the CDN from the same page.

When setting up the HTML structure make sure to use "swiper-container" instead of "swiper" as the outter div. Took me a few hours to figure this out lol otherwise I was never able to properly initialize Swiper.