[Bug]: width calculation fails with bootstrap cards

[edskeizer]

Issue description:
When using the card component from Bootstrap 4 (and other nested HTML) in a slide, the width calculation of the slider (as a whole) is incorrect. As to be seen in my codepen (see below), I want to have 6 slides visible, but only 2 or 3 are in the viewport. The slider works as normal. When I remove the Bootstrap css, the slider behaves normally. Also, when removing the '.row' div, the slider behaves normally.

I don't know if this is exactly related to the row/card layout, or if it is more related to flex-box layout, but something goes wrong here. Please help!

Demo link/slider setting:
https://codepen.io/edskeizer/pen/xxGdzpq

Tiny-slider version: 2.9.2 Browser name && version: Multiple, tested on Chrome Version 80.0.3987.122, Safari Version 13.0.5 (14608.5.12), Brave Version 1.4.95 Chromium: 80.0.3987.122 (Official Build) (64-bit) OS name && version: macOS Mojave v10.14.6

[girdzijauskas]

From my experience the slider doesn't (and probably shouldn't) play well with display: flex.

Flexbox will try to fit all the items according to its own calculations, and then the slider also tries to display a specific number of items - it's like 2 different things trying to be in charge of the same calculations, both trying to enforce their own results.

If you look at the .row class, the only things it gives you are:

display: flex - which you don't need, since you can set the number of items using Tiny Slider itself (and use responsive settings as well),

flex-wrap: wrap - which is just column behaviour, which you also don't need in a slider,

and negative margins, which balance the container padding - you can achieve this yourself depending on the layout you need (by removing container padding, using viewport max on the slider or something else).

So everything the .row class gives you is not needed (and in this case actually breaks the layout!).

The one scenario where you might need it is when the slider is disabled on certain resolutions - this is where you should use d-lg-flex or similar utility classes from bootstrap to only apply display:flex on the resolutions you want, and use the responsive settings from the slider to enable the slider on the other resolutions - that is what I usually do.

[rch77]

It would be much easier if tiny-slider would just work with existing bootstrap layouts. You may remove "row" class but then you will get broken layout or layout shifts and misaligned items until javascript loads, possibly later. "Slick" slider works with bootstrap as is. A workaround for now may be to add css:

.tns-wrapper-negative {margin-left:-15px;margin-right:-15px;}
.tns-wrapper-negative .row {margin-left:0;margin-right:0;}
div .tns-item {flex:none;}

But it requires extra <div class="tns-wrapper-negative"> wrapper around the slider container/bootstrap row.