前提・実現したいこと
WordPressサイト内にレスポンシブに対応した子要素の間隔が一定なスライダーを作りたいと思っています。
現在はjQueryの「slick」を利用して
responsive: []
で画面幅毎に細かく設定しています。
例えばスライダーをレスポンシブで表示させる親要素をmax-width:1000pxとして、横にスライドする子要素の幅を200pxとして、その子要素と子要素の間隔を10pxとして、スライダーを設置したいと思っています。
子要素の中には画像や文字など孫要素が複数含まれます。
画面幅が800pxでも500pxでもその幅の中に子要素が一定間隔で横に移動しながら表示されるようにしたいと思っています。
子要素はWP-Queryで取得したカスタム投稿の情報をスライダーで表示させ増えていくので、CSSのアニメーションで作るスライダーでは難しいかと思っています。
「slick」でなくても他のプラグインでも問題ありません。
発生している問題・エラーメッセージ
「slick」は表示させる要素の数を設定できます。
しかしそれだと閲覧者の画面のサイズによって子要素の間隔が違ってしまいます。
親要素に表示される子要素の数はいくつでもいいのですが、親要素の幅の中に等間隔で子要素が表示できるようにしたいと思っています。
該当のソースコード
jQuery
1<script> 2jQuery(document).ready(function(){ 3 jQuery('.slider').slick({ 4 autoplay: true, 5 infinite: true, 6 centerMode:true, 7 slidesToShow: 5, 8 slidesToScroll: 5, 9 autoplaySpeed:4000, 10 prevArrow:'<div class="prev">PREV</div>', 11 nextArrow:'<div class="next">NEXT</div>', 12 responsive: [ 13 { 14 breakpoint: 1590, 15 settings: { 16 centerPadding: '10%', 17 slidesToShow: 4, 18 slidesToScroll: 4 19 } 20 }, 21 { 22 breakpoint: 1470, 23 settings: { 24 centerPadding: '8%', 25 slidesToShow: 4, 26 slidesToScroll: 4 27 } 28 }, 29 { 30 breakpoint: 1350, 31 settings: { 32 centerPadding: '2%', 33 slidesToShow: 4, 34 slidesToScroll: 4 35 } 36 }, 37 { 38 breakpoint: 1240, 39 settings: { 40 centerPadding: '10%', 41 slidesToShow: 3, 42 slidesToScroll: 3 43 } 44 }, 45 { 46 breakpoint: 1150, 47 settings: { 48 centerPadding: '5%', 49 slidesToShow: 3, 50 slidesToScroll: 3 51 } 52 }, 53 { 54 breakpoint: 970, 55 settings: { 56 centerPadding: '15%', 57 slidesToShow: 2, 58 slidesToScroll: 2 59 } 60 }, 61 { 62 breakpoint: 850, 63 settings: { 64 centerPadding: '5%', 65 slidesToShow: 2, 66 slidesToScroll: 2 67 } 68 }, 69 { 70 breakpoint: 750, 71 settings: { 72 centerPadding: '5%', 73 slidesToShow: 1, 74 slidesToScroll: 1 75 } 76 }, 77 { 78 breakpoint: 700, 79 settings: { 80 centerPadding: '25%', 81 slidesToShow: 1, 82 slidesToScroll: 1 83 } 84 }, 85 { 86 breakpoint: 600, 87 settings: { 88 centerPadding: '15%', 89 slidesToShow: 1, 90 slidesToScroll: 1 91 } 92 }, 93 { 94 breakpoint: 450, 95 settings: { 96 centerPadding: '5%', 97 slidesToShow: 1, 98 slidesToScroll: 1 99 } 100 }, 101 { 102 breakpoint: 350, 103 settings: { 104 centerPadding: '1%', 105 slidesToShow: 1, 106 slidesToScroll: 1 107 } 108 } 109 ] 110 }); 111 }); 112</script> 113
試したこと
お恥ずかしいですが画面幅に対応していったら上記のコードの様に長々となってしまいました。
補足情報(FW/ツールのバージョンなど)
今回初めての質問でもしかしたら質問者として何か足りない事があるのかもしれませんが、おおめに見てください。
どうぞよろしくお願いします。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/03/30 12:58
2019/03/31 01:44