前提・実現したいこと

jQuey・slickのプラグインを使用してリンクを含むスライダーを作成しています。
３枚表示し、左右の２枚をクリックまたはタップでスライドが切り替わるようにし、左右の画像はリンクを無効、中央の画像のみリンクを有効にしたいです。

発生している問題・エラーメッセージ

３枚全てリンクが有効になったまま、もしくは
３枚全てのリンクが無効になってしまったり、意図せぬ場所のリンクが有効になってしまったりします。

該当のソースコード

HTML
1<div class="top-slider">
2        <a href="hoge"><img src="1.jpg" alt="" /></a>
3        <a href="hoge"><img src="2.jpg" alt="" /></a>
4        <a href="hoge"><img src="3.jpg" alt="" /></a>
5        <a href="hoge"><img src="4.jpg" alt="" /></a>
6</div>

js
1$('.top-slider').slick({
2        arrows: false,
3        slidesToShow: 3,
4        centerMode: true,
5        centerPadding:'0%',
6        focusOnSelect: true,
7        variableWidth: true,
8        slidesToScroll: 1,
9    });

試したこと

①セレクタ:not(クラス名)をつかう
→読み込み直後はうまくいきましたが、スライドを動かしてしまうと機能しませんでした。

js
1        $('.slick-slide:not(.slick-center)').click(function () {
2                return false;
3        });

②クラスの有無でif分を使ってみる
→全て有効になってしまいました

js
1       $('.slick-slide').click(function () {
2            if ($(this).hasClass('slick-center')) {
3                return true;
4            } else {
5                return false;
6            }
7        });
8

③CSSでpointer-events: none;を使ってみる
→スライドはfocusOnSelect: true,で、クリックもしくはタップでスライド変更したかったのですが、これができなくなってしまいました。

補足情報

js、jquery初心者です。アドバイス頂けると大変嬉しいです。

行動規範の内容に同意します

回答1件

ベストアンサー

jQueryの.clikcで要素を指定した場合、スライダーがレンダリングされる前の要素にしかクリックのイベントが付与できないので、リアルタイムにクリックした要素に対してイベントを発火させるには以下のように書く必要があります。

javascript
1$(document).on('click', '.slick-slide:not(.slick-center)', function () {
2  return false;
3});

ただ、focusOnSelect: true,の効果が作用しているせいか、上記が効かないようでした。(falseにしてあげると上記が有効になります)

対応策① JSで頑張る

slickのメソッドを使ってクリックした要素番号などを取得後に、取得した番号の要素をアクティブにさせるというようなjsを書くこともできるとは思います。が、めんどそう????

対応策② CSSでマスクがけ

マスクがけ用の要素を用意してアクティブ要素にはマスクを外すなどが簡単かも知れないです。

html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4  <meta charset="UTF-8">
5  <meta http-equiv="X-UA-Compatible" content="IE=edge">
6  <meta name="viewport" content="width=device-width, initial-scale=1.0">
7  <title>Document</title>
8<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css">
9<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.css">
10<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
11<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
12<script>
13  $(function () {
14    $('.top-slider').slick({
15          arrows: false,
16          slidesToShow: 3,
17          centerMode: true,
18          centerPadding:'0%',
19          focusOnSelect: true,
20          variableWidth: true,
21          slidesToScroll: 1,
22      });
23  })
24</script>
25<style>
26  .top-slider-item {
27    position: relative;
28  }
29  /* マスク用擬似要素 */
30  .top-slider .slick-slide:not(.slick-center) .top-slider-item:before {
31    content: "";
32    display: block;
33    width: 100%;
34    height: 100%;
35    position: absolute;
36    top: 0;
37    left: 0;
38  }
39</style>
40</head>
41<body>
42  <div class="top-slider">
43    <div class="top-slider-item"><a href="hoge"><img src="https://placehold.jp/100x100.png" alt="" /></a></div>
44    <div class="top-slider-item"><a href="hoge"><img src="https://placehold.jp/100x100.png" alt="" /></a></div>
45    <div class="top-slider-item"><a href="hoge"><img src="https://placehold.jp/100x100.png" alt="" /></a></div>
46    <div class="top-slider-item"><a href="hoge"><img src="https://placehold.jp/100x100.png" alt="" /></a></div>
47  </div>
48</body>
49</html>