Swiper slide, как убрать отступы для стрелок, когда слайдов меньше и скрипт не работает и стрелки не показывает?

Question

[Антон Вебсайтовский]

Вывел стрелки отдельно, по стандарту они шли сверху на картинках.
Появилась проблема, допустим если я поставил чтобы 4 слайда выводило, то скрипт срабатывает и показывает что можно листать и выводит стрелки, а если я удалю одну фотку или пару, то у меня выходит 3-2 слайда и скрипт не срабатывает уже, ибо листать нечего, но как быть с отступами которые остались после стрелок.

Может быть я не правильно реализовал отступы.
Или нужно что-то делать, типа проверку, если стрелки показываются, то делать отступ, применять класс, а если стрелок нет, то не применяем класс.

Кто ставил, кто настраивал и мудрил с этим слайдером Swiper slide
Офф сайт: https://swiperjs.com/

Вот так если слайдера 4 и более. (скрипт работает)


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


Рабочий пример пощупать можно тут:
Пример когда слайдеров меньше и видны отступы.
https://jsfiddle.net/vlit/ag14ju8s/455/

А так когда слайдов хватает и скрипт работает и стрелки показывает.
https://jsfiddle.net/vlit/ag14ju8s/456/

Comments

[Ankhena]

Как делать скажу. За вас делать не буду.

1. Убрать у стрелок абсолют. Оставить в потоке.
2. Располагать флексами. Одну до, другую после. С помощью order или поменять в коде.

Всё.

[Антон Вебсайтовский]

Ankhena, есть вариант, вернуть как было ), когда стрелки поверх фоток ), но фотки мелкие и стрелки по этому я вывел.

А ты точно поняла от чего отступы?

.swiperc{
width: 100%;
position: relative;
margin: 0 auto;
}
.swiper {
  width: 80%;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  overflow: hidden;
  list-style: none;
  padding: 0;
  z-index: 1;
}

Суть проста, блок с фотками он по центру и у него 80%, чтобы сделать с боков отступы, делал я по примерку как многие делали, а див с классом поверх этих слайдов .swiperc, там 100% там и стрелки.

[Антон Вебсайтовский]

Я уже понял о чем ты мне, значит есть левая стрелка, есть правая и между ними есть блок слайдами, левой стрелке я кидаю ордер 1, правой стрелке ордер 3, а блоку со слайдами что по середине я кидаю ордер 3.
Далее блоку со стрелками я кидаю флекс и центрирование по вертикали алигн.

Решение на самом деле очень простое, а то я думал надо будет мудрить )
Спасибо.

Вот так: https://jsfiddle.net/vlit/ag14ju8s/465/
Ток чет у меня стрелки малость деформировались.

[Ankhena]

Антон Вебсайтовский, класс.
Достаточно левой стрелке order -1.
Остальное и так в правильном порядке стоит.

[Антон Вебсайтовский]

а зачем order -1, если у меня в линию 3 объекта и я распределил их через нумерацию ордер, тож же правильно как я сделал.

Answer 1

[Антон Вебсайтовский]

Вообщем кому надо, вот решение, https://jsfiddle.net/vlit/ag14ju8s/468/
Стрелки там еще чуть изменил.