axrising
@axrising

Как добавить отступы для слайдов в JavaScript?

Здравствуйте, помогите решить задачу. Еще не разобрался полностью со слайдерами в Js и прошу вашей помощи, заранее спасибо

Как добавить отступы между слайдами в карусели. И сделать ширину самих слайдов 370px (сейчас стоит flex: 0 0 33.33333%)? Должно вместиться 3 слайда с небольшими отступами как по макету

  • Вопрос задан
  • 151 просмотр
Решения вопроса 1
@Delta01
@de1ta01 пиши, помогу с вёрсткой =)
Можно поглядеть как должно быть?!
И вы же сами их ограничили min-width: 370px;, поэтому при сужении они не сжимаются меньше или что-то я не понял?)

РЕШЕНИЕ:
1. В стилях прописываем желанный отступ у слайдов, например такой:
.post_item:not(:last-child) {
  margin-right: 20px;
}


2. Далее в js нужно добавить некоторые строки, сначала на 10 строке добавил переменную (имя можете своё), которая будет отвечать за отступ указанный в стилях. А точнее сразу в процентном соотношении.

5f2ee1d295d9f485118671.png

3. Попробовал несколько способов, но пока работает только так, может вы найдете лучше применение. У функций переключения слайдов, добавил строку
this.offsetSlide = ((this.slides[1].offsetLeft - this.slides[0].offsetWidth)*100)/this.main.offsetWidth;
, то есть по клику на кнопки высчитываем процентное соотношение отступа. Пришлось добавить её и для кнопки назад и вперед (81 и 97 строки).

4. И последнее, этот процент добавляем к полученной ширине слайда в процентах (86 и 102 строки).

5f2ee5a9bf2c6957233043.png

P.S: Найдете решение лучше, дайте знать. Всегда интересно поучится тому, что будет лучше))
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

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