fix a controls and nav initilization issue in nested sliders

README.md

@@ -1,5 +1,5 @@
 # tiny-slider
-![version](https://img.shields.io/badge/Version-1.4.1-green.svg) 
+![version](https://img.shields.io/badge/Version-1.5.0-green.svg) 
 Tiny slider for all purposes, inspired by [Owl Carousel](https://owlcarousel2.github.io/OwlCarousel2/). 
 <!-- [demo](http://creatiointl.org/william/tiny-slider/v1-new/demo/) -->
 The previous version is still available in branch [v0](https://github.com/ganlanyuan/tiny-slider/tree/v0), you may want to know how to [transfer from v0](transfer.md).

bower.json

@@ -1,6 +1,6 @@
 {
  "name": "tiny-slider",
- "version": "1.4.1",
+ "version": "1.5.0",
  "homepage": "https://github.com/ganlanyuan/tiny-slider",
  "authors": [
  "WilliamLin <[email protected]>"

dist/tiny-slider.js

@@ -1070,7 +1070,9 @@ function tns(options) {
  } else {
  append(wrapper, '<div data-tns-role="controls" aria-label="Carousel Navigation"><button data-controls="prev" tabindex="-1" aria-controls="' + slideId +'" type="button">' + controlsText[0] + '</button><button data-controls="next" tabindex="0" aria-controls="' + slideId +'" type="button">' + controlsText[1] + '</button></div>');
 
- controlsContainer = wrapper.querySelector('[data-tns-role="controls"]');
+ [].forEach.call(wrapper.children, function (el) {
+ if (el.getAttribute('data-tns-role') === 'controls') { controlsContainer = el; }
+ });
  prevButton = controlsContainer.children[0];
  nextButton = controlsContainer.children[1];
  }
@@ -1098,7 +1100,9 @@ function tns(options) {
  navHtml = '<div data-tns-role="nav" aria-label="Carousel Pagination">' + navHtml + '</div>';
  append(wrapper, navHtml);
 
- navContainer = wrapper.querySelector('[data-tns-role="nav"]');
+ [].forEach.call(wrapper.children, function (el) {
+ if (el.getAttribute('data-tns-role') === 'nav') { navContainer = el; }
+ });
  navItems = navContainer.children;
 
  // hide navs

package.json

@@ -1,6 +1,6 @@
 {
  "name": "tiny-slider",
- "version": "1.4.1",
+ "version": "1.5.0",
  "description": "Pure javascript slider for all purposes, inspired by Owl Carousel.",
  "main": "dist/tiny-slider.js",
  "directories": {

src/tiny-slider.js

@@ -410,7 +410,9 @@ export function tns(options) {
  } else {
  append(wrapper, '<div data-tns-role="controls" aria-label="Carousel Navigation"><button data-controls="prev" tabindex="-1" aria-controls="' + slideId +'" type="button">' + controlsText[0] + '</button><button data-controls="next" tabindex="0" aria-controls="' + slideId +'" type="button">' + controlsText[1] + '</button></div>');
 
- controlsContainer = wrapper.querySelector('[data-tns-role="controls"]');
+ [].forEach.call(wrapper.children, function (el) {
+ if (el.getAttribute('data-tns-role') === 'controls') { controlsContainer = el; }
+ });
  prevButton = controlsContainer.children[0];
  nextButton = controlsContainer.children[1];
  }
@@ -438,7 +440,9 @@ export function tns(options) {
  navHtml = '<div data-tns-role="nav" aria-label="Carousel Pagination">' + navHtml + '</div>';
  append(wrapper, navHtml);
 
- navContainer = wrapper.querySelector('[data-tns-role="nav"]');
+ [].forEach.call(wrapper.children, function (el) {
+ if (el.getAttribute('data-tns-role') === 'nav') { navContainer = el; }
+ });
  navItems = navContainer.children;
 
  // hide navs

src/tiny-slider.module.js

@@ -410,7 +410,9 @@ export function tns(options) {
  } else {
  append(wrapper, '<div data-tns-role="controls" aria-label="Carousel Navigation"><button data-controls="prev" tabindex="-1" aria-controls="' + slideId +'" type="button">' + controlsText[0] + '</button><button data-controls="next" tabindex="0" aria-controls="' + slideId +'" type="button">' + controlsText[1] + '</button></div>');
 
- controlsContainer = wrapper.querySelector('[data-tns-role="controls"]');
+ [].forEach.call(wrapper.children, function (el) {
+ if (el.getAttribute('data-tns-role') === 'controls') { controlsContainer = el; }
+ });
  prevButton = controlsContainer.children[0];
  nextButton = controlsContainer.children[1];
  }
@@ -438,7 +440,9 @@ export function tns(options) {
  navHtml = '<div data-tns-role="nav" aria-label="Carousel Pagination">' + navHtml + '</div>';
  append(wrapper, navHtml);
 
- navContainer = wrapper.querySelector('[data-tns-role="nav"]');
+ [].forEach.call(wrapper.children, function (el) {
+ if (el.getAttribute('data-tns-role') === 'nav') { navContainer = el; }
+ });
  navItems = navContainer.children;
 
  // hide navs