Обновление до bootstrap 4.2.1 и carousel?

Question

[lumb]

После обновления bootstrap 4.0.0 до 4.2.1 карусель выводится криво, ищу почему и не нахожу.
Посмотрите, кто может
было
https://codepen.io/kamenos96/pen/LQMxRe
стало
https://codepen.io/lumb/pen/jdNVgW

Comments

[Rustam Bainazarov]

«Обновил Bootstrap… хм, что же могло пойти не так?..»

[Сергей Горячев]

SmthTo, нет, ты точно зло :)

[lumb]

Сергей Горячев, Не следует путать детство в жопе со злом, - это совсем разные вещи.

[Rustam Bainazarov]

Сергей Горячев, зло — не я, а Bootstrap.

lumb, детство в жопе — использовать слайдер Bootstrap'a, который даже свайп нормально не поддерживает. Используйте нормальный плагин, к примеру, Swiper или Slick — и будет у вас нормальный и независимый от Bootstrap'a плагин карусели/слайдера для всего и вся.

[Rustam Bainazarov]

idangero.us/swiper (Vanilla JS)

kenwheeler.github.io/slick (jQuery).

[lumb]

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

[Rustam Bainazarov]

lumb, поверьте, я не имею ничего против Bootstrap'a, когда дело доходит до CSS. Да, я не использую его, но он не так плох, это факт.

Но то ли дело — скрипты, которые включены в его состав. Они несовременные и полу-костыльные. На загрузку Swiper или Slick ваши пользователи потратят не так много времени (даже очень мало), зато получат быстрый и хороший слайдер, а вы — возможность легко и без проблем создавать такие вещи, не боясь, что что-то у вас сломается при малейшем обновлении CSS-фреймворка.

Плюс, не факт, что скрипт для слайдера из Bootstrap инициализируется быстрее того же Slick. В конечном итоге, в силу оптимизации Slick может отразиться быстрее, чем Bootstrap'овская шняга.

[lumb]

Возможно, но вопрос в разделе css и почему вы переключились на скрипты - не понятно.
Вся проблема в том, что в обновленной версии bs4 вместо 3 cards в слое выводится только одна и вряд ли это как-то связано со скриптами.

[Rustam Bainazarov]

lumb, смотрите, почему я о скриптах.

Там проблема следующая: CSS-стили контролируют поведение и переключение слайдера там, где они этого делать не должны. Нормальный скрипт создаёт родительский контейнер, который он с помощью translateX перемещает для смещения позиции слайдера на основе общего количества слайдов и их количества на одном экране.

В вашем примере используются классы, относительные селекторы и т. п. для этого дела. Неудивительно, что это всё сломается, стоит только тронуть. Посмотрите, на исходники Swiper: там CSS отвечает только за внешний вид кнопок, слайдов, буллитов (тени и тому прочее) — и это правильно.

Update. Наверное, они хотели сделать забавный эффект смещения предпоследнего слайда при прокрутке в обратную сторону, но сделали это с помощью CSS. Не совсем в этом вопросе правильное решение.