How to design a custom slideshow in Shopify liquid?

Store Design
, ,
1

Hello

Hope you are fine

I need help to design custom Slideshow in Shopify liquid. I already done this with the help of 3rd party library owl-carousel. but there is loading issue in theme editor using owl-carousel library.

Thanks

2

Hi @AK71

Please use Slick slider instead of any third party slideshow plugin. its easy to use and takes less time to load .

Thanks

3

Thanks for reply @StoreSurgeon

but when i used slick slider. In the editor when i select “slick slider” section it shows in block form. I want to display in slide form. How it’s possible?

4

install the code carefully as instructions

5

ok, I try again

6

code is installed. but when is select section it’s load like same as in the previous image but when i saved it’s working fine. Here is my code. It is example now and js &css cal in theme.liquid.

.slider { width: 100%; margin: 0 auto; } .slider div { height: 400px; text-align: center; padding: 50px; }
Slide 1
Slide 2
Slide 3

{% schema %}
{
“name”: “Slick Slideshow”,
“presets”: [
{
“name”: “Slick Slideshow”
}
]
}
{% endschema %}

7

use these cdn files in the theme.liquid instead of that you used earlier

CSS

JS

8

same results

9

https://themes.shopify.com/themes/mono/styles/default?surface_inter_position=1&surface_intra_position=1&surface_type=all

this theme using slick slider and this theme slider working same as my theme slider in Shopify editor