質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
スライダー

GUIのグラフィカルウィジェットのひとつです。インジケーターを動かすことで値を調節可能とします。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

2517閲覧

sliderproの画像リンクが機能しない

atfob

総合スコア7

スライダー

GUIのグラフィカルウィジェットのひとつです。インジケーターを動かすことで値を調節可能とします。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2019/08/06 06:19

楽天goldのヘッダーに使用しているスライダーについて教えていただきたく質問させていただきます。
jqueryやjavascriptについての知識はほぼありません。検索しながら見よう見まねで制作しております。

問題点

sliderproを使用しているのですが、
画像をクリックしてもリンクが機能しません。

使用しているソース等

gimmicklog.com/jquery/340
上記ページのサムネイル付き縦スライダーを使用しております。
スライダー自体は機能しております。

<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>
<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 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全てでリンクが機能しません。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2019/08/06 06:26

コードはマークダウンのcode機能を利用してご提示ください。 https://teratail.com/help#about-markdown もっと言うと「他者がコピペで状況再現できるもの」が望ましいです。 HTMLもなるべく全て提示されたほうが良いでしょう。 多すぎる場合は最小構成のコードで良いです。 また、ブラウザ開発ツールのコンソールにエラーが出ていないかご確認ください。
guest

回答1

0

ベストアンサー

harfではなくhrefでは?

投稿2019/08/06 06:30

kyoya0819

総合スコア10429

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

atfob

2019/08/06 06:38

回答ありがとうございます。 まさかこんな単純なミスに誰も気づかなかったなんてお恥ずかしいです… ご指摘いただき感謝です!ありがとうございました。
kyoya0819

2019/08/06 07:02

解決して良かったです。 スライダーの実装、頑張ってください。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問