楽天goldのヘッダーに使用しているスライダーについて教えていただきたく質問させていただきます。
jqueryやjavascriptについての知識はほぼありません。検索しながら見よう見まねで制作しております。
問題点
sliderproを使用しているのですが、
画像をクリックしてもリンクが機能しません。
使用しているソース等
gimmicklog.com/jquery/340
上記ページのサムネイル付き縦スライダーを使用しております。
スライダー自体は機能しております。
<div id="thumb-v" class="slider-pro"> <div class="sp-slides"> <div class="sp-slide"> <a harf="リンク先" target="_top"><img class="sp-image" src="images/header/01.jpg"/></a> </div> <div class="sp-slide"> <a harf="リンク先" target="_top"><img class="sp-image" src="images/header/02.jpg"/></a> </div> <div class="sp-slide"> <a harf="リンク先" target="_top"><img class="sp-image" src="images/header/03.jpg"/></a> </div> <div class="sp-slide"> <a harf="リンク先" target="_top"><img class="sp-image" src="images/header/04.jpg"/></a> </div> </div> <div class="sp-thumbnails"> <img class="sp-thumbnail" src="images/header/01.jpg"/> <img class="sp-thumbnail" src="images/header/02.jpg"/> <img class="sp-thumbnail" src="images/header/03.jpg"/> <img class="sp-thumbnail" src="images/header/04.jpg"/> </div> </div><script type="text/javascript"> $( document ).ready(function( $ ) { $('#thumb-v').sliderPro({ width: 760,//横幅 height:296, orientation: 'vertical',//スライドの方向 arrows: true,//左右の矢印 buttons: false,//ナビゲーションボタン loop: false,//ループ thumbnailsPosition: 'right',//サムネイルの位置 thumbnailPointer: true,//アクティブなサムネイルにマークを付ける thumbnailWidth: 190,//サムネイルの横幅 thumbnailHeight: 74,//サムネイルの縦幅 breakpoints: { 600: {//表示方法を変えるサイズ thumbnailsPosition: 'bottom', thumbnailWidth: 190, thumbnailHeight: 74 }, 480: {//表示方法を変えるサイズ thumbnailsPosition: 'bottom', thumbnailWidth: 110, thumbnailHeight: 60 } } }); }); </script>
試したこと
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>と
<script src="slider-pro-master/js/jquery.sliderPro.min.js"></script>の間に
<script> $(function(){ if($(window).width() > 767) { // ウインドウサイズの幅が767ピクセルよりも大きい場合 $("#thumb-v .sp-slide a").each(function(){ $(this).addClass("sp-selectable").css("cursor","pointer"); }); } }); </script>上記を追加。
PCでもスワイプ処理がされてしまうことが原因らしいということはわかったのですが、
上記を追加で記述しましたが、カーソルが指にはなりますがやはりリンクは機能しません。
その他
調べてみたところ、chromeで機能しないという記事はよく見かけるのですが、
私が制作したものは、chrome、firefox、IE全てでリンクが機能しません。
回答1件
あなたの回答
tips
プレビュー