レスポンシブで要素の間隔を固定したスライダーの設置

前提・実現したいこと

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件

ベストアンサー

「slick」でなくても他のプラグインでも問題ありません。

Swiper の下記デモページにある「Centered Slides」で質問文に書かれているような処理になりませんか？

【Swiper Demos】
https://idangero.us/swiper/demos/

投稿2019/03/30 12:33

編集2019/03/30 12:34

kei344

総合スコア69407

w5487

2019/03/30 12:58

ありがとうございます。教えていただいたサイトでデモを確認しました。うまくいくかもしれませんので、試してみます。重ねてありがとうございました。

w5487

2019/03/31 01:44

解決した内容を書いた方が良いと思いますので、備忘録も兼ねて記します。「Swiper」は「slick」と違って</body>の上に設置しなければなりません。 <script src=".../swiper.min.js"></script> <script>　 var swiper = new Swiper('.swiper-container', { slidesPerView: 5, spaceBetween: 50, navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, loop: true, autoplay: { delay: 4000, disableOnInteraction: true }, }); </script> コードの参考URLはこちら https://github.com/nolimits4web/Swiper/blob/master/demos/380-responsive-breakpoints.html まだ細かい調整は必要ですが、こんな感じで解決しました。自分で解決策を探していたら見つからなかったと思いますし、膨大な時間を要したと思います。本当にありがとうございます。

行動規範の内容に同意します