Eridani
@Eridani
Мимо проходил

Как запузырить такой слайдер?

День добрый. Обычные слайдеры на одну и более картинок делал.
Но вот с этой у меня что-то затык прям, а именно, с первичным позиционированием элементов, никак не могу до логики доскребстись.
4645851698.jpg

5 слайдов в контейнере, прокрутка слайда - 1 шт.
Первый слайд, он же нулевой индекс, должен быть по середине.
Позиционирование слайдов будет осуществляться через transform: translateX.

Первому слайду я как раз выставил центральное положение, т.е. координаты по середине, второму больше на ширину самого слайда, третьему, естественно, тоже больше...
И вот когда 4 и 5ый слайд ушли за пределы контейнеры, который скрыт оверфлоу хайден, в мою башку пришла просто гениальная идея - "Я делаю какую то адскую дичь" и становится стыдно.
В итоге, я получил вот такой вот высер
5818590680.jpg

Что-то я никак не могу понять, как все это заставить нормально позиционироваться, тем более если учесть, что слайдов то у нас не всего 5 будет, а более...Тут я прям как в лужу пернул, чувствую себя недоразвитым, т.к. ничего кроме треша в башку не лезет.

Может у кого есть примерчик реализации похожего, аль что?

Готовые либы не интересуют, т.к. нужен не результат, а сам процесс повышения опыта)
  • Вопрос задан
  • 172 просмотра
Пригласить эксперта
Ответы на вопрос 3
webinar
@webinar
Учим yii: https://youtu.be/-WRMlGHLgRg
Как запузырить такой слайдер?

в графическом редакторе
59cbab49ad7a8656441909.png

Как вариант:
www.responsivejqueryslider.com/carousel.html
https://owlcarousel2.github.io/OwlCarousel2/demos/...
Ответ написан
@LiguidCool
brokensquare.com/Code/jquery-flipster/demo
Обрати внимание, что слева в меню 4 демки.
Ответ написан
Комментировать
@ps1panda
Верстальщик, начинающий front-end
https://owlcarousel2.github.io/OwlCarousel2/

там поиграться с настройками margin
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы