Можно ли стилями и js сделать адаптивной древнюю карусель на bootstrap 3?

Question

[lagudal]

Так получилось, что в одном глубоко въевшемся плагине применена карусель от bootstrap v3.3.5 еще.
В настройках от плагина, в админке системы, можно задать: включить карусель, скорость, кол-во элементов на странице, кол-во колонок, автоплей, включить-выключить картинки, размеры картинок, показать навигацию.
Ну примерно вот так.

{{widget type="Ves\BaseWidget\Block\Widget\Categories" cmsblock="0" catsid="2111,1914,1916,1917,1918,1919,1921,1936" enable_image="1" image_width="150" image_height="150" enable_numbproduct="0" enable_carousel="1" show_navigator="1" autoplay="1" interval="5000" page_limit="4" cols="4" rows="1" template_layout="widget/categories.phtml"}}

При этом из всех этих параметров только interval и autoplay являются параметрами js собственно бутстрапа. (autoplay соотв-ет параметру auto.)
Генерируется вот такой js -

$('#carousel').carousel({interval:5000,auto:true,pause:'hover', cycle: true});
	});

На выходе - полная дичь. (pen ниже, просто скопировал со страницы один в один).
Самое главное. Элементы листаются по 4 - при этом на разрешении меньше 768px( т.е. от col-xs) остаются те же 4 элемента, только располагаются они уже по вертикали.
Вообще можно что ли как-то, с помощью css и js, сделать эту карусель адаптивной? чтобы перелистывалось по одному, не уходили элементы вниз? Я вижу на примерах, что можно, но как сделать то что есть, не меняя html?

Comments

[Danny Arty]

Так он по сути и листает по одному слайду, у вас же 4 блока - это один слайд. А вниз уходят потому что эти 4 элемента - это один row бутстраповский. Если хотите, чтобы были в ряд, просто замените col-xs-12 на col-xs-3)

Answer 1

[Alexey Gnevyshev]

Можно ли стилями и js сделать адаптивной карусель на bootstrap 3?

Прежде всего, ответ на вопрос - Можно!
Делал )

вижу на примерах, что можно, но как сделать то что есть, не меняя html?

Совсем не меняя html - вероятно, не получится. Но можно менять html через js.
Добавлю!
Менять его лучше Функцией.
А эту функцию вызывать не только при начальной загрузке - но и после каждого ресайза (посетитель может повернуть телефон/планшет).
Насколько помню, делал примерно так: при каждом ресайзе определял пройдены ли границы бутстраповских breakpoint-ов. Если пройдены - запуск функции, которая в зависимости от теперешнего диапазона ширины перестраивает html в карусели.
Есть рабочий пример, если что ;)

Comments

[lagudal]

рабочий пример - покажите если можно.
Я смотрю - да, как то таким образом, но мороки там не мало будет.
Вот помню - если не ошибаюсь - что как правило в таких каруселях в скрипт достаточно было добавить параметр responsive: true и все это подтягивалось само собой, так как респонсивность сама по себе была главным условием бутстрапа и его использования.

[Alexey Gnevyshev]

рабочий пример - покажите если можно

https://мкэлектро.рф/welcome
Внизу страницы - карусель с брендами