https://www.click-sec.com/app-files/js/module/carousel.js

1/**
2 * @method carousel
3 * - カルーセル
4 * @requires
5 * - slick.js
6 */
7
8// import
9// import 'slick-carousel';
10// import 'slick-carousel/slick/slick.scss';
11// import Util from '../util';
12
13var u = new Util();
14
15/**
16 * @definition
17 */
18var carousel = function(config) {
19  // options
20  var c = $.extend({
21    factorElement: '.js-carousel',
22    listElement: '.js-carousel__list',
23    controlElement: '.js-carousel__control',
24    pagerElement: '.js-carousel__pager',
25    pauseElement: '.js-carousel__pause',
26    playElement: '.js-carousel__play',
27    pcEscElement: 'js-carousel__escape__pc',
28    spEscElement: 'js-carousel__escape__sp',
29  }, config);
30  // vars
31  var $elm = $(c.factorElement);
32  var list = c.listElement;
33  var control = c.controlElement;
34  var pager = c.pagerElement;
35  var pause = c.pauseElement;
36  var play = c.playElement;
37  var nameAttr = 'data-carousel';
38  var bp1 = u.breakPoint1 + 1;
39  // exit
40  if ($elm.length === 0) { return false; }
41  if (!u.isRangeSP()) {
42    if ($elm.hasClass(c.pcEscElement)) { return false; }
43  } else if ($elm.hasClass(c.spEscElement)) { return false; }
44  // setting
45  var settings = {
46    banner: {
47      arrows: true,
48      dots: true,
49      infinite: true,
50      autoplay: true,
51      autoplaySpeed: 4000,
52      speed: 500,
53      // appendDots   // initで設定
54      // slidesToShow   // initで設定
55      // slidesToScroll // initで設定
56      responsive: [
57        {
58          breakpoint: bp1,
59          settings: {
60            // slidesToShow   // initで設定
61            // slidesToScroll // initで設定
62          },
63        },
64      ],
65    },
66  };
67  // function
68  var controlDisplay = function (_self, _carouselNum, _pcSlideNum, _spSlideNum) {
69    var minLength = u.isRangePC() ? _pcSlideNum : _spSlideNum;
70    if (minLength >= _carouselNum) {
71      _self.find(control).hide();
72      _self.find(play).show();
73    } else {
74      _self.find(control).show();
75      _self.find(play).hide();
76    }
77  };
78  // init
79  $elm.each(function () {
80    var self = $(this);
81    var name = self.attr(nameAttr);
82    var carousel = self.find(list);
83    var carouselNum = self.find(list).find(' > *').length;
84    var pcSlideNum;
85    var spSlideNum;
86    switch (name) {
87      case 'banner':
88        pcSlideNum = Number(self.attr('data-banner-pc'));
89        spSlideNum = Number(self.attr('data-banner-sp'));
90        settings[name].slidesToShow = pcSlideNum;
91        settings[name].slidesToScroll = pcSlideNum;
92        settings[name].appendDots = self.find(pager);
93        settings[name].responsive[0].settings.slidesToShow = spSlideNum;
94        settings[name].responsive[0].settings.slidesToScroll = spSlideNum;
95        break;
96      default:
97        break;
98    }
99    carousel.slick(settings[name]);
100    if (self.find(control).length !== 0) {
101      controlDisplay(self, carouselNum, pcSlideNum, spSlideNum);
102      var breakFlg = u.isRangeSP();
103      u.isWindowSizeWatch(function(){
104        var checkFlg = u.isRangeSP();
105        if (checkFlg !== breakFlg) {
106          controlDisplay(self, carouselNum, pcSlideNum, spSlideNum);
107          breakFlg = checkFlg;
108        }
109      });
110    }
111  });
112  // control
113  $(pause).on('click', function () {
114    var thisPause = $(this);
115    var wrap = thisPause.parents(c.factorElement);
116    var thisList = wrap.find(list);
117    var thisPlay = wrap.find(play);
118    thisList.slick('slickPause');
119    thisPause.hide();
120    thisPlay.show();
121  });
122  // control
123  $(play).on('click', function () {
124    var thisPlay = $(this);
125    var wrap = thisPlay.parents(c.factorElement);
126    var thisList = wrap.find(list);
127    var thisPause = wrap.find(pause);
128    thisList.slick('slickPlay');
129    thisPlay.hide();
130    thisPause.show();
131  });
132}
133
134
135/**
136 * @execution
137 */
138$(function(){ carousel(); });