0

We have integrated the slick slider on Magento 2. But, the slider is not working. I have checked the console and see there is no error. I'm not sure where am i wrong.

Code in Template file:

<section class="regular slider">
  <div>
    <img src="http://placehold.it/350x300?text=1">
  </div>
  <div>
    <img src="http://placehold.it/350x300?text=2">
  </div>
  <div>
    <img src="http://placehold.it/350x300?text=3">
  </div>
  <div>
    <img src="http://placehold.it/350x300?text=4">
  </div>
  <div>
    <img src="http://placehold.it/350x300?text=5">
  </div>
  <div>
    <img src="http://placehold.it/350x300?text=6">
  </div>
</section>

Code in script:

jQuery(document).on('ready', function() {
  jQuery(".regular").slick({
    dots: true,
    infinite: true,
    slidesToShow: 3,
    slidesToScroll: 3
  });
});

enter image description here

Any help will be appreciated!

After the code changed in jquery we got the buttons in slider. But not working.enter image description here

my jquery code below

require(['jquery', 'jquery/ui'],function(jQuery){
        jQuery(document).ready(function(){
             jQuery('.regular').slick({
                dots: true,
                infinite: true,
                slidesToShow: 3,
                slidesToScroll: 3
              });

        });
    });

Again integrated with magento phtml template with the below code

 [![require(\['jquery', 'jquery/ui'\],function(jQuery){
        jQuery(document).ready(function(){
             jQuery('.slideshow').slick({
                dots: true,
                infinite: true,
                slidesToShow: 3,
                slidesToScroll: 3,
                autoplay:true,
                autoplaySpeed:30000,
                arrows:true
              });

        });
    });

But frontend like the attached image enter image description here

1

can you try this script.

<script type="text/javascript">
    require(['jquery', 'jquery/ui'],function($){
        jQuery(document).ready(function(){
             jQuery('.regular').slick({
                dots: true,
                infinite: true,
                slidesToShow: 1,
                slidesToScroll: 1,
                autoplay:true,
                autoplaySpeed:3000,
                arrows:true
              });

        });
    });
</script>

hope this help you. :)

  • pls check my lastest code – deepa pwc Oct 18 at 15:04
  • @deepapwc check my updated answer, accept answer if you achieve you requirements. thanks – Ranjeet Kumar Oct 18 at 15:18
0

If you are adding your custom js library other than jQuery then you need to include the js code inside require function like Below

require(['jquery', 'jquery/ui'], function($){ 
     //your js custom code here  
 });

in your case write js code as below.

require(['jquery', 'jquery/ui'], function($){
  jQuery(document).on('ready', function() {
      jQuery(".regular").slick({
        dots: true,
        infinite: true,
        slidesToShow: 3,
        slidesToScroll: 3
      });
   });
});
  • pls check my lastest code – deepa pwc Oct 18 at 15:04

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.