Slick slider is not working in Magento 2

Question

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
  });
});

Any help will be appreciated!

After the code changed in jquery we got the buttons in slider. But not working.

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

Answer 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. :)

Answer 2

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
      });
   });
});