Implement slider for "text column with image" in debut theme

Store Design
1

Hi, I was surprised to not find any prior posts on this.

I would like to implement a slider for my section text column with image. For desktop I would like to show 3 images and the rest should be accessible through the slider. On mobile I would like to show only one image and the rest should be accessible through the slider.

Any hints on this? Or are there apps that can already do this?

2

Hello,

Welcome to the shopify Community.
I read your problem and it seems that I need to analyze your website to provide solution here.
Would you please share your website URL and if your website is password protected then also provide password.

3

Hi, below I attach you a screenshot to better understand the the problem. I have 5 columns with text and image (I’ve added a blank 6th column to have the same images sizes). I would like to get rid of the second row by adding a slider in the first row.

herzigo_0-1620832400258.png
herzigo_0-1620832400258.png941×960 116 KB

4

I understood your problem.
I read your problem and it seems that I need to analyze your website to provide solution here.
Would you please share your website URL and if your website is password protected then also provide password.

5

As the Debut theme slideshow is more for images, I would personally use a JavaScript slider where you can set different views (one slide for mobile, 3 for desktop, etc)

I have worked with these two and I think they’re great:

Happy to help if you get stuck.

6

Thanks for your message. Glide looks great. Could you point out where on my shopify code I have to implement the code in order to make it work?

7

Add the script and core styles to the theme file, inside the HEAD tag, in this case I got them from cdnjs:

Then wherever you have the text columns, the code would be something like this:


    

      

        

          ### Column Header
          

Column body text

        

        
          ### Column Header
          

Column body text

        

        
          ### Column Header
          

Column body text

        

        
          ### Column Header
          

Column body text