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

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

新規登録して質問してみよう
ただいま回答率
85.50%
jQueryプラグイン

jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

jQuery

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

Q&A

1回答

7141閲覧

slickのオプション「initialSlide」を動的に変更したい

freedomman

総合スコア25

jQueryプラグイン

jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

jQuery

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

0グッド

0クリップ

投稿2018/05/21 02:41

編集2022/01/12 10:55

前提・実現したいこと

お世話になります。
現在slickのライブラリを使用した、カルーセルを作成しております。
やりたいことですが、ウィンドウサイズをスマホサイズ(768px以下)にリサイズした場合、
「initialSlide」を2枚目のスライド(initialSlide: 1)にしたいのですが、うまくできません。
お手数ですが、どなたかご教授よろしくお願いいたします。

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

リサイズしたときにスライダーの表示順を変更したいのですが、

PC/タブレットのウィンドウサイズでloadした場合 = 1枚目から表示される(OK)
SPサイズ(768px以下)のウィンドウサイズでloadした場合 = 2枚目のスライダーが中央に表示される(OK)

SPサイズからPC/タブレットにリサイズした場合 = 1枚目から表示したい(NG)
PC/タブレットサイズからSPサイズにリサイズした場合 = 2枚目のスライダーが中央に表示される(NG)

となっております。

該当のソースコード

HTML

1 <div class="slider center"> 2 <div> 3 <img src="http://placehold.it/350x100?text=1"> 4 </div> 5 <div> 6 <img src="http://placehold.it/350x100?text=2"> 7 </div> 8 <div> 9 <img src="http://placehold.it/350x100?text=3"> 10 </div> 11 <div> 12 <img src="http://placehold.it/350x100?text=4"> 13 </div> 14 </div>

javaScript

1<script> 2 (function ($) { 3 $(function () { 4 $slick_slider = $('.center'); 5 settings = { 6 //PC/Tab設定 7 arrows: true, 8 infinite: true, 9 slidesToShow: 3, 10 initialSlide: 0, 11 // SP設定 12 responsive: [{ 13 breakpoint: 769, 14 settings: { 15 arrows: false, 16 centerMode: true, 17 centerPadding: '10%', 18 initialSlide: 1, 19 slidesToShow: 1, 20 } 21 }] 22 } 23 $slick_slider.slick(settings); 24 }); 25 })(jQuery); 26</script>

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

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

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

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

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

m.ts10806

2018/05/21 02:44

「うまく動作しない」「うまくいかない」では何が起きているか伝わりません。「○○のようになるはずなのに××となってしまう」のような形で「ゴール」と「現象(エラーメッセージなども含む)」を明確にしてください。https://teratail.com/help/question-tips#questionTips3-4-1
freedomman

2018/05/21 03:21

レスありがとうございます。現在起きている現象を追加しました。よろしくお願いいたします。
guest

回答1

0

動作検証をしていませんが、まぁこういうことがしたいのかなと思います。
ウィンドウのロード、またはリサイズのたびにウィンドウサイズを取得して、
一定以下だったらこの処理、みたいにすれば良いと思いますよ。

たしかに追記・修正依頼に書いてあったように、うまくいかなかったポイントを
コードを含めて詳細に書くことが回答をもらう近道なので
ぜひ次に質問をする機会があれば、そのようにすると良いでしょう。

javascript

1(function ($) { 2 $(window).on('load resize', function(){ 3 4 //ウィンドウサイズを取得 5 $width = $(window).width(); 6 //ウィンドウサイズによって値を変更 7 if($width > 768){ 8 $slide_num = 2; 9 }else{ 10 $slide_num = 1; 11 } 12 13 $slick_slider = $('.center'); 14 settings = { 15 //PC/Tab設定 16 arrows: true, 17 infinite: true, 18 slidesToShow: 3, 19 // SP設定 20 responsive: [{ 21 breakpoint: 769, 22 settings: { 23 arrows: false, 24 centerMode: true, 25 centerPadding: '10%', 26 initialSlide: $width,//値を設定 27 slidesToShow: 1, 28 } 29 }] 30 } 31 $slick_slider.slick(settings); 32 }); 33})(jQuery);

投稿2018/05/21 03:09

stampdoor

総合スコア483

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問