【jQuery】高機能スライダーSlider Proで画像のクリックでリンク先に飛ばない場合の対処方法

●PC版Chromeだとスライダー画像のリンクが効かない

このSlider Proのスクリプトでは、画像にリンクを張ってクリック（タップ）したらリンク先に飛ばすこともできるのですが、Chromeだとクリックしてもリンク先に飛ばない、という問題が発生することがあります。

（同じページをInternet Explorer・Edge・Firefoxで開いた場合は発生しません）

同じ問題で約1年前に悩まれている方もいました。

sliderproでリンクをつけようと思ったら、上手く行かないので、ライトボックスっぽい奴を動かしてるプログラムに無理やりurl取得してlocation.hrefしてリンクを飛ばしました。

sliderproの画像をクリックしたら別のページへ飛ばす方法（メシのタネ）

この問題について、上記サイトに書かれている以外の解決方法が分かったので紹介します。

●問題の原因

問題の原因は何なのか？と調べてみると、どうやらPC版のChromeでスワイプの処理が原因のようです。

PC版のChromeでは、タブレットPCやタッチパネル搭載のPCでは、スワイプ処理で「前のページに戻る」「次のページに進む」という処理ができます。

タブレットPCやタッチパネルを搭載したノートPCは、スマホと同じようにタッチ操作でアプリを利用することができます。

（中略）

Webブラウザ「Google Chrome」では、上記の操作のほかに、左右にスワイプすることで前のページ、次のページへの送り操作が可能で、ニュースサイトなどを読む際に便利です。

タッチパネル対応PCでも威力を発揮！ Windows 10のタッチ操作使いこなし術（ウイルスバスター チャンネル）

しかし、なぜかわかりませんが、タブレットPCやタッチパネル搭載のPCでも効いてしまう上に、通常はスマホなどでしか想定していないスワイプの処理が、PCでも動作し、そのことで画像クリックの処理がうまく動作していないようなのです。

●問題の対処方法

解決方法は、要素に「sp-selectable」のclassを付けることです。

sp-selectableのclassを付けることでスワイプの処理を受け付けなくすることができます。（本来はスワイプのあたり判定のある部分の文字をスマホでも選択するようにするためのclassらしいです）

ただし、単純にsp-selectableのclassを付けてしまうと、今度はスマホなどで、スワイプの処理ができなくなってしまうので、スクリプトで画面の幅サイズが大きい場合をPCと仮定し、その時だけ、sp-selectableのclassを付けるようにします。

GitHubに掲載されているサンプルHTMLの画像にリンクを追加してスライダーのHTMLを組んでいるとします。

<div class="slider-pro" id="my-slider">
    <div class="sp-slides">
        
        <div class="sp-slide">
            <a href="path/url1.html"><img class="sp-image" src="path/to/image1.jpg"/></a>
        </div>
        
        （中略）
        
    </div>
</div>

この場合は、以下のスクリプトをjQueryを読み込んだ後の部分に追加します。

<script>
    $(function(){
        if($(window).width() > 767) { // ウインドウサイズの幅が767ピクセルよりも大きい場合
            $("#my-slider .sp-slide a").each(function(){
                $(this).addClass("sp-selectable").css("cursor","pointer");
            });
        }
    });
</script>

行っている処理は、スライダーの中にある「sp-slide」のclassの付いた要素の中の「aタグ」に「sp-selectable」のclassを付けています。

また、sp-selectableのclassが付いた要素は、カーソルが通常の矢印になってしまうので、クリックできることを知らせるために、カーソルの形もCSSで「pointer」（いわゆる指のアイコン）に変更します。

以上です。

この対策で、PCでは画像をスワイプして（ドラッグして）スライダー画像を切り替える事ができなくなりますが、大きな影響はないでしょう。

それでは、よいSlider Proライフを。

●参考ページ

• Touchswipe false doesn't work in breakpoint ・ Issue #74（bqworks/slider-pro ・ GitHub）
• If a link is clicked, navigate to that link, else navigate to the slide that corresponds to the thumbnail, not working! ・ Issue #120（bqworks/slider-pro ・ GitHub）

GitHubでも書いてあるように、オプションでスワイプ処理を無効にしようとしても、うまくできないようです（何のためのオプションなんだ…？）。

●追記（2017/02/13）

コメント欄にて、えーけーさんからスクリプトの誤りの指摘がありました。スクリプトは現在修正されています。ご指摘ありがとうございました！