Compatibility: All Shopify themes (Style might vary)
I was able to write an autoplay slider / carousel using scroll. This works with most of Shopify themes (work best in Dawn and Debut theme).
In this tutorial, we are creating a slider or carousel for a card or product card. I did provide an option to choose between the two. I also included an autoplay option, of course. You can choose from 3 to 7 products per slide, or 3 - 5 cards per slide.
I also added an options for dots and number counter. Yes, the counters work.
Check DEMO store here💻. Password: made4uo
What you are buying:
- Automatic slider for collection
What makes our code better:
- We do not use external libraries, with that being said, our code will have no to minimal effect to your website's speed performance
- We do not leave or add codes use to advertise for our website
- Our code is mobile friendly
To start:
1. Go to Admin Shopify store > Themes > Actions > Edit Code
2. In Section folder, create a new section, and name it "universal-carousel", then paste the code below.
3. We need the file that contains the javascript. Under the asset folder, open the "theme.js" or "global.js" file and paste the code below.
That is it. Let me know if you have questions (",)
Updated 3/18/22: You can add multiple of this section in one page.
Copied!
1 comment
Thanks for great video. How can I set minimum card number to 1 ?