carousel - How to make product image slideshows in Shopify?

Solution:

You're going to need to look at the image loop: https://docs.shopify.com/themes/liquid-documentation/objects/image (https://docs.shopify.com/themes/liquid-documentation/objects/image)

Nb - for images assigned to product variants, you'd do something like:

   {% for image in product.images %}
      <img src="{{ image.src | img_url: 'compact' }}" alt="{{ image.alt | escape }}">
   {% endfor %}
Copy code

then you'd need to make sure your JS / jQuery pugin wraps around that html. For Collection images - you'd do the same, but output the images in the collection.

    {% for product in collection.products %}
       <img src="{{ product.featured_image.src | img_url: 'large' }}" alt="{{ product.featured_image.alt | escape }}">
     {% endfor %}
Copy code

For anything cool you're going to need JavaScript. Liquid of itself just renders html - you'll need JavaScript to make stuff like whizzy slideshows. So if you're familiar with jQuery plugins - you'd just make shopify output the required html to work with the plugin.

Have you looked at Timber? Its a great place from which to start: http://shopify.github.io/Timber/ (http://shopify.github.io/Timber/)

Solution:

Try to install this app:В https://apps.shopify.com/product-images-gallery-slider (https://apps.shopify.com/product-images-gallery-slider)

You can change the presentation of product images with it by choosing among slider, gallery or carousel.