Slick Product Image Slider - Pacific Theme

tanerozel
Tourist
4 0 2

Greetings to all,

I want to add a slider to the product images in my Shopify store. I found a tutorial link like the one below on the web.

https://github.com/Nordic-Dev/shopify-product-image-slider

As a first step, I downloaded the slick-1.81.zip file. I saved the following files in the asset folder respectively.

slick.min.js
slick.css
slick-theme.css
fonts / slick.woff
fonts / slick.ttf
fonts / slick.svg
fonts / slick.eot

Then I created a section named product-image-slider.liquid and saved it by entering the code below.

<style>
.slick-next: before, .slick-prev: before {
color: # 000;
}
.slick-next {
right: 0px;
z-index: 100;
}
.slick-prev {
left: 0px;
z-index: 100;
}
</style>
<div class = "slick-slider">
{% for image in product.images%}
<div>
<img class = "mySlides" src="{{image | img_url: 'master'}}" style = "width: 100%">
</div>
{% endfor%}
</div>

<script type = "text / javascript">
jQuery (document) .ready (function () (
jQuery ('. slick-slider'). slick ((
dots: true
});
});
</script>

Finally, I added the following lines to the theme.liquid file.

<head>

<link rel = "stylesheet" type = "text / css" href = "https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css" />
<link rel = "stylesheet" type = "text / css" href = "https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css" />
....................................................................................................................

<script type = "text / javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"> </script>

</body>
</html>

However, after this point, I did not fully understand what to do. I would be grateful if you could help.

Thank you so much

 

 

0 Likes