Как реализовать такой слайдер?

Question

[Олег Андрианов]

За основу взял swiper slider, связь слайдеров через thumbs
Изображения мотоциклов это слайдер(кэп), временная лента - как ее реализовать?
Делал временную ленту:
1) пагинацией. Но так и не понял как сделать ее лентой, т.е. чтобы она прокручивалась как слайдер только во freeMode, поэтому решил делать
2) другим слайдером. Слайды писал не вручную, а через virtual -> renderSlides, но у виртуальных слайдов нельзя сделать slidesPerView: auto. Да и вопрос реализации вертикальных фракций между годами остается открытым.
Дело в том, что не хочется писать вручную временную ленту, это куча кода.
Есть идеи, как можно реализовать это? именно логика, и как быть с делениями на временной шкале, их тоже хочется сделать.

Answer 1

[artloveyou]

другим слайдером

это каким?, больше шансов найти ответ - указать что именно используешь, тогда тот кто с этим знаком сможет подсказать.

Comments

[Олег Андрианов]

я написал что использую swiper. прошу прощения, если неясно выразился. другим слайдером, то есть создал новый экземпляр swiper, в котором слайды - это годы из временной шкалы

[artloveyou]

Олег Андрианов, чудес не бывает, представленный скрин = уникальный код (не всегда много, хотя обычно да). Я юзаю тоже свайпер. Деления сначала пишешь отдельно, да в том же кодпене, судя по всему они у тебя ещё и анимировано прокручиваются при переключении слайда = прописываешь там transition для этого. Потом видимо надо ловить события свайпера и прокручивать таймлайн (деления) по событию становления нового слайда активным. Наверное надо будет посмотреть в api https://swiperjs.com/swiper-api как привязаться к этому событию. Да и тонкости возникнут - тайм лайн сразу прокручивается или с задержкой приезжает нужный год. когда актуальный слайд уже активен. Хотя это дело вкуса.

[Олег Андрианов]

artloveyou, я не прошу написать мне слайдер, я прошу совета в плане логики, может каких-то идей, может кто-то уже делал подобное, я не знаю. и я не уповаю на чудеса, боже упаси.

[artloveyou]

ну там есть

swiper.activeIndex	number	
Index number of currently active slide

вот тут
https://swiperjs.com/swiper-api#prop-swiper-activeIndex

возможно в твоем случае это мог бы быть массив с моциками и датами

[
{slide: 1, moto: 1.jpg, year: 1934},
{slide: 2, moto: 2.jpg, year: 2005},
{slide: 3, moto: 3.jpg, year: 2007},
]

Я бы с этого начал.

А дальше прослушивание активного слайда
если слайд 1 -> моцик 1 -> год 1
если слайд 2 -> моцик 2 -> год 2

Ты в чём это делаешь? На vanilla или vue, react etc.

[Олег Андрианов]

artloveyou, идея хорошая, вопрос в том, как связать таймлайн и необходимые годы. я уже подумал, может быть сделать фракции как background к swiper-wrapper, но...как то костыльно чтоле. это же два отдельных контекста - фракции и годы.

[Олег Андрианов]

artloveyou, да, я вытаскиваю год и имя байка из массива через шаблонные строки, затык с совмещением фракций и ключевых годов.

[Олег Андрианов]

artloveyou, пишу на ванильке

[artloveyou]

Не совсем понял "как связать таймлайн". Твой тайм-лайн, так скажем, художественого толка, с рандомными интервалами по датам и постоянным рисунком полосок. Соответствено надо нарисовать полоски с пойнтами (там где даты проставляются) и всё. Даты подставить объектом js. По сути это горизонтальная линия с пятью пойнтами. Остальное (вертикальные полоски) - декорация. На css - горизонтальная линия невидимый div, вертикальные полоски - видимые дивы, распределенные по основанию.

[Олег Андрианов]

artloveyou, в моем случае это 18 поинтов, я думаю это можно будет сделать через цикл. Надо подумать. Спасибо за идею.

[artloveyou]

Вот к этому привязывай смену слайда и таймлайна

const swiper = new Swiper('.swiper', {
  // ...
});
swiper.on('slideChange', function () {
  console.log('slide changed');
});

https://swiperjs.com/swiper-api#events

[artloveyou]

https://codepen.io/jakub/pen/vrKRvB
Таймлайн может быть вторым свайпером с несколькими слайдами в основном контейнере.

Пример когда по thumbnail кликаем и получаем слайд https://jsfiddle.net/GabrielS0uza/cuagh0ow/

[Олег Андрианов]

artloveyou, это я уже делал. Ради эксперимента хочу сделать таймлайн с каждым годом от 1946 до 2021.
Собственно, проблема в том, что расстояние между каждым годом допустим 20 пикселей, а при генерации виртуальных слайдов им невозможно назначить автоширину. А я не хочу делать это вручную, т.е. писать огромный код. Если вам интересно, то сейчас это выглядит так:

const historyTimeline = new SwiperCore(".history__timeline-slider", {
  loop: false,
  speed: 500,
  //spaceBetween: 10,
  slidesPerView: '3',
  //centeredSlides: true,
  freeMode: true,
  virtual: {
    slides: slideCollection,
    cache: true,
    renderSlide: function (slide, index) {
      console.log(bikesYears)
      let currenStamp = bikesYears[index];
      let nextStamp = bikesYears[index + 1];
      console.log(nextStamp);
      let stampRange = [];
      for (let i = +currenStamp + +1; i < nextStamp; i++) {
        let template = `
        <span class="history__stamp-year">
          ${i}
        </span>
        `;
        stampRange.push(template);
      }
      let output = stampRange.join('');

      slide = `<li class="history__stamp swiper-slide">
                <span class="history__stamp-data">
                  ${bikesYears[index]}
                </span>
                ${output}
              </li>`;
      return slide;
    }
  },
});

let hondaLineage = {
  1946: "Model A",
  1949: "Model D",
  1951: "Dream E",
  1953: "Benly J",
  1958: "Super Cub",
  1964: "3RC164",
  1969: "CB750",
  1972: "CR250 Elsinore",
  1974: "Gold Wing GL1000",
  1978: "NR500",
  1986: "VFR750F Interceptor",
  1993: "CBR900RR",
  1995: "EXP-2",
  2002: "RC211V",
  2010: "Fury",
  2013: "CBR500R",
  2018: "Africa Twin",
  2021: "Shadow Phantom",
}

let bikesYears = [];
for (let key in hondaLineage) {
  bikesYears.push(key);
}

В общем, в творческом поиске)
upd: попробую сгенерировать список слайдов циклом вне свайпера, подставить в них значения из массива и уже через параметры свайпера назначить им автоширину.

[artloveyou]

Удачи, творческий поиск всегда хорошо.