const slider = HammerSlider(document.getElementById('hammer-slider'));

$('#hammer-slider').HammerSlider();

{
  //Slide transition speed, higher number for slower speed
  slideSpeed: 50,

  //Slide transition speed after touch interaction
  touchSpeed: 50,

  //Slide number to start with, zero based index
  startSlide: 0,

  //Auto sliding feature
  slideShow: false,

  //Interval for auto sliding, ms
  slideInterval: 5000,

  //Stop slideShow after touch, click or resize
  stopAfterInteraction: true,

  //Disable infinite carousel effect
  rewind: false,

  //Enables mouse to drag between slides
  mouseDrag: false,

  //Minimum drag/touch distance for slide change to occur after touch, pixels
  minimumDragDistance: 30,

  //Minimum distance required before preventing vertical scroll, pixels
  dragThreshold: 10,

  //Prefix used for generated elements such as dots and mouse-drag-enabled etc.
  //Note that all added classes use the BEM naming convention.
  //Change the stylesheet according to this!
  cssPrefix: 'c-slider',

  //Generate dots
  dots: false,

  //Element that will contain dots. By default it will be generated and appended to slider root element.
  //Can be anywhere on the page.
  dotContainer: undefined,

  //Element that contain slides. First child of slider root element will be used by default.
  slideContainer: undefined,

  //Callback function, runs before slide transition when slide change is triggered.
  //Recieves upcoming slide number as parameter.
  beforeSlideChange: undefined,

  //Callback function, runs after a slide transition is finished.
  //Receives current slide number as parameter.
  afterSlideChange: undefined,

  //Callback function, runs after slider is set up.
  //Receives total number of slides as parameter.
  onSetup: undefined
}

//Change to next slide
next();

//Change to previous slide
prev();

//Stop slideshow
stop();

//Start slideshow
start();

//Get current active slide number
getActiveSlideNr();

//Slide to slide number passed as the first parameter.
//Second parameter is for custom slidespeed. If not provided default slidespeed will be used.
moveTo(number, speed);

//Recalculates slider's and slides' widths and resets slider position to slide number parameter.
//Useful when slider is used in a lightbox or when container width changes.
//This is invoked on window resize and orientation change.
setupSlider(number);

const slider = HammerSlider(document.getElementById('hammer-slider'), {
  slideSpeed: 60,
  slideShow: true,
  slideInterval: 4000,
  dots: true,
  mouseDrag: true,
  beforeSlideChange: (targetSlide) => {
	console.log('Changing to slide number: ' + targetSlide);
  }
});

document.getElementById('next-btn').addEventListener('click', slider.next, false);

const slider = $('#hammer-slider').HammerSlider({
  slideSpeed: 60,
  slideShow: true,
  slideInterval: 4000,
  dots: true,
  mouseDrag: true,
  beforeSlideChange: (targetSlide) => {
	console.log('Changing to slide number: ' + targetSlide);
  }
});

$('#next-btn').on('click', slider.data('HammerSlider').next);