L
L
lagudal2020-10-02 16:26:13
css
lagudal, 2020-10-02 16:26:13

Is it possible to make the ancient carousel on bootstrap 3 adaptive with styles and js?

It so happened that one deeply ingrained plugin used the carousel from bootstrap v3.3.5 yet.
In the plugin settings, in the system admin panel, you can set: enable carousel, speed, number of elements per page, number of columns, autoplay, enable/disable images, image sizes, show navigation.
Well, like this.

{{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"}}

At the same time, of all these parameters, only interval and autoplay are js parameters of the bootstrap itself. (autoplay corresponds to the auto parameter.)
The following js is generated -
$('#carousel').carousel({interval:5000,auto:true,pause:'hover', cycle: true});
  });

The output is complete bullshit. (pen below, just copied from the page one to one).
The most important thing. Elements are scrolled by 4 - at the same time, at a resolution less than 768px (i.e. from col-xs), the same 4 elements remain, only they are already located vertically.
In general, is it possible somehow, using css and js, to make this carousel adaptive? to flip through one by one, do not the elements go down? I see in the examples that it is possible, but how to do what is without changing the html?

Answer the question

In order to leave comments, you need to log in

1 answer(s)
A
Alexey Gnevyshev, 2020-10-02
@iResource

Is it possible to make a responsive carousel on bootstrap 3 with styles and js?

First of all, the answer to the question is - You can!
did)
I see in the examples that it is possible, but how to do what is without changing the html?

Without changing the html at all - it probably won't work. But you can change html through js.
I will add!
It is better to change it with a Function.
And call this function not only at the initial load - but also after each resize (the visitor can turn the phone / tablet).
As far as I remember, I did something like this: at each resize, I determined whether the boundaries of the bootstrap breakpoints were passed. If passed - run a function that, depending on the current width range, rebuilds html in carousels.
There is a working example, if that;)

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question