Tiny-slider: Running a second slider to slide the nav thumbnails - indexing issue.

[dav3evans]

__Issue description__:
Hi! I've got 2 sliders on a page, one showing 1 image, and then another that is linked to the nav thumbnails, so that I can slide through them and click which one I would like to use. I call the second one using the onInit option, so that I can load the first one, before setting up the navigation.

The problem I have, is that if you set the nav slider to show 3 items, and have 4, the indexes become misaligned, so clicking on the second image, in the nav slider, will display the 4th image in the main slider.

If I add 5, the slider works again, if I add 6, it breaks, but the indexes shift slightly again, and seem to remain broken if I add more.

I can rectify this, by changing the mode from "carousel" to "gallery", and then I'm free to add as many as I want.

__Demo link/slider setting__:

var machineGalleryNav = function () {
    tns({
      container: '.js-md-slider-controls',
      items: 3,
      slideBy: 1,
      prevButton: '.js-md-slider-control-prev',
      nextButton: '.js-md-slider-control-next',
      nav: false
    })
  }

  tns({
    container: '.js-md-image-slider',
    items: 1,
    controls: true,
    prevButton: '.js-md-slider-prev',
    nextButton: '.js-md-slider-next',
    slideBy: 1,
    navContainer: '.js-md-slider-controls',
    navAsThumbnails: true,
    onInit: machineGalleryNav,
    responsive: {
      768: {
        controls: false
      }
    }
  })

_Tiny-slider version_: 2.8.6
_Browser name && version_: Chrome: 69.0.3497.92
_OS name && version_: MacOS 10.13.6

[aarree]

Hi @dav3evans,
Probably a bit late... but I had the same Problem and did and did came up with following workaround:

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

export class Slider {
  constructor( selector ) {
    this.slider = tns({
      container: selector,
      items: 1,
      autoHeight: true,
      lazyload: false,
      prevButton: '.controls__prev',
      nextButton: '.controls__next',
      slideBy: 'page',
      loop: true,
      navContainer: '.gallery__thumbnails'
    });

    this.thumbnails = tns({
      container: '.gallery__thumbnails',
      items: 4,
      gutter: 16,
      lazyload: false,
      prevButton: '.controls__prev',
      nextButton: '.controls__next',
      loop: false,
      slideBy: 1,
      nav: false
    });

    this.slider.events.on( 'indexChanged', evt => this.nextSlide( evt ));
  }

  nextSlide( evt ) {
    // hack beacause of strange idexes from tns slider
    const indexToGoTo = evt.index > this.slider.getInfo().slideCount ? 0 : evt.index - 1;

    this.thumbnails.goTo( indexToGoTo );
  }

}

Hope that helps! & best regards

[dav3evans]

The gallery mode was fine for the project I was on at the time, but I do like Tiny Slider so this will be good to have for future implementations, so definitely not too late all. Thanks! 🙌

[ganlanyuan]

Hey, @dav3evans you need set the thumbnails slider loop: false

[aarree]

Hi @ganlanyuan,
but it will not 'restart' without loop: true . You have to manually set the index to have the active thumbnail in focus and also 'respin' back to start. thats why it needs a workaround. It would be better if we could sync both sliders when loop is set to true on both.
regards

[ganlanyuan]

Then it's the same as #245, I don't expect to add this in the near future.

[dav3evans]

I don't think my use case was the same as #245. The second slider is the controls for the first. I think the problem with setting loop to false on the thumbnails slider, is that I also wanted that to be able to scroll through the thumbnails in an infinite loop when you click on the arrows, without them "restarting" from the beginning. This scrolling through the thumbnails doesn't need to link to main slider though, I only want the main slider to move when I click on a thumbnail.

As mentioned in my original report on the issue, if you use "gallery" instead of "carousel" for the thumbnails, it does _exactly_ what I need it to, it's just that I prefer the carousel style transition, rather than the gallery style, thats all :)

[ganlanyuan]

I didn't mean it's the same case with #245, but the requests are the same.
In both cases, I need to make the two sliders work synchronised.

[scsskid]

Appearently slider1.getInfo().displayIndex ist set correctly (its the non computer index starting with 1, not 0), so you can use `slider2.goTo( slider1.getInfo().displayIndex - 1 )´

[dpDesignz]

I'm using the code provided here, but for some reason, it's hiding my previous and next buttons if there are fewer items than the thumbnails items. Any idea why that might be happening?
Also, I have the thumbnails items set to '4', how do I get it to shift my thumbnails along so they stay in view? I've tried setting center: true on it with no luck. Here's an example on my site.

UPDATE: I got my nav buttons to show if I set the items to how many there were, max of 4 with my server-side code, but I still can't get it to scroll my items into view if there are more than 4 items. 😢 Any suggestions on how to make this happen?