How can I create a product image slider for my e-commerce site?

[DK7]

Hi everyone,
I am trying to move those photos to be under the main one and make a slider of them. I’ve attached these photos for further description.

BEFORE

AFTER


I also have the product.liquid code here

{% assign current_variant = product.selected_or_first_available_variant %}
{% assign enable_zoom = true %}
{% assign product_img_size = settings.img_size_product %}
{% include 'breadcrumb' %}

  

    

      

        

        
          {% for image in product.images %}
          

            

              
            

          

          {% endfor %}

        

      

    

    
      #### 
        {{ product.title }}
      

      {% if product.selected_or_first_available_variant.price < product.selected_or_first_available_variant.compare_at_price %}
      
        {{ product.selected_or_first_available_variant.compare_at_price | money }}
      
      
        {{ product.selected_or_first_available_variant.price | money }}
      
      {% else %}
      
        {{ product.selected_or_first_available_variant.price | money }}
      
      {% endif %}

      

        {{ product.content | split:"[video]" | first | strip_html | truncatewords:20 }}.
      

      
      
        
      

      
        {% if settings.product_vendor_enable %}
        {{ 'products.product.brand' | t }}: {{ product.vendor }} 
        {% endif %}
         
          {{ 'products.product.tags' | t }}: 
          {% for tag in product.tags %}
          {% unless tag contains '_' %}
          {{ tag }}
          {% unless forloop.last %}, {% endunless %}
          {% endunless %}
          {% endfor %}
        
      

      
      
        ##### 
          {{ 'products.product.description' | t }}
          
          
        

        
          

            {{ product.description | split:"[video]" | first }}
          

        

      

      {% if settings.show_third_tab %}
      
        ##### 
          {{ settings.third_tab_title }}
          
          
        
        
          

            {{ settings.third_tab_text }}
          

        

      

      {% endif %}
      {% if settings.product_reviews_enable %}
      
        ##### 
          {{ 'products.product.reviews' | t }}
          
          
        

        
          

            {% include 'product-review' %}
          

        

      

      {% endif %}
    

  

{% include 'related-products' %}
{{ 'option_selection.js' | shopify_asset_url | script_tag }}

Thanks you for helping!

[KetanKumar]

@DK7

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community!
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

[LitCommerce]

Hi @DK7 ,

Please follow the steps below:

• Step 1: Go to store.js file, find ‘product_single-navigation’ and remove code here:

• Step 2: Go to Assets > base.css and paste this at the bottom of the file:

.product_single-media {
	display: block !important;
}
.product_single-thumbnails-contaner ,
.product_single-navigation-contaner {
	width: 100% !important;
}

Hope it helps!

[DK7]

Hi, thanks for your reply. Unfortunately, the theme doesn’t have store.js file as expected.

[LitCommerce]

Hi @DK7 ,

I checked the site directly and it calls file: Assets > store.js file.

Can you send me the code of theme.liquid file, I will check it again

[DK7]

Hi @LitCommerce ,
Thank you for your help! The site is working well now!