@lagudal

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

Так получилось, что в одном глубоко въевшемся плагине применена карусель от 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?

  • Вопрос задан
  • 73 просмотра
Пригласить эксперта
Ответы на вопрос 1
iResource
@iResource
Разработчик IR XML2Ozon
Можно ли стилями и js сделать адаптивной карусель на bootstrap 3?

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

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

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

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

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