Как сделать, чтобы добавлялись переключатели при нехватке места в блоке?

Question

[Кристина]

Здравствуйте!
Как сделать, чтобы при нехватке места для ссылок в блоке, добавлялись кнопки-переключатели, как в слайдере?
https://codepen.io/anon/pen/vdKmRp

Спасибо!

Comments

[Дмитрий]

сделай просто из всего этого слайдер. я бы посоветовал slick и там посмотри как делается адаптивный. по точкам.
и потом при определенном разрешении экрана можно включать и выключать слайдер. или даже проще.

можно только указать показвать 4 элемента а когда меньше 3 и тд. у меня вроде так канало только не помню стрелки исчезали или нет когда все элементы отображаются.

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

короче если от ширины экрана зависит то слайдер и responsive настраивать. А если именно от ширины блока придется пописать еще js порядком и подумать. Другого варианта не знаю.

Answer 1

[Максим Тимофеев]

Вычислять ширину родителя, сравнивать с суммой ширины пунктов + margin + padding, если одно больше другого добавлять стрелки. Или инициализировать какой-то готовый слайдер. Тот же slick или owl. Главное, что бы слайдер умел выводить несколько блоков.

Comments

[Kim_Soal]

а чтобы не вычислять маргины и падинги вместе, в цсс задать border-size

[Максим Тимофеев]

Kim_Soal, нет, скрипт не должен быть зависим от css. Так нельзя делать. Чем меньше зависимостей тем лучше.