https://office-eo.jp/js/top.js

1$(document).ready(function(){
2
3// メインヴィジュアル
4
5$('.slider__main').slick({
6   
7    arrows: true,
8    infinite: true,
9    autoplaySpeed: 5000,
10    speed:1000,
11    centerMode: true, 
12    centerPadding:'10%', //両サイドの見えている部分のサイズ
13    autoplay: true,
14    asNavFor:'.slider__tmb',
15    prevArrow: '<div class="slide-arrow prev-arrow"><span></span></div>',
16    nextArrow: '<div class="slide-arrow next-arrow"><span></span></div>',
17    responsive: [
18  {
19    breakpoint: 1000, //ブレイクポイントを指定
20    settings: {
21      variableWidth: false,
22      centerMode: false,
23	  arrows: false,
24    },
25  },
26],
27});
28
29$('.slider__tmb').slick({
30    slidesToShow:4,
31    arrows:true,
32    infinite:true,
33    focusOnSelect:true,
34    prevArrow:'<p class="slider__tmb__wrap_prev"></p>',
35    nextArrow:'<p class="slider__tmb__wrap_next"></p>',
36    appendArrows:$('.slider__tmb__wrap'),
37    appendDots:$('.slider__tmb__wrap'),
38    speed:1000,
39    autoplaySpeed:5000,
40    asNavFor:'.slider__main',
41    responsive:[
42        {
43        breakpoint:767,
44            settings:{
45                slidesToShow:3
46            }
47        },{
48        breakpoint:600,
49            settings:{
50                slidesToShow:2
51            }
52        }
53    ]
54});
55$('.slider__tmb'+' .slick-slide').on('click',function(){
56            var index = $(this).attr('data-slick-index');
57            $('.slider__tmb').slick('slickGoTo',index,false);
58});
59});
60