Как сделать слайдер как на сайте apple.com?

Question

[Gennady Dorokhin]

Всем привет.
Ищу готовый скрипт или какой то мануал как сделать слайдер по типу https://www.apple.com/airpods-pro/

Comments

[VoidVolker]

Gennady Dorokhin и на каком этапе поисков или создания слайдера у вас возникли трудности? Что именно не получается?

[Evgeny Solovev]

Думается, что реализаций может быть сколько угодно.
В данном случае:
Есть контейнер с вложенными карточками.
Карточки позиционируются с помощью CSS.
Так же есть контроллер слайдера, который меняет стейт.

Какой конкретно пункт вас поставил в тупик?

[Gennady Dorokhin]

VoidVolker, Evgeny Solovev, мы ищем просто готовый скрипт что бы использовать. Но что то найти не можем. Сижу щас codepen.io просматриваю, но ничего похожего не попадается на глаза.
С нуля написать знаний не хватает, буду рад если поможете с этим, возможно за вознаграждение.

[Михаил Р.]

Gennady Dorokhin, на фриланс!

[sergski]

https://swiperjs.com/demos + промтами в любой копилот допиливаете любой каприз

[Gennady Dorokhin]

sergski, тут смотрел. Есть похожие, мы их и используем собственно. Но такого как в том блоке-примере нет.

[Froggyweb]

Gennady Dorokhin, использовать 10 слайдеров для каждого дизайна - очень плохая идея.

[Gennady Dorokhin]

Froggyweb, не совсем понял про 10 слайдеров.

[Николай]

Gennady Dorokhin, так а в чем сложность, взять swiper (как посоветовали ранее) и подбить его под такую логику?!

[Gennady Dorokhin]

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

Answer 1

[VoidVolker]

Значит как-то плохо искали: https://github.com/IIvexII/ZHAHGFDAJ — вот оно и есть.

Comments

[Gennady Dorokhin]

Спасибо огромное.
У этого репо нет никакого описания) Как его найти то можно было)

[VoidVolker]

Gennady Dorokhin, открыть исходный код страницы, выбрать первый попавшийся осмысленный класс какого-то элемента галереи, вбить в поиск — не найти ничего, повторить поиск в гитхабе по коду и сразу получить результат.

Answer 2

[ImagineTables]

1. Взять любой слайдер, например, старую добрую сову (owl slider)
2. В CSS для активного dot (это обычно div) увеличить ширину, не трогая закругления — вместо кругляша получится горизонтальная палка
3. Анимировать заполненность этой палки (самое тупое — width псевдоэлемента before), указав ту же продолжительность анимации, что и таймер в свойствах слайдера
4. Создать flexbox-контейнер под слайдером, переместить туда контейнер dots
5. Слайдеры обычно умеют создавать кнопку управления (Play/Pause), переместить её в тот же контейнер
6. Стилизовать dots и кнопку управления «под Аппле».