1

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"

    }]
  });
});`
Wilbert Caba
  • 530
  • 1
  • 6
  • 13
  • Does it work if you do that in window.load instead of document.ready? https://slickmedia.co.uk/blog/script-not-working-in-safari/ Maybe all the elements aren't loaded yet. http://stackoverflow.com/questions/4584373/difference-between-window-load-and-document-ready-functions – Jason C Feb 04 '17 at 14:47
  • When I load it with window.load it doesn't work in any browser. Only when I load it with document.ready works with Firefox and Chrome. Safari's console displays '$('.my-class').slick is not a function. (In '$('.my-class').slick', '$('.my-class').slick' is undefined)' located in jquery.min.js – Wilbert Caba Feb 05 '17 at 04:13
  • Check the dev tools tab (or whatever Safari has), are there any other scripts being loaded that might be causing issues? Perhaps an older version of jQuery, even? I'm just guessing, I don't have a lot of experience with these kinds of things. – Jason C Feb 05 '17 at 04:18

1 Answers1

1

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!

Wilbert Caba
  • 530
  • 1
  • 6
  • 13