स्वाइप ईवेंट

Question

के साथ दिशात्मक नियंत्रण सिंक करें मैंने अपने द्वारा बनाए गए स्लाइडर को नियंत्रित करने में दो प्रकार की कार्यक्षमता बनाई है। एक दिशात्मक नियंत्रण के साथ बटन है और अन्य स्पर्श/स्वाइप घटनाओं है। उन दोनों को सिंक कर सकते हैं कैसे इतना है कि जब मैं पिछला प्रेस/अगले कड़ी चोट घटनाओं को भी अद्यतन किया जाता है और इसके विपरीत

$(document).ready(function() { 
 

 

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

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

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

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

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

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

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

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

 

 
\t  }); 
 

 

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

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

 
\t \t }; 
 

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

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

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

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

 
}); 
 

 

 

 

 
$(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 */

<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.7/hammer.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <div class="slider-wrapper" data-slide="0"> 
 
    <div class="slider"> 
 
     <div class="slide-items"> 
 
      <p>1</p> 
 
     </div> 
 

 
     <div class="slide-items"> 
 
      <p>2</p> 
 
     </div> 
 

 
     <div class="slide-items"> 
 
      <p>3</p> 
 
     </div> 
 
    </div> 
 
    <div class="buttons"> 
 
     <div class="prev">prev</div> 
 
     <div class="next">next</div> 
 
    </div> 
 
    </div> 
 
    <div class="slider-wrapper" data-slide="0"> 
 
    <div class="slider"> 
 
     <div class="slide-items"> 
 
      <p>1</p> 
 
     </div> 
 
    </div> 
 
    <div class="buttons"> 
 
     <div class="prev">prev</div> 
 
     <div class="next">next</div> 
 
    </div> 
 
    </div> 
 

 
    <div class="slider-wrapper" data-slide="0"> 
 
    <div class="slider"> 
 
     <div class="slide-items"> 
 
      <p>2</p> 
 
     </div> 
 
     <div class="slide-items"> 
 
      <p>3</p> 
 
     </div> 
 
    </div> 
 
    <div class="buttons"> 
 
     <div class="prev">prev</div> 
 
     <div class="next">next</div> 
 
    </div> 
 
    </div> 
 
    <div class="slider-wrapper" data-slide="0"> 
 
    <div class="slider"> 
 
     <div class="slide-items"> 
 
      <p>1</p> 
 
     </div> 
 
    </div> 
 
    <div class="buttons"> 
 
     <div class="prev">prev</div> 
 
     <div class="next">next</div> 
 
    </div> 
 
    </div> 
 
    <div class="slider-wrapper" data-slide="0"> 
 
    <div class="slider"> 
 
     <div class="slide-items"> 
 
      <p>1</p> 
 
     </div> 
 

 
     <div class="slide-items"> 
 
      <p>2</p> 
 
     </div> 
 
    </div> 
 
    <div class="buttons"> 
 
     <div class="prev">prev</div> 
 
     <div class="next">next</div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

आप एक से अधिक समस्या नहीं थी:

1. आप का इस्तेमाल किया स्लाइड की स्थिति के लिए दो अलग-अलग दृष्टिकोण (hammer प्लगइन जिसे आपने सीआरएसएस right का उपयोग करके स्थिति बनाने की कोशिश की, जबकि आपने अनुवाद का उपयोग करके इसे स्थान दिया था।
2. प्रत्येक विधि ने यह निर्धारित करने के लिए अलग-अलग स्रोत का उपयोग किया कि कौन सी स्लाइड सक्रिय है (आपने .slider-wrapper का उपयोग किया था जबकि hammer ने activeSlide चर का उपयोग किया था।

मैं दोनों translateX उपयोग करने के लिए तय हो गई, $('.slider-wrapper .slider').each समारोह के दायरे से बाहर activeSlide चर चले गए और यह सुनिश्चित करें कि हर बदलाव दोनों चर को प्रभावित करेगा बनाया है।

$(document).ready(function() { 
 

 
    var activeSlide = 0; 
 

 
    $('.prev').on('click', function(e) { 
 
     event.stopPropagation(); 
 
     // store variable relevent to clicked slider 
 
     var sliderWrapper = $(this).closest('.slider-wrapper'), 
 
      slideItems = sliderWrapper.find('.slide-items'), 
 
      totalSlides = slideItems.length, 
 
      slider = sliderWrapper.find('.slider'), 
 
      currentSlide = parseInt(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 
 
      var transformPercentage = -1 * currentSlide/totalSlides * 100; 
 
      slider.css('transform', 'translateX(' + transformPercentage + '%)'); 
 
      // Update data-slide attribute 
 
      sliderWrapper.attr('data-slide', currentSlide); 
 
      activeSlide = 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 = parseInt(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 
 
      var transformPercentage = -1 * currentSlide/totalSlides * 100; 
 
      slider.css('transform', 'translateX(' + transformPercentage + '%)'); 
 
      // Update data-slide attribute 
 
      sliderWrapper.attr('data-slide', currentSlide); 
 
      activeSlide = currentSlide; 
 
     } 
 
    }) 
 

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

 
     // create a simple instance 
 
     // by default, it only adds horizontal recognizers 
 

 
     var direction; 
 
     var touchSlider = this; 
 
     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 = parseInt(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 + '%)'; 
 
      var sliderWrapper = $(e.target).closest('.slider-wrapper') 
 

 

 
      if (e.isFinal) { // NEW: this only runs on event end 
 

 
       var newSlide = activeSlide; 
 
       if (percentage < 0) 
 
        newSlide = activeSlide + 1; 
 
       else if (percentage > 0) 
 
        newSlide = activeSlide - 1; 
 
       goToSlide(newSlide, sliderWrapper); 
 
      } 
 
     }); 
 

 

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

 
      sliderWrapper.attr('data-slide', activeSlide); 
 

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

 
     }; 
 

 
    }); 
 

 
}); 
 

 

 

 

 
$(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 */

<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.7/hammer.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <div class="slider-wrapper" data-slide="0"> 
 
     <div class="slider"> 
 
      <div class="slide-items"> 
 
       <p>1</p> 
 
      </div> 
 

 
      <div class="slide-items"> 
 
       <p>2</p> 
 
      </div> 
 

 
      <div class="slide-items"> 
 
       <p>3</p> 
 
      </div> 
 
     </div> 
 
     <div class="buttons"> 
 
      <div class="prev">prev</div> 
 
      <div class="next">next</div> 
 
     </div> 
 
    </div> 
 
    <div class="slider-wrapper" data-slide="0"> 
 
     <div class="slider"> 
 
      <div class="slide-items"> 
 
       <p>1</p> 
 
      </div> 
 
     </div> 
 
     <div class="buttons"> 
 
      <div class="prev">prev</div> 
 
      <div class="next">next</div> 
 
     </div> 
 
    </div> 
 

 
    <div class="slider-wrapper" data-slide="0"> 
 
     <div class="slider"> 
 
      <div class="slide-items"> 
 
       <p>2</p> 
 
      </div> 
 
      <div class="slide-items"> 
 
       <p>3</p> 
 
      </div> 
 
     </div> 
 
     <div class="buttons"> 
 
      <div class="prev">prev</div> 
 
      <div class="next">next</div> 
 
     </div> 
 
    </div> 
 
    <div class="slider-wrapper" data-slide="0"> 
 
     <div class="slider"> 
 
      <div class="slide-items"> 
 
       <p>1</p> 
 
      </div> 
 
     </div> 
 
     <div class="buttons"> 
 
      <div class="prev">prev</div> 
 
      <div class="next">next</div> 
 
     </div> 
 
    </div> 
 
    <div class="slider-wrapper" data-slide="0"> 
 
     <div class="slider"> 
 
      <div class="slide-items"> 
 
       <p>1</p> 
 
      </div> 
 

 
      <div class="slide-items"> 
 
       <p>2</p> 
 
      </div> 
 
     </div> 
 
     <div class="buttons"> 
 
      <div class="prev">prev</div> 
 
      <div class="next">next</div> 
 
     </div> 
 
    </div> 
 
</div>

:

नोड है कि हम में से एक चर को हटाने और केवल attr मूल्य उपयोग कर सकते हैं, लेकिन मैं आपको :)

यहाँ के लिए छोड़ देगा जो काम कर रहे टुकड़ा है