How can I add a slider to the impulse theme?

Store Design
1

Hi there!

I have been trying to add a slider to my impulse theme but don’t know where to start. Also, once I add the slider I can create customer sliders on my own? or do I need a plugin like frankie to show the relevant products to cross-sell?

Can someone help me by explaining whether the css can be changed to add this functionality? if so, where can I get the code?

No a developer myself but if its easy will be happy to start somewhere.

Any guidance would be much appreciated.

Thanks in advance!

Neha

2

To start with easy way, use slick slider which is rich featured slider. it is very easy to implement https://kenwheeler.github.io/slick/

Please place this code inside in theme.liquid file after the jquery library is included

After that, go to the file where you put the code for slider

Your images class will be something like this

And at the end of that file, please place this code inside script tag

$(document).ready(function() {
$('.slider-images').slick({ // use the main class name of all images here.
  dots: true,
  infinite: false,
  speed: 300,
  slidesToShow: 4,
  slidesToScroll: 4,
  responsive: [
    {
      breakpoint: 1024,
      settings: {
        slidesToShow: 3,
        slidesToScroll: 3,
        infinite: true,
        dots: true
      }
    },
    {
      breakpoint: 600,
      settings: {
        slidesToShow: 2,
        slidesToScroll: 2
      }
    },
    {
      breakpoint: 480,
      settings: {
        slidesToShow: 1,
        slidesToScroll: 1
      }
    }
    // You can unslick at a given breakpoint now by adding:
    // settings: "unslick"
    // instead of a settings object
  ]
});
});

And TADA :grinning_face_with_smiling_eyes: , your slider is ready

3

If you like this slider and this solution worked, then please accept it as solution and please like my posts

4

higood day

2nd and 3rd are not well-explained .instead of using the exact file name you have used the pronouns “that file” that code

It is not explained where is exact place 2nd step code and 3 rd step code

Just wasted our time