Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 

  • Disable slider from ratchet

    @shubham.raj
    Recommendations Offline Message

    • 0
    • 1
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 527
    Comment on it

    If u are using ratchet.js to slider many images and you want to destroy browser method when we drag/touch page to left .It will turn to next tab . If you want to click an element button than trigger the 'slider' method.. so it is best if you use something like this for the slider.

    1. !(function () {
    2.   'use strict';
    3.  
    4.   var pageX;
    5.   var pageY;
    6.   var slider;
    7.   var deltaX;
    8.   var deltaY;
    9.   var offsetX;
    10.   var lastSlide;
    11.   var startTime;
    12.   var resistance;
    13.   var sliderWidth;
    14.   var slideNumber;
    15.   var isScrolling;
    16.   var scrollableArea;
    17.   var startedMoving;
    18.  
    19.   var transformPrefix   = window.RATCHET.getBrowserCapabilities.prefix;
    20.   var transformProperty = window.RATCHET.getBrowserCapabilities.transform;
    21.  
    22.   var getSlider = function (target) {
    23.     var i;
    24.     var sliders = document.querySelectorAll('.slider > .slide-group');
    25.  
    26.     for (; target && target !== document; target = target.parentNode) {
    27.       for (i = sliders.length; i--;) {
    28.         if (sliders[i] === target) {
    29.           return target;
    30.         }
    31.       }
    32.     }
    33.   };
    34.  
    35.   var getScroll = function () {
    36.     var translate3d = slider.style[transformProperty].match(/translate3d\(([^,]*)/);
    37.     var ret = translate3d ? translate3d[1] : 0;
    38.     return parseInt(ret, 10);
    39.   };
    40.  
    41.   var setSlideNumber = function (offset) {
    42.     var round = offset ? (deltaX < 0 ? 'ceil' : 'floor') : 'round';
    43.     slideNumber = Math[round](getScroll() / (scrollableArea / slider.children.length));
    44.     slideNumber += offset;
    45.     slideNumber = Math.min(slideNumber, 0);
    46.     slideNumber = Math.max(-(slider.children.length - 1), slideNumber);
    47.   };
    48.  
    49.   var onTouchStart = function (e) {
    50.     slider = getSlider(e.target);
    51.  
    52.     if (!slider) {
    53.       return;
    54.     }
    55.  
    56.     var firstItem  = slider.querySelector('.slide');
    57.  
    58.     scrollableArea = firstItem.offsetWidth * slider.children.length;
    59.     isScrolling    = undefined;
    60.     sliderWidth    = slider.offsetWidth;
    61.     resistance     = 1;
    62.     lastSlide      = -(slider.children.length - 1);
    63.     startTime      = +new Date();
    64.     pageX          = e.touches[0].pageX;
    65.     pageY          = e.touches[0].pageY;
    66.     deltaX         = 0;
    67.     deltaY         = 0;
    68.  
    69.     setSlideNumber(0);
    70.  
    71.     slider.style[transformPrefix + 'transition-duration'] = 0;
    72.   };
    73.  
    74.   var onTouchMove = function (e) {
    75.     if (e.touches.length > 1 || !slider) {
    76.       return; // Exit if a pinch || no slider
    77.     }
    78.  
    79.     // adjust the starting position if we just started to avoid jumpage
    80.     if (!startedMoving) {
    81.       pageX += (e.touches[0].pageX - pageX) - 1;
    82.     }
    83.  
    84.     deltaX = e.touches[0].pageX - pageX;
    85.     deltaY = e.touches[0].pageY - pageY;
    86.     pageX  = e.touches[0].pageX;
    87.     pageY  = e.touches[0].pageY;
    88.  
    89.     if (typeof isScrolling === 'undefined' && startedMoving) {
    90.       isScrolling = Math.abs(deltaY) > Math.abs(deltaX);
    91.     }
    92.  
    93.     if (isScrolling) {
    94.       return;
    95.     }
    96.  
    97.     offsetX = (deltaX / resistance) + getScroll();
    98.  
    99.     e.preventDefault();
    100.  
    101.     resistance = slideNumber === 0         && deltaX > 0 ? (pageX / sliderWidth) + 1.25 :
    102.                  slideNumber === lastSlide && deltaX < 0 ? (Math.abs(pageX) / sliderWidth) + 1.25 : 1;
    103.  
    104.     slider.style[transformProperty] = 'translate3d(' + offsetX + 'px,0,0)';
    105.  
    106.     // started moving
    107.     startedMoving = true;
    108.   };
    109.  
    110.   var onTouchEnd = function (e) {
    111.     if (!slider || isScrolling) {
    112.       return;
    113.     }
    114.  
    115.     // we're done moving
    116.     startedMoving = false;
    117.  
    118.     setSlideNumber((+new Date()) - startTime < 1000 && Math.abs(deltaX) > 15 ? (deltaX < 0 ? -1 : 1) : 0);
    119.  
    120.     offsetX = slideNumber * sliderWidth;
    121.  
    122.     slider.style[transformPrefix + 'transition-duration'] = '.2s';
    123.     slider.style[transformProperty] = 'translate3d(' + offsetX + 'px,0,0)';
    124.  
    125.     e = new CustomEvent('slide', {
    126.       detail: { slideNumber: Math.abs(slideNumber) },
    127.       bubbles: true,
    128.       cancelable: true
    129.     });
    130.  
    131.     slider.parentNode.dispatchEvent(e);
    132.   };
    133.  
    134.   window.addEventListener('touchstart', onTouchStart);
    135.   window.addEventListener('touchmove', onTouchMove);
    136.   window.addEventListener('touchend', onTouchEnd);
    137.  
    138. }());

    Refrence

    Visit the link below for full code reference

    Here is the source code: http://github.com/twbs/ratchet/blob/master/js/sliders.js

    ratchet.js Disable slider from ratchet Javascript
    Comment on it

 0 Comment(s)

Sign In
Forgot Password?
                           OR                           
Create an account !!
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Reset Password
Fill out the form below and reset your password: