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

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

新規登録して質問してみよう
ただいま回答率
85.50%
WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

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

Q&A

解決済

1回答

1969閲覧

複数設置してあるサムネイルスライダーがまとめて動いてしまう。

roto_note

総合スコア11

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

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

0グッド

0クリップ

投稿2020/10/02 12:44

前提・実現したいこと

wordpressのwebサイトにてカスタムフィールドとslickを使って複数のサムネイルスライダーを実装したい

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

サムネイルをクリックして連動させることはできたがサムネイルを押すとサイト上にあるスライダーすべての画像が変わってしまう。

該当のソースコード

js

1( function() { 2 var app = { 3 initAchievementSlider: function(){ 4 var carousel = jQuery('.achievement-slider-js'); 5 carousel.slick({ 6 dots: false, 7 slidesToShow: 8, 8 infinite: true, 9 asNavFor: '.achievement__content .image', 10 focusOnSelect: true, 11 }); 12 jQuery('.achievement__content .image').slick({ 13 slidesToShow: 1, 14 slidesToScroll: 1, 15 arrows: false, 16 fade: true, 17 asNavFor: '.achievement-slider-js', 18 }); 19 }, 20 } 21 22 jQuery(document).ready( function() { 23 app.initAchievementSlider(); 24 }); 25})();

試したこと

調べた結果、スライダーを each で回し、何番目のスライダーを操作しているかを明確に指定する必要があるとのことで記載してみましたが知識が乏しく期待する動きができませんでした。
ご指摘等あればご教授願いたいです。
よろしくお願いいたします。

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

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

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

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

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

guest

回答1

0

ベストアンサー

asNavForで連動するスライダを一意に指定できるようにしなくちゃダメです
とりあえずeachで一つ一つslickして一つ一つ別々のasNavForを設定するというのは前提として

実はslickのasNavForの値は公式ではセレクタの文字列って書いてありますが
jQueryオブジェクトでもいけます

公式のドキュメントに書いてることじゃないのでその辺は留意

sample

投稿2020/10/03 05:11

KazuhiroHatano

総合スコア7802

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

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

roto_note

2020/10/05 01:44

回答有り難うございます。 (function($) { $(".achievement-slider-js").each(function() { $(this).slick({ dots: false, slidesToShow: 8, infinite: true, focusOnSelect: true, asNavFor:'.achievement__content .image' }); }); $(".achievement__content .image").each(function() { $(this).slick({ slidesToShow: 1, slidesToScroll: 1, arrows: false, fade: true, asNavFor: '.achievement-slider-js' }); }); })(jQuery); ご教授いただいた内容をもとにeachを書き加えて変更してみたのですがスライダーは以前と変わらず一緒に動いています。 asNavForの指定を別々にするというのがよくわからず苦戦しております。 どのような指定をすればいいのでしょうか?? よろしくお願い致します。
KazuhiroHatano

2020/10/05 02:00

最も良いのは各スライダに一意のIDを与えてそれぞれのasNavForをIDで指定することです しかし、スライダに任意のIDやclassを与える術がなかったとしてもasNavForを jQueryオブジェクトで指定するという方法がまだあります 連動すべき2つのスライダは兄弟要素であったり、共通の親を持っていたりしませんか? jQeuryの.parent.,prev,siblingなどを使って連動すべきスライダだけを拾ってasNavForに指定しましょう
roto_note

2020/10/07 10:46

丁寧にご回答ありがとうございます! 今回は別の方法で解決致しました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問