How to use breakpoints to disable the slider?

[batata004]

Hi,

I have an #element with 3 div inside of it and on big screens the divs are displayed one after the other vertically (as div work by default). However when the screen gets smaller than 500px (width) I want the tiny-slider to do its magic and display the 3 divs as a slider (horizontally).

How can I accomplish that? With owl-carousel the breakpoints would work very well however they didnt allow me to enable/disable the carousel depending on the width of the screen. Is it possible to do with tiny-slider?

[WebDevMaster2016]

import { tns } from "tiny-slider/src/tiny-slider"
import debounce from "functions/debounce";

export default sliderContainer => {
	let isInit = false;

	let slider = tns({
		container: `${sliderContainer}`,
		items: 1,
		nav: false,
		controls: false,
		loop: false,
		arrowKeys: true,
		preventScrollOnTouch: 'auto',
		edgePadding: 53,
		swipeAngle: false,
		rewind: true,
		gutter: 16,
		autoplay: true,
		autoplayButtonOutput: false,
		speed: 400,
		onInit: () => {
			isInit = true
		}
	});

	const sliderOnOffToggle = () => {
		if(window.innerWidth >= 1056 && isInit == true) {
			slider.destroy();
			isInit = false;
		} else if(window.innerWidth <= 1055 && isInit == false) {
			slider = slider.rebuild();
			isInit = true;
		}
	}

	sliderOnOffToggle();

	window.addEventListener('resize', debounce(() => {
		sliderOnOffToggle();
	}, 250));
}

Instead 1056 && 1055 use your own responsive breakpoints.

debounce function:

export default (func, wait, immediate) => {
	let timeout;

	return function executedFunction() {
		const context = this;
		const args = arguments;

		const later = function() {
			timeout = null;
			if (!immediate) func.apply(context, args);
		};

		const callNow = immediate && !timeout;

		clearTimeout(timeout);

		timeout = setTimeout(later, wait);

		if (callNow) func.apply(context, args);
	};
}

[melbazany]

@WebDevMaster2016 what's the npm package you've utilized here for the debounce function? Can't seem to spot the proper one from my research..

[WebDevMaster2016]

@WebDevMaster2016 what's the npm package you've utilized here for the debounce function? Can't seem to spot the proper one from my research..

Hi @melbazany . It's my own local function, that I use as a es6 module and import to my local files. It's not an npm package.

[melbazany]

@

Thanks for clarifying, @WebDevMaster2016.

While I've got you, I'm working on implementing this when there are multiple instances of a slider on a page.. Seems to be causing me some issues, especially when beginning at 768px and resizing up. Any ideas?:

const sliders = document.querySelectorAll(".tns-slider");
if (sliders.length > 0) {

  const breakpoint = 768;
  let isInit = false;

  sliders.forEach(function(slideshow) {
    let slider = tns({
      container: slideshow,
      items: 2,
      slideBy: "page",
      nav: false,
      arrowKeys: true,
      edgePadding: 50,
      rewind: true,
      gutter: 90,
      onInit: () => {
        isInit = true
      }
    });

    const sliderOnOffToggle = () => {
      if(window.innerWidth >= breakpoint && isInit == false) {
        slider = slider.rebuild();
        isInit = true;
      } else if(window.innerWidth <= (breakpoint+1) && isInit == true) {
        slider.destroy();
        isInit = false;
      }
    }
    
    sliderOnOffToggle();

    window.addEventListener('resize', sliderOnOffToggle);

  });
}

[WebDevMaster2016]

@melbazany it can be caused by this - slider = slider.rebuild(); . In API we can find more details

slider = slider.rebuild();
// this method returns a new slider Object with the same options with the original slider

May bee on resize we re create only one instances, instead of all. Unfortunately, I can't help more right now because I'm currently based in Ukraine.

[melbazany]

I appreciate your response. Sending my thoughts and prayers for peace your way.

Melissa Bazany | Associate Web Developer Full Circle 616.301.3400 x24

Check out our website at: thinkfullcircle.comhttp://www.thinkfullcircle.com/

[signature_3145350187]

From: Eugene @.> Date: Wednesday, April 27, 2022 at 5:35 PM To: ganlanyuan/tiny-slider @.> Cc: Melissa Bazany @.>, Mention @.> Subject: Re: [ganlanyuan/tiny-slider] How to use breakpoints to disable the slider? (#667)

@melbazanyhttps://github.com/melbazany it can be caused by this - slider = slider.rebuild(); . In API we can find more details

slider = slider.rebuild();

// this method returns a new slider Object with the same options with the original slider

May bee on resize we re create only one instances, instead of all. Unfortunately, I can't help more right now because I'm currently based in Ukraine.

— Reply to this email directly, view it on GitHubhttps://github.com/ganlanyuan/tiny-slider/issues/667#issuecomment-1111506500, or unsubscribehttps://github.com/notifications/unsubscribe-auth/ASABMJRJ4RT7T75HMRJCT5DVHGXKTANCNFSM4XJKSSAQ. You are receiving this because you were mentioned.Message ID: @.***>

[WebDevMaster2016]

@melbazany thank you very much for these words!!!

I thought about the problem for a bit. You should experiment with adding the slide index to the variable. Something like this:

sliders.forEach((slideshow, index) => {
    let slider[index] = tns({
      container: slideshow,
      items: 2,
      slideBy: "page",
      nav: false,
      arrowKeys: true,
      edgePadding: 50,
      rewind: true,
      gutter: 90,
      onInit: () => {
        isInit = true
      }
    });

    const sliderOnOffToggle = () => {
      if(window.innerWidth >= breakpoint && isInit == false) {
        slider[index] = slider[index].rebuild();
        isInit = true;
      } else if(window.innerWidth <= (breakpoint+1) && isInit == true) {
        slider[index].destroy();
        isInit = false;
      }
    }
    
    sliderOnOffToggle();

    window.addEventListener('resize', sliderOnOffToggle);

  });

[melbazany]

Sorry for the delay; how would one go about using the line: slider[index] = slider[index].rebuild(); if the slider variable isn’t an array? Have you tested this at all?