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

Question

[Alexander]

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

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

Answer 1

[Николай]

Можно поглядеть как должно быть?!
И вы же сами их ограничили min-width: 370px;, поэтому при сужении они не сжимаются меньше или что-то я не понял?)

РЕШЕНИЕ:
1. В стилях прописываем желанный отступ у слайдов, например такой:

.post_item:not(:last-child) {
  margin-right: 20px;
}

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



3. Попробовал несколько способов, но пока работает только так, может вы найдете лучше применение. У функций переключения слайдов, добавил строку

this.offsetSlide = ((this.slides[1].offsetLeft - this.slides[0].offsetWidth)*100)/this.main.offsetWidth;

, то есть по клику на кнопки высчитываем процентное соотношение отступа. Пришлось добавить её и для кнопки назад и вперед (81 и 97 строки).

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



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

Comments

[Alexander]

Извиняюсь, я забыл удалить это значение. Ширина слайдов прописана в js

.glo-slider__item {
                flex: 0 0 ${this.options.widthSlide}%;
            }

Нужно просто прописать отступы между ними используя margin либо что-то другое, чтобы слайдер правильно подсчитывал ширину и отступы вместе взятые

[Николай]

Александр Лисовский, проще тогда в слайде задать padding, это и будет служить отступами между слайдами, а весь остальной контент поместить в блок внутри слайда

[Alexander]

Николай, да работает. Вот только хотелось бы в JS это решить, но все же спасибо большое!

[Николай]

Александр Лисовский, что в js решить?))

[Alexander]

Николай, Добавить margin. Не люблю создавать большую вложенность в css ради отступов)
Кстати вот ссылка на видео об этом слайдере, там он говорит как это можно сделать на 1:20:00,
только у меня ещё не хватает знаний сделать это
https://www.youtube.com/watch?v=c5--bmtCCVo

[Николай]

Александр Лисовский, через часа два я где-то освобожусь, если не найдете способ пишите, помогу чем смогу))

[Alexander]

Николай, хорошо, спасибо

[Николай]

Александр Лисовский, получилось воплатить?

Добавил решение вам!

[Alexander]

Николай, работает, спасибо большое!)