Sync directional controls with swipe events

Question

I've built two kinds of functionality in controlling the slider that I've built. One is buttons with directional controls and other is touch/swipe events. How can sync both of them so that when i press prev/next the swipe events is also updated and vice versa

$(document).ready(function() {


 $('.prev').on('click', function(e) {
     event.stopPropagation();
     // store variable relevent to clicked slider
     var sliderWrapper      = $(this).closest('.slider-wrapper'),
      slideItems         = sliderWrapper.find('.slide-items'),
         slider             = sliderWrapper.find('.slider'),
         currentSlide       = sliderWrapper.attr('data-slide');

     // Check if data-slide attribute is greater than 0
     if( currentSlide > 0 ) {
   // Decremement current slide
   currentSlide--;
   // Assign CSS position to clicked slider
   slider.css({'right' : currentSlide*slideItems.outerWidth() });
   // Update data-slide attribute
   sliderWrapper.attr('data-slide', currentSlide);
     }
 });

 $('.next').on('click', function(e) {
     event.stopPropagation();
     // store variable relevent to clicked slider

  var sliderWrapper      = $(this).closest('.slider-wrapper'),
      slideItems         = sliderWrapper.find('.slide-items'),
      slider             = sliderWrapper.find('.slider'),
      totalSlides        = slideItems.length,
      currentSlide       = sliderWrapper.attr('data-slide');

  // Check if dataslide is less than the total slides
  if( currentSlide < totalSlides - 1 ) {
      // Increment current slide
      currentSlide++;
      // Assign CSS position to clicked slider
      slider.css({'right' : currentSlide*slideItems.outerWidth() });
      // Update data-slide attribute
      sliderWrapper.attr('data-slide', currentSlide);
  }
 })

 $('.slider-wrapper .slider').each(function(){

     // create a simple instance
     // by default, it only adds horizontal recognizers
  
     var direction;
        var touchSlider = this;
        var activeSlide = 0;
     var mc = new Hammer.Manager(this),
         itemLength = $(this).find('.slide-items').length,
         count = 0,
         slide = $(this);
     
  var sliderWrapper      = slide,
      slideItems         = sliderWrapper.find('.slide-items'),
      slider             = sliderWrapper.find('.slider'),
      totalSlides        = slideItems.length,
      currentSlide       = sliderWrapper.attr('data-slide');
     
     // mc.on("panleft panright", function(ev) {
     //   direction = ev.type;
     // });
        
        mc.add(new Hammer.Pan({ threshold: 0, pointers: 0 }))
     mc.on('pan', function(e) { 
            var percentage = 100 / totalSlides * e.deltaX / window.innerWidth;
            var transformPercentage = percentage - 100 / totalSlides * activeSlide;
            touchSlider.style.transform = 'translateX( ' +  transformPercentage + '% )';

   if( e.isFinal ) { // NEW: this only runs on event end
       if( percentage < 0 )
           goToSlide( activeSlide + 1 );
       else if( percentage > 0 )
           goToSlide( activeSlide - 1 );
       else
           goToSlide( activeSlide );
   }


     });


  var goToSlide = function( number ) {
    if( number < 0 )
      activeSlide = 0;
    else if( number > totalSlides - 1 )
      activeSlide = totalSlides - 1
    else
      activeSlide = number;

    touchSlider.classList.add('slide-animation');
    var percentage = -( 100 / totalSlides ) * activeSlide;
    touchSlider.style.transform = 'translateX( ' + percentage + '% )';
    timer = setTimeout( function() {
        touchSlider.classList.remove('slide-animation');
    }, 400);

  };

    //  mc.on("panend", function(ev) {
    //   if(direction === "panleft") {
    //          console.log('panleft');

    // // Check if dataslide is less than the total slides
    // if( currentSlide < totalSlides - 1 ) {
    //     // Increment current slide
    //     currentSlide++;
    //     // Assign CSS position to clicked slider
    //     slider.css({'right' : currentSlide*slideItems.outerWidth() });
    //     // Update data-slide attribute
    //     sliderWrapper.attr('data-slide', currentSlide);
    // }
    //   }

    //   if(direction === "panright") {
    //          console.log('right');

    //    // Check if data-slide attribute is greater than 0
    //    if( currentSlide > 0 ) {
    //  // Decremement current slide
    //  currentSlide--;
    //  // Assign CSS position to clicked slider
    //  slider.css({'right' : currentSlide*slideItems.outerWidth() });
    //  // Update data-slide attribute
    //  sliderWrapper.attr('data-slide', currentSlide);
    //    }
    //   }
    //  });
 });

});




$(window).on('load', function() {
  $('.slider-wrapper').each(function() {
    var slideItems = $(this).find('.slide-items'),
    items = slideItems.length,
    sliderBox = $(this).find('.slider'),
    sliderWrapperWidth = $(this).width();
    
    slideItems.outerWidth( sliderWrapperWidth );
    
    sliderBox.width( slideItems.outerWidth() * items  );
  });

});

/* http://meyerweb.com/eric/tools/css/reset/
 v2.0 | 20110126
 License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline; }

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block; }

body {
  line-height: 1; }

ol, ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

* {
  box-sizing: border-box; }

.container {
  max-width: 1280px;
  margin: 0 auto; }

.container .slider-wrapper {
  margin-bottom: 40px;
  background-color: grey;
  overflow: hidden;
  display: block; }

.container .slider-wrapper .slider {
  position: relative;
  right: 0;
  display: flex;
  flex-wrap: wrap;
  overflow: hidden;
  /*-webkit-transition : transform 0.3s linear;*/ }
  .container .slider-wrapper .slider.slide-animation {
    -webkit-transition: transform 0.3s linear; }

.container .slider-wrapper .slider > div {
  padding: 10px;
  background-color: #e5d0d0;
  height: 200px; }

.container .slider-wrapper .slider > div p {
  color: purple; }

.container .slider-wrapper .buttons {
  display: flex;
  justify-content: space-between;
  background: beige;
  padding: 10px 0; }

.container .slider-wrapper .buttons div {
  background-color: cyan; }

/*# sourceMappingURL=style.css.map */

Sync directional controls with swipe events

1 Answers