Tiny-slider: I see a piece of next slide on the right. Is it some feature or by design?

[mevsme]

How can I fix this?

[matthaeus-dauskonzept]

I've made a fix on it, even though this is a little dirty. The problem is, that there appear rounding errors in the calculation of the slide width. For example in a slider with 3 slides the calculation for each slide equals 33.3333%, so there is 0.0001% width left, which cause the narrow line on the right hand side in some viewports.

The solution (somehow dirty, just as I said) is to round up the last digit in the slidesize-calculation. That means: make it 33.3334% rather than 33.3333%, which results an overflow of 0.0002%, but that doesn't seem to matter anything, due to 'overflow: hidden' in the container.

This will be provided by editing the getSlideWidthStyle() - function to:

function getSlideWidthStyle (fixedWidthTem, gutterTem, itemsTem) {
    var width;

    if (fixedWidthTem) {
      width = (fixedWidthTem + gutterTem) + 'px';
    } else {
      if (!carousel) { itemsTem = Math.floor(itemsTem); }
      var dividend = carousel ? slideCountNew : itemsTem;

      // <-- fix starting from here

      accuracy = 4; // digits after period untouched
      // seperating the number to before- and after-periodnumber
      divBefore = Math.floor(100 / dividend);
      divAfter = (100 / dividend) - divBefore;

      // seperate the first four digits after period from the rest
      divAfterCut = divAfter.toFixed(accuracy);
      divAfterCutRest = divAfter - divAfterCut;

      // calculate the fifth digit after period
      lastDigit = Math.ceil(divAfterCutRest * Math.pow(10, accuracy));

      // append the last digit to the whole number
      quotient = parseInt(divBefore) + parseFloat(divAfterCut) + parseFloat(lastDigit / Math.pow(10, accuracy));

      width = CALC ?
        CALC + '(' + quotient + '%)' :
        quotient + '%';
      // CALC + '(100% / ' + dividend + ')' :
      // 100 / dividend + '%';

      // fix ending here -->

    }
    width = 'width:' + width;

    // inner slider: overwrite outer slider styles
    return nested !== 'inner' ? width + ';' : width + ' !important;';
  }

[ganlanyuan]

@mevsme Hi, what are your slider options?

[leomelzer]

Thanks for the discussion. We are facing the same issue I believe.

Our slider options are:

    tns({
      container,
      lazyload: true,
      items: 2,
      navContainer,
      controlsContainer,
      gutter: 20,
      speed: 400,
      swipeAngle: false,
      responsive: {
        '1280': {
          items: 4
        }
      }
    });

This looks like an issue with rounding pixel values when the innerWidth is uneven (e.g. see issue on 1141px but not 1142px).

When 4 items are in the slider the following CSS is generated (4 items + 2 ghosts = 6 => 100/6 = 16.6667):

#tns2 > .tns-item {
    width: calc(16.6667%);
}

Happy to provide further details or investigate with further ideas. Thanks!

[mevsme]

I could fix my problem with some css widths\paddings\margins values, so I am fine with it for now, thanks! Great plugin!

[leomelzer]

Hi @mevsme, maybe you can share your CSS changes for other people finding this issue :) Thanks!

[cjx2240]

If you still hit this issue, you may have success with the fix from the first post here:

https://github.com/ganlanyuan/tiny-slider/issues/278

Both issues relate to the % width calculations