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

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

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

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

プラグイン

プラグイン(plug-in)は、ソフトウェアアプリケーションの機能拡張の為に開発された、一組のソフトウェアコンポーネントのことを指します。

jQuery

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

Q&A

解決済

1回答

8900閲覧

jQueryプラグインSlickの複数設置すると矢印が表示されなくなる

TomohiroSagawa

総合スコア13

スライダー

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

プラグイン

プラグイン(plug-in)は、ソフトウェアアプリケーションの機能拡張の為に開発された、一組のソフトウェアコンポーネントのことを指します。

jQuery

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

0グッド

0クリップ

投稿2016/07/22 05:37

編集2016/07/22 06:07

Slickを使い1つのページにサムネイル付きのスライダーを4つ設置しています。
それぞれに別のクラスをつけて

script

1<script> 2 $(function() { 3 $('.thumb-item').slick({ 4 infinite: true, 5 autoplay:true, 6 autoplaySpeed:3000, 7 speed: 2000, 8 swipeToSlide:true, 9 slidesToShow: 1, 10 slidesToScroll: 1, 11 arrows: false, 12 fade: true, 13 asNavFor: '.thumb-item-nav' 14 }); 15 $('.thumb-item-nav').slick({ 16 infinite: true, 17 swipeToSlide:true, 18 slidesToShow: 4, 19 slidesToScroll: 1, 20 arrows: true, 21 dots: true, 22 asNavFor: '.thumb-item', 23 focusOnSelect: true, 24 }); 25}); 26 $(function() { 27 $('.thumb-item2').slick({ 28 infinite: true, 29 autoplay:true, 30 autoplaySpeed:3000, 31 speed: 2000, 32 swipeToSlide:true, 33 slidesToShow: 1, 34 slidesToScroll: 1, 35 arrows: false, 36 fade: true, 37 asNavFor: '.thumb-item-nav2' 38 }); 39 $('.thumb-item-nav2').slick({ 40 infinite: true, 41 swipeToSlide:true, 42 slidesToShow: 4, 43 slidesToScroll: 1, 44 arrows: true, 45 dots: true, 46 asNavFor: '.thumb-item2', 47 focusOnSelect: true, 48 }); 49}); 50 $(function() { 51 $('.thumb-item3').slick({ 52 infinite: true, 53 autoplay:true, 54 autoplaySpeed:3000, 55 speed: 2000, 56 swipeToSlide:true, 57 slidesToShow: 1, 58 slidesToScroll: 1, 59 arrows: false, 60 fade: true, 61 asNavFor: '.thumb-item-nav3' 62 }); 63 $('.thumb-item-nav3').slick({ 64 infinite: true, 65 swipeToSlide:true, 66 slidesToShow: 4, 67 slidesToScroll: 1, 68 arrows: true, 69 dots: true, 70 asNavFor: '.thumb-item3', 71 focusOnSelect: true, 72 }); 73}); 74 $(function() { 75 $('.thumb-item4').slick({ 76 infinite: true, 77 autoplay:true, 78 autoplaySpeed:3000, 79 speed: 2000, 80 swipeToSlide:true, 81 slidesToShow: 1, 82 slidesToScroll: 1, 83 arrows: false, 84 fade: true, 85 asNavFor: '.thumb-item-nav4' 86 }); 87 $('.thumb-item-nav4').slick({ 88 infinite: true, 89 swipeToSlide:true, 90 slidesToShow: 4, 91 slidesToScroll: 1, 92 arrows: true, 93 dots: true, 94 asNavFor: '.thumb-item4', 95 focusOnSelect: true, 96 }); 97}); 98</script>

html

1<html> 2<div class="wrap"> 3 <ul class="slider thumb-item"> 4 <li><img src="images/sample-1.jpg" alt=""></li> 5 <li><img src="images/sample-2.jpg" alt=""></li> 6 <li><img src="images/sample-3.jpg" alt=""></li> 7 <li><img src="images/sample-4.jpg" alt=""></li> 8 <li><img src="images/sample-5.jpg" alt=""></li> 9 <li><img src="images/sample-6.jpg" alt=""></li> 10 </ul> 11 <ul class="slider thumb-item-nav"> 12 <li><img src="images/sample-1.jpg" alt=""></li> 13 <li><img src="images/sample-2.jpg" alt=""></li> 14 <li><img src="images/sample-3.jpg" alt=""></li> 15 <li><img src="images/sample-4.jpg" alt=""></li> 16 <li><img src="images/sample-5.jpg" alt=""></li> 17 <li><img src="images/sample-6.jpg" alt=""></li> 18 </ul> 19 </div> 20 <!-- これをページ内に4つ(クラス名と画像は違います)設置しています --> 21</html>

というように割り当ててるのですが4つ設置した中の最初と最後のものにしか矢印とドットが表示されません。
いろいろとやってはみたのですが解決できずにいます。

原因を教えていただきたいです。

slick:http://kenwheeler.github.io/slick/

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

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

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

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

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

kei344

2016/07/22 06:02 編集

コードはコードブロックで囲んでいただけませんか? ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「</>」ボタンを押すとコードブロックになります。また、URLにはリンクを張ることができますので、よろしくお願いします。
TomohiroSagawa

2016/07/22 06:06

修正いたしました。 ご丁寧に教えていただいてありがとうございます。
kei344

2016/07/22 06:16 編集

クラスslider に割り当てているCSSはありますか?
TomohiroSagawa

2016/07/22 06:23

cssはいじる前でしたので割り当てているcssはありません!
guest

回答1

0

ベストアンサー

動くサンプル:https://jsfiddle.net/k53sncv2/

お書きになったコードで問題なく動きます。
問題がある可能性が有るのが、HTMLの記述ミス/CSSの記述ミスくらいですかね。閉じタグが抜けているとか、全角<>が混ざっているとか、そういったミスがある場合には想定外の挙動をすることがあります。

投稿2016/07/22 06:52

kei344

総合スコア69364

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

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

TomohiroSagawa

2016/07/24 12:38

ありがとうございます。 諸々確認してみます。。 ありがとうございます!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問