Tiny-slider: Center slide horizontally at breakpoint

[rod]

__Issue description__:
Just updated from v2.6.0 and noticed that the responsive behavior has changed from the active slide remaining centered to being left aligned at the breakpoint.

source markup:

<div class="slider-container relative">
    <ul class="p-0 py-8 m-0 mb-8 list" data-testimonial-slider>
        {{ testimonials_card }}
        <li class="slide">
            <div class="flex br-2 bs-solid bw-1 bc-ocean-40 bg-white bs-soft grab ov-hidden slide-content">
                <div class="m--flex-grow-1 m--w-50 bg-slate-40 bg-center bg-cover" style="background-image: url('{{ image }}');"></div>

                <div class="px-4 py-8 m--flex-grow-1 m--w-50">
                    <img src="{{ logo }}" class="block h-2 w-auto mb-8">
                    <h4 class="title lh-4 fs-5 m-0 mb-4">{{ heading }}</h4>
                    <blockquote class="fs-3 body lh-3 slate-80 m-0 mb-8">
                        {{ quote | markdown }}
                        <cite class="fs-normal">&mdash; {{ cite }}</cite>
                    </blockquote>

                    <a href="{{ link_url }}" class="body link ocean fs-4 fw-500 hover-link-border bc-ocean">
                  {{ link_text }}
                  <i class="rarr bc-ocean"></i>
                </a>
                </div>
            </div>
        </li>
        {{ /testimonials_card }}
    </ul>
</div>

source js:

import { tns } from 'tiny-slider/src/tiny-slider.module'

const spacer = 16
const spacer2 = spacer * 2

const slider = tns({
  container: '[data-testimonial-slider]',
  controls: false,
  edgePadding: spacer,
  gutter: spacer,
  items: 1,
  mouseDrag: true,
  navContainer: '[data-testimonial-slider-nav]',
  slideBy: 'page',
  speed: 600,

  responsive: {
    720: {
      edgePadding: spacer,
      fixedWidth: (spacer * 45) - (spacer2 * 2),
    },
  },
})

export default slider

Production markup producing desirable behavior via [email protected]

<div class="slider-container relative">
    <div class="tns-outer tns-ovh">
        <div class="tns-inner" id="tns1-iw" style="margin: 0px 168px;">
            <ul class="p-0 py-8 m-0 mb-8 list tns-slider tns-carousel tns-subpixel tns-calc tns-horizontal" data-testimonial-slider="" id="tns1" style="transform: translateX(-4224px);">
                <li class="slide tns-item" aria-hidden="true" tabindex="-1">...

Production markup producing undesirable behavior via [email protected]

<div class="slider-container relative">
    <div class="tns-outer" id="tns1-ow">
        <div class="tns-ovh">
            <div class="tns-inner" id="tns1-iw">
                <ul class="p-0 py-8 m-0 mb-8 list tns-slider tns-carousel tns-subpixel tns-calc tns-horizontal" data-testimonial-slider="" id="tns1" style="transform: translate3d(-4704px, 0px, 0px); transition-duration: 0s;">
                    <li class="slide tns-item" aria-hidden="true" tabindex="-1">...

From what I can tell the the margin style is no longer being applied to the element #tns1-iw element. Was there a new method for centering slides that undocumented?

__Demo link/slider setting__:
Left align (undesirable) behavior:

Centered (desirable) behavior: https://www.activecampaign.com/

_Tiny-slider version_:
2.8.6

_Browser name && version_:
Chrome Version 68.0.3440.106

_OS name && version_:
macOS High Sierra 10.13.6

[ganlanyuan]

Sorry for the confusion, but the original gutter feature is not correctly implemented. It added gutter on both sides and also center the active slide.
I plan to add a new center option so the 2 features are not mixed.

[nuno360]

Any news about this bug? some workaround?

[k-sav]

x2

[ganlanyuan]

I'm working on it.

[ganlanyuan]

You can start testing this feature with the latest commit. Use it like:

var slider = tns({
  container: '.non-loop-h',
  items: 4,
  center: true,
  gutter: 10,
  loop: false,
  responsive: {
    700: {
      center: false,
    },
    1000: {
      center: true,
    }
  }
});

Right now it's not available for vertical and gallery.

[nuno360]

Thank you for fixing this.

The Horizontal center is ok, but the paging is wrong.

Please check here: https://codepen.io/nunoguerra/pen/mQBeML

[ganlanyuan]

@nunoguerra Paging issue is fixed in this commit

[ganlanyuan]

center feature was added in v2.9.0. I will close this issue.
Please open ones if some center related issues are discovered.
Thank you