CODEWITHSUNDEEP
jquerysafaricarouselslick.js
Wilbert Caba
Wilbert Caba

Reputation: 542

Slick is not a function only with Safari browser

I'm using slick carousel and it works fine with Firefox and Chrome, but Safari's console displays the famous error "slick is not a function". I have two images in this carousel and only Safari is displaying both of them at the same time, one on top of the other. I'm adding Slick.js after jQuery as required: 

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
  <script type="text/javascript" src="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script>

This is my main.js file 

`$(document).ready(function(){
$('.sac-services-slider').slick({
  infinite: true,
  nextArrow: '.sac-services-slider-btn',
  autoplay: true,


  responsive: [{

      breakpoint: 1200,
      settings: {
        slidesToShow: 1,
        infinite: true
      }

    }, {

      breakpoint: 992,
      settings: {
        slidesToShow: 1,
        dots: true
      }

    }, {

      breakpoint: 768,
      settings: "unslick"

    }]
  });
});`

Upvotes: 1

Views: 7159

Answers (1)

Wilbert Caba
Wilbert Caba

Reputation: 542

This one caught me off guard! I was previewing the site locally, not on a web server. So simply adding "http:" before Slick.js CDN fixed the problem.

The (not so) wrong code was:

<script type="text/javascript" src="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script>

The fix to preview locally:

<script type="text/javascript" src="http://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script>

Thanx to everyone that took the time to help!

Upvotes: 1

Related Questions