Welcome to CodeCrew Infotech
How To Make Product Image & Thumbnail Slider with Slick In Any Shopify Store
Step 1: First Check if slick is used in theme.js or vendor.js?
Step 2: If you have then do not add any slick library.
Step 3: If not, then download a slick library folder and add 3 custom libraries to your store.
This link for downloading the slick folder:- https://sourceforge.net/projects/slick.mirror/
✔ Add the following 3 libraries to the Assets section:
1. slick.css
2. slick-theme.css
3. slick.min.js
✔ Add the following files to theme.liquid to link the library:
In above </head> tag:
{{ 'slick.css' | asset_url | stylesheet_tag }}
{{ 'slick-theme.css' | asset_url | stylesheet_tag }}
In above </body> tag:
<script src="{{ 'slick.min.js' | asset_url }}"></script>
Step 4: Comment on the product image and thumbnail image code.
Step 5: And then add below custom code to the product page code:
|
<div class="product_images"> <div class="main_images"> {% for image in product.images %} <div class="prd_img"> <img src="{{ image | img_url: "1200x" }}" /> </div> {% endfor %} </div> <div class="thumb_images"> {% for image in product.images %} <div class="prd_img"> <img src="{{ image | img_url: "600x" }}" /> </div> {% endfor %} </div> </div> |
Step 6: Then add js code in the theme.js file:
|
$(document).ready(function() { $('.main_images').slick({ slidesToShow: 1, slidesToScroll: 1, arrows: false, dots: true, fade: false, asNavFor: '.thumb_images' }); $('.thumb_images').slick({ slidesToShow: 3, slidesToScroll: 1, asNavFor: '.main_images', arrows: false, focusOnSelect: true, infinite:true }); }); |
Step 7: And then last go to your website and check the product slider.
You may also like
