https://www.calbee.co.jp/products/top/js/slider.js

1$('#slider ul').slick({
2    autoplay:true,
3    autoplaySpeed:5000,
4    slidesToShow:5,
5    centerPadding:3,
6    pauseOnHover: true,
7    pauseOnFocus: true,
8    accessibility: false,
9    focusOnSelect: false,
10    swipe: true,
11    responsive:[
12        {
13            breakpoint: 767,
14            settings:{
15                slidesToShow:1,
16            }
17        },
18    ]
19});
20
21// 初期化完了後にボタンを表示
22$('#movie_controller').show();
23
24$('.slick-list').attr('aria-live', 'polite');
25$('.slick-arrow').attr('aria-controls', 'slider');
26
27// 初期化後に全スライドのtabindexを無効化
28$('#slider ul .slick-slide').attr('tabindex', '-1');
29$('#slider ul .slick-slide a').attr('tabindex', '-1');
30$('#slider ul .slick-slide.slick-active a').attr('tabindex', '0');
31$('#slider ul .slick-slide.slick-current a').attr('tabindex', '0');
32
33// フォーカス時にページスクロールさせない
34function focusWithoutScroll(el) {
35  if (!el) return;
36
37  try {
38    el.focus({ preventScroll: true });
39  } catch (e) {
40    var x = window.pageXOffset;
41    var y = window.pageYOffset;
42    el.focus();
43    window.scrollTo(x, y);
44  }
45}
46
47var isPrev = false;
48var isUserOperated = false;
49
50// アクティブスライドのみ有効化する
51function updateSlideTabindex() {
52  $('#slider ul .slick-slide a').attr('tabindex', '-1');
53  $('#slider ul .slick-slide.slick-active a').attr('tabindex', '0');
54  $('#slider ul .slick-slide.slick-current a').attr('tabindex', '0');
55}
56
57// 手動操作後だけ、表示中スライドへフォーカスを移す
58function focusVisibleSlide() {
59  var $visibleSlides = $('#slider ul .slick-slide[aria-hidden="false"]');
60  var $targetSlide = isPrev ? $visibleSlides.first() : $visibleSlides.last();
61  var $focusableLinks = $targetSlide.find('a[href]:not([tabindex="-1"])').filter(':visible');
62
63  if ($focusableLinks.length > 0) {
64    focusWithoutScroll($focusableLinks.first()[0]);
65  } else {
66    $targetSlide.attr('tabindex', '-1');
67    focusWithoutScroll($targetSlide[0]);
68  }
69}
70
71// スライド変更後
72$('#slider ul').on('afterChange', function(){
73  updateSlideTabindex();
74
75  // 自動再生による切替ではフォーカスを動かさない
76  if (!isUserOperated) return;
77
78  focusVisibleSlide();
79  isUserOperated = false;
80});
81
82// 左右ボタンに付与
83$('#slider ul button.slick-prev').attr('aria-label', 'Previous');
84$('#slider ul button.slick-prev').attr('aria-controls', 'slider');
85$('#slider ul button.slick-next').attr('aria-label', 'Next');
86$('#slider ul button.slick-next').attr('aria-controls', 'slider');
87
88// 前後ボタンをユーザーが操作した時だけフォーカス移動対象にする
89$('.slick-prev, .slick-next').on('click keydown', function(e) {
90  if (e.type === 'click' || e.key === 'Enter' || e.key === ' ') {
91    isUserOperated = true;
92    isPrev = $(this).hasClass('slick-prev');
93  }
94});
95
96// カルーセル内にキーボードフォーカスが入ったら自動再生を停止
97$('#slider').on('focusin', function() {
98  $('#slider ul').slick('slickPause');
99});
100
101// 停止ボタンのクリックイベント
102$(".btn_play").hide();
103
104$(".btn_stop").on("click", function() {
105  $("#slider ul").slick("slickPause");
106  $("#slider ul").slick("slickSetOption", "autoplay", false, true);
107  $(".btn_stop").hide();
108  $(".btn_play").show();
109});
110
111// 再生ボタンのクリックイベント
112$(".btn_play").on("click", function() {
113  $("#slider ul").slick("slickSetOption", "autoplay", true, true);
114  $("#slider ul").slick("slickPlay");
115  $(".btn_play").hide();
116  $(".btn_stop").show();
117});