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

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

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

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

jQuery

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

Q&A

解決済

2回答

1223閲覧

slickを使ったスライダーでURLによってページを開いた時にアクティブとなるスライドを変える

groco

総合スコア20

JavaScript

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

jQuery

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

0グッド

0クリップ

投稿2017/06/18 07:52

編集2017/06/18 08:00

slick.jsを使用してスライダーを作っています。
http://kenwheeler.github.io/slick/

slick.jsを設置するページは20ページあり、そのスライダーから同じ階層内のページ間の移動ができるようにしています。
スライダーは3枚ずつスライドするようにしています。
スライドのループはさせていません。

下記のようなページが存在していて、順番としては「/test/test01/」が一番左に、「/test/test10/」が一番右に来るようセットしています。
例えば「/test/test02/」を開いたら3枚表示されている画像の一番左が「/test/test02/」の画像にするということはjsでできるでしょうか?

/test/test01/index.html
/test/test02/index.html
...
/test/test20/index.html

スライドを動かすと「.slick-current.slick-active」のクラス名が移動するようなので、それを使ってできないかと調べてみたいのですが処理の想定ができていないのか見つけることができませんでした。

情報が少なく恐縮ですが、ご教授いただけますと幸いです。
何卒よろしくお願いいたします。

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

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

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

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

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

guest

回答2

0

slcikが提供している下記メソッドで出来そうです。

slickGoTo
Arguments: int : slide number, boolean: dont animate
Navigates to a slide by index

Javascript

1var slide_index = 1;//スライドの位置 2$('.your-element').slick('slickGoTo', slide_index);

投稿2017/06/18 08:15

yuki84web

総合スコア1857

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

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

groco

2017/06/18 08:47

早速ありがとうございます! なるほど、このプラグインには元々そういうオプションが備わっているのですね。 私の確認不足でした。 ありがとうございます。 教えていただいたメソッドを使って下記のようにしてみたのですが、残念ながら表示は変わりませんでした。 -- $(function(){ $('.js-carousel2').slick({ infinite: false, slidesToShow: 3, slidesToScroll: 3, slickGoTo: 2, responsive: [{ breakpoint: 601, settings: { slidesToShow: 2, slidesToScroll: 2, slickGoTo: 2 } }] }); }); -- しかし、オプションを見直してみたところ下記で実現することができました。 -- $(function(){ $('.js-carousel-detail2').slick({ infinite: false, slidesToShow: 3, slidesToScroll: 3, initialSlide: 3, responsive: [{ breakpoint: 601, settings: { slidesToShow: 2, slidesToScroll: 2, initialSlide: 3 } }] }); }); -- ただ、スライドを3枚ずつ移動するようにしているせいか、左に隠れているスライドの数が3枚よりも少ないと左側へスライドすることができません。 これは一度にスライドする数を変更するしかないのでしょうか? よろしくお願いいたします。
guest

0

ベストアンサー

表示したページでslickGoToすれば出来ませんか?

【slickで自作の移動するボタンを作るときのメモ - Qiita】
http://qiita.com/ituki_b/items/9f8d25010032850c1ac7

投稿2017/06/18 08:06

kei344

総合スコア69364

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

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

groco

2017/06/18 08:46

早速ありがとうございます! なるほど、このプラグインには元々そういうオプションが備わっているのですね。 私の確認不足でした。 ありがとうございます。 教えていただいたメソッドを使って下記のようにしてみたのですが、残念ながら表示は変わりませんでした。 -- $(function(){ $('.js-carousel2').slick({ infinite: false, slidesToShow: 3, slidesToScroll: 3, slickGoTo: 2, responsive: [{ breakpoint: 601, settings: { slidesToShow: 2, slidesToScroll: 2, slickGoTo: 2 } }] }); }); -- しかし、オプションを見直してみたところ下記で実現することができました。 -- $(function(){ $('.js-carousel-detail2').slick({ infinite: false, slidesToShow: 3, slidesToScroll: 3, initialSlide: 3, responsive: [{ breakpoint: 601, settings: { slidesToShow: 2, slidesToScroll: 2, initialSlide: 3 } }] }); }); -- ただ、スライドを3枚ずつ移動するようにしているせいか、左に隠れているスライドの数が3枚よりも少ないと左側へスライドすることができません。 これは一度にスライドする数を変更するしかないのでしょうか? よろしくお願いいたします。
kei344

2017/06/18 09:15

同じコメントを別の回答につけるのであれば、質問文に追記するほうが良いです。(あとから見に来た回答者にも見やすいので) > これは一度にスライドする数を変更するしかないのでしょうか? 別のライブラリを試されてみてはいかがでしょう。 【Swiper API】 http://idangero.us/swiper/api/
groco

2017/06/18 09:38 編集

ご指摘ありがとうございます。 次回から質問文に追記させていただきたいと思います。 > 別のライブラリを試されてみてはいかがでしょう。 ありがとうございます。 教えていただいたライブラリを試してみます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問