css-class-carousel/class-carousel.js at master · sitoexpress/css-class-carousel · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
function class_carousel() {

  // If there is no target element, return
  var is_carousel = jQuery('.class-carousel').length;
  if(!is_carousel) return;

  // Loading slick.js default css from cdnjs
  var link = document.createElement( "link" );
  link.href = "https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css";
  link.type = "text/css";
  link.rel = "stylesheet";
  link.media = "screen,print";

  // Add it to DOM <head> section
  document.getElementsByTagName( "head" )[0].appendChild( link );

  // Loading slick.min.js using jQuery's getScript method, no need to load the script via backend
  jQuery.getScript("https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js", function(data, textStatus, jqxhr) {

    // Initializing the carousel: the exact selector depends on your HTML markup. The one below applies to SiteOrigin Page Builder.
    jQuery('.class-carousel > div').slick({
        dots: false,
        infinite: true,
        speed: 300,
        slidesToShow: 3,
        slidesToScroll: 1,
        responsive: [
          {
            breakpoint: 1024,
            settings: {
              slidesToShow: 3,
              slidesToScroll: 1,
              infinite: true
            }
          },
          {
            breakpoint: 600,
            settings: {
              slidesToShow: 2,
              slidesToScroll: 1
            }
          },
          {
            breakpoint: 480,
            settings: {
              slidesToShow: 1,
              slidesToScroll: 1
            }
          }
        ]
      });
  });

}