Tiny-slider: controlsContainer for custom next/prev

[craigryan]

I'm not able to get custom controls working. Is it possible you might update doc with a complete working example?

Taking the simple example provided, simply adding my own 'controls' results in my buttons shown along with the default ones, whether I use 'controls' class or call it 'my-controls' etc.

<div class="my-slider">..</div>

<div class="my-controls">
  <button>my prev</button>
  <button>my next</button>
</div>

My dom ready code looks like this:

             this.tinySlider = this.tinySliderModule({
              container: document.querySelector('.my-slider'),
              controlsContainer: document.querySelector('.my-controls'),
                  slideBy: 'page',
                  items: 3,
                  gutter: 10,
                  arrowKeys: true
            });

It simply fails with unclear errors. if I remove controlsContainer I get default buttons and the slider works.

TypeError: Cannot read property 'item' of undefined
    at Object.gn.isNodeList
    at setAttrs
    at navInit 
    at sliderInit 

[ganlanyuan]

Hey, are you using it via module loader?
I saw the code this.tinySlider = this.tinySliderModule({.
I didn't test the usage via module loader yet, not sure if it works.

[ganlanyuan]

Just saw another message you posted.
So you are using webpack exports-loader?
I will test it with module loader in a few days.

[craigryan]

yep, webpack exports. I'd like to help out so bug me as much as you like!

Also got issues in general in my Angular 1.5 app, once I introduce looping for the images such as (psuedo code:)

<div class="slider">
   <div ng-repeat="image in images track by $index">
      <img ng-src="image.path">{{image.name}}</div>

I get weird failures

'getBoundingClientRect' of undefined
    at getSlideEdges
    at sliderInit

If I expand these out with a static list of div's it all works as expected.

I'm trying to work on fixing this, perhaps a timing or initialisation issue, I'm not sure yet. The goal is to wrap tiny slider in a clean re-usable Ng/web component, to include the slider, custom controls, and even a search input field to filter what images the slider displays (by name) dynamically if possible. I'd obviously like to hear from anyone else getting this working

[petrozavodsky]

var slider = tns(); document.querySelector('.slider-next').onclick = function () { slider.goTo('next'); }; document.querySelector('.slider-prev').onclick = function () { slider.goTo('prev'); };

you can use events

[ganlanyuan]

Close for now. Feel free to reopen it if the issue still exists.