https://www.sumifru.co.jp/js/slick_setting.js

1/*
2　slick setting
3　・PC版は既存のレイアウトを維持してSPにのみslickを適応
4　・PC版のレイアウトが崩れるところにはjQueryで調整。
5*/
6
7$(function () {
8
9  //SP専用
10  function slickSetting() {
11
12    var $width    = $(window).width();
13    var $sliders  = $(".slider");
14    var $arrows   = $(".top-carousel-arrows");
15    var $carousel = $(".top-carousel");
16    var $parts    = $(".top-carousel-img,.top-carousel-img-inr");
17
18    $('.product-list li > a').css('box-shadow','none');
19
20
21    if ($width <= 767) {
22      $carousel.each(function () {
23        var $this = $(this);
24        $this.find($sliders).not('.slick-initialized').slick({
25          infinite: true,
26          draggable: true,
27          slidesToShow: 1,
28          slidesToScroll: 1,
29          centerMode: false,
30          dots: false,
31          focusOnSelect: true,
32          speed: 500,
33          autospeed:5000,
34          draggable: true,
35          autoplay: true,
36          appendArrows: $this.find($arrows),
37          prevArrow: $this.find('.top-carousel-prev a'),
38          nextArrow: $this.find('.top-carousel-next a'),
39          arrow: true,
40          // responsive: [
41          //   {
42          //     breakpoint: 767,
43          //     settings: {
44          //       slidesToShow: 1,
45          //       slidesToScroll: 1,
46          //       draggable: true,
47          //       centerMode: true,
48          //     }
49          //   }
50          // ]
51
52        });
53      });
54
55      $arrows.show();
56      $parts.css('overflow', 'hidden');
57      $carousel.css('text-align', 'center');
58
59      if ($sliders.hasClass('panel-list')) {
60        $sliders.removeClass('panel-list');
61      }
62
63    }else{
64      $('.slick-initialized').slick('unslick');
65      $arrows.hide();
66      $parts.css('overflow', 'visible');
67
68      if ($sliders.not('panel-list')) {
69        $sliders.addClass('panel-list');
70        //panel-listのclassかつ他のproduct-listのclassを持つ時
71        if ($sliders.hasClass('product-list02')) {
72           $sliders.removeClass('panel-list');
73         }
74        if ($sliders.hasClass('fcn-wrap__sec02-list')) {
75          $sliders.removeClass('panel-list');
76        }
77      }
78
79
80
81    }
82  }
83  slickSetting();
84
85  $(window).resize(function () {
86    slickSetting();
87  });
88});
89
90
91
92
93
94
95