スライダーのドットナビ１つに対して複数の画像を設定することは可能でしょうか

前提・実現したいこと

通常スライダーの画像とドットナビの数は1:1ですが、
例えば６枚の画像（A1～C2)に対してドットナビを半分の３つにすることは可能でしょうか
調べてみましたが類似質問やサンプルなども見つからなかったので質問しました。

添付画像のような流れにしたいです。

sliderはslick sliderしか使ったことがないので slickで実現出来ればベストですが
別のスライダープラグインでも希望動作が可能なら取り入れたいと考えています。
slickでは無理だというような意見だけでも助かりますのでご存じの方お願いいたします。

試したこと

1→2に変化するgifを作成しスライダーに設定しようとも考えましたがスライダーの速度を変更した際に
gifも作り直す必要があるため断念しました。

仕様と経緯

・実際は画像が12枚ありすべてを見てほしい　(1と2は関係性のある差分）
・ドットが12個並ぶのは見栄えはよくない、また見る気が失せるのではないか
・当初は動画やgifで対応しようとしたが動作が重くなるので断念

上記の点からこのような仕様でコーディング可能かデザイナーから確認がありました。
現在は実現可能か引き続き調査しながら
代替案としてドットを無くし、全体枚数と現在のスライド番号(1/12など)とprev、nextボタンの設置で打診中です。

ドットを押したときの挙動ですが
１番目ならA1、２番ならB1、3番目ならC1が表示されるようにしたいです。

追記コード(間引き)

customPaging: function(slider, i) {
  if(i % 2 == 0) {
    return $('<button type="button" />');
  }
},

追記コード(奇数偶数による表示切替)

index.html

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <meta http-equiv="X-UA-Compatible" content="ie=edge">
7  <title>Document</title>
8  <link href="css/reset.css" rel="stylesheet">
9  <link href="css/slick.css" rel="stylesheet">
10  <link rel="stylesheet" type="text/css" href="css/slick-theme.css">
11  <link rel="stylesheet" type="text/css" href="css/style.css">
12</head>
13<body>
14  <div class="hero">
15    <div class="dots"></div>
16    <section class="slide_test">
17      <div class="slide_img img01"></div>
18      <div class="slide_img img02"></div>
19      <div class="slide_img img03"></div>
20      <div class="slide_img img04"></div>
21      <div class="slide_img img05"></div>
22      <div class="slide_img img06"></div>
23    </section>
24  </div>
25
26
27<script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
28<script src="js/slick.min.js"></script>
29<script src="js/slider-conf.js"></script>
30
31</body>
32</html>

style.css

css
1img {
2  max-width: 100%;
3  height: auto;
4}
5.hero {
6  position: relative;
7
8}
9
10.dots {
11  position: absolute;
12  right: 50px;
13  bottom: 80px;
14}
15.slick-dots {
16  z-index: 2;
17}
18
19.slide_test {
20  position: relative;
21}
22
23.slide_img {
24  background-size: cover;
25  background-position: center center;
26  background-repeat: no-repeat;
27  overflow: hidden;
28  width: 100%;
29  height: 100vh;
30}
31
32.img01 {
33  background-image: url(http://placehold.it/1920x1080?text=A1);
34}
35.img02 {
36  background-image: url(http://placehold.it/1920x1080?text=A2);
37}
38.img03 {
39  background-image: url(http://placehold.it/1920x1080?text=B1);
40}
41.img04 {
42  background-image: url(http://placehold.it/1920x1080?text=B2);
43}
44.img05 {
45  background-image: url(http://placehold.it/1920x1080?text=C1);
46}
47.img06 {
48  background-image: url(http://placehold.it/1920x1080?text=C2);
49}
50

slider-cong.js

javascript
1$(document).on('ready', function() {
2    $('.slide_test').slick({
3      arrows: false,
4      dots: true,
5      appendDots: $('.dots'),
6      autoplay: true,
7      autoplaySpeed: 1000,
8  　});
9  
10  // $(".slick-dots > li:nth-child(odd)").show();
11  $(".slick-dots > li:nth-child(even)").hide();
12
13  $('.slide_test').on('afterChange', function(slick, currentSlide){
14    $(".slick-dots > li:nth-child(odd)").toggle();
15    $(".slick-dots > li:nth-child(even)").toggle();
16  });
17});

slick-theme.css

css
1.slick-dots
2{
3    position: absolute;
4    /* bottom: -25px; */
5

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

回答2件

slickスライダーのdotsを数字にカスタマイズしたいでも回答したんですが、
customPagingを使えば出来そうだと思います。

Dotに複数の画像を割り当てるのは難しいです（無理？）が、Dotを間引いて生成すれば良いと思います。
以下を修正して、1つ飛ばしでDotを生成すれば要望に合いませんか？

JS
1$('.slider').slick({
2  customPaging: function(slider, i) {
3    return $('<button type="button" />').text(i + 1);
4  },
5  dots: true,
6});

投稿2019/10/29 14:10

編集2019/10/29 14:19

oikashinoa

総合スコア2826

seibi02

2019/10/30 08:17

回答ありがとうございます。間引き方がわからないので自分なりに書いてみた結果（コード追記しました）以下の問題に当たりました。・ドットの間隔が間引いた分空いてしまう・画像の２、４、６番目にスライドしたときドットに色がつかない・見えないだけで２、４、６番目のドットがクリック出来てしまうもしこれらの問題を解決できる間引き方がありましたら教えていただけないでしょうか。

oikashinoa

2019/10/31 03:08 編集

間引き方は正しいです。奇数のドットだけ出ると思います。(returnで返している<button>は適宜直してください。) でしたら間引かずに、ドットを最初は偶数箇所をCSS で隠して、画像切り替えられたら奇数を隠してみては？最初と最後を繋げてループさせるなら、最後にダミー画像を追加して常に偶数になるようにしてみてください https://developer.mozilla.org/ja/docs/Web/CSS/:nth-child https://tr.you84815.space/slick/events/swipe.html うまく行かなかったときは出力されたhtmlも合わせて貼ると考えやすいので本文に貼ってください

oikashinoa

2019/10/30 11:57

逆に質問ですが、ドットをクリックした時の動きはどう考えてます？表示しているドットの数と画像が異なるのかと思ってます（動いたらスクショ貼って欲しい）が、ユーザーが混乱しませんかね？このような仕様を検討した理由を質問本文に追記すると他の人からも意見もらえると思いますよ

seibi02

2019/10/31 12:22

すみませんドットの挙動について失念しておりましたので仕様と経緯を記載いたしました。ドットの仕様上、表示非表示の切り替えでは再現不可能だったんですがかなり近い形で再現できたので一応コードも記載いたしました。何度もお付き合い頂きありがとうございます。

oikashinoa

2019/10/31 12:40

経緯確認しました。他のも見つけたので、別回答にて。

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