javascript - Bind and un-bind hammer JS using on click events -
is there way on how can bind , un-bind hammer.js touch events using on click events. carousel slider have built. if user wants enable touch or disable touch events.
i have 2 classes have created use click events. class .slider-layout enables carousel while class .tile-layout disable carousel , transforms layout in card view layout
update #1
i tried removing class binds hammer.js didn't work.
var activeslide = 0; $('.faculty-carousel').attr('data-slide', '0'); $('.tile-layout').on('click', function() { $('.faculty-items').each(function() { $(this).addclass('tile-view'); }) }) $('.prev').on('click', function(e) { event.stoppropagation(); var carouselwrapper = $(this).closest('.faculty-carousel'), facultyprofilepanel = carouselwrapper.find('.faculty-items li'), facultyprofilecount = facultyprofilepanel.length, viewportsize = $(window).width(), carousel = carouselwrapper.find('.faculty-items'), position = 0, currentslide = parseint(carouselwrapper.attr('data-slide')); // check if data-slide attribute greater 0 if (currentslide > 0) { // decremement current slide currentslide--; // assign css position clicked slider var transformpercentage = -1 * currentslide / facultyprofilecount * 100; carousel.css('transform', 'translatex(' + transformpercentage + '% )'); // update data-slide attribute carouselwrapper.attr('data-slide', currentslide); activeslide = currentslide; } }); $('.next').on('click', function(e) { event.stoppropagation(); // store variable relevent clicked slider var carouselwrapper = $(this).closest('.faculty-carousel'), facultyprofilepanel = carouselwrapper.find('.faculty-items li'), facultyprofilecount = facultyprofilepanel.length, viewportsize = $(window).width(), carousel = carouselwrapper.find('.faculty-items'), position = 0, currentslide = parseint(carouselwrapper.attr('data-slide')); // check if dataslide less total slides if (currentslide < facultyprofilecount - 1) { // increment current slide currentslide++; // assign css position clicked slider var transformpercentage = -1 * currentslide / facultyprofilecount * 100; carousel.css('transform', 'translatex(' + transformpercentage + '% )'); // update data-slide attribute carouselwrapper.attr('data-slide', currentslide); activeslide = currentslide; } }) function touchcarousel() { $('.faculty-carousel .faculty-items').each(function() { // create simple instance // default, adds horizontal recognizers var direction, touchslider = this, mc = new hammer.manager(this), itemlength = $(this).find('li').length, count = 0, slide = $(this), timer; var sliderwrapper = slide, slideitems = sliderwrapper.find('li'), //slider = sliderwrapper.find('li'), totalpanels = 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 / totalpanels * e.deltax / window.innerwidth; var transformpercentage = percentage - 100 / totalpanels * activeslide; touchslider.style.transform = 'translatex( ' + transformpercentage + '% )'; var sliderwrapper = $(e.target).closest('.faculty-carousel') if (e.isfinal) { // new: 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 > totalpanels - 1) activeslide = totalpanels - 1 else activeslide = number; sliderwrapper.attr('data-slide', activeslide); touchslider.classlist.add('slide-animation'); var percentage = -(100 / totalpanels) * activeslide; touchslider.style.transform = 'translatex( ' + percentage + '% )'; timer = settimeout(function() { touchslider.classlist.remove('slide-animation'); }, 400); }; }); } function panelsizing() { // var activeslide = 0; // $('.faculty-carousel').attr('data-slide', '0'); var viewportsize = $(window).width(), carouselwrapper = $('.faculty-carousel') ; //set panel size based on viewport if (viewportsize <= 1920 ) { var profilepanelsize = viewportsize / 5 } if (viewportsize < 1024 ) { var profilepanelsize = viewportsize / 4 } if (viewportsize < 768 ) { var profilepanelsize = viewportsize / 3 } if (viewportsize < 480 ) { var profilepanelsize = viewportsize } carouselwrapper.each(function(){ var wrapper = $(this); // wrapper.attr('data-slide', '0'); var facultypanel = wrapper.find('.faculty-items li'), profilecount = facultypanel.length, // activeslide = 0, carousel = wrapper.find('.faculty-items'); carousel.outerwidth( profilepanelsize * profilecount ); facultypanel.outerwidth(profilepanelsize); carousel.css('transform', 'translatex(' + 0 + '% )'); }); } $('.tile-layout').on('click', function() { $('.faculty-items').each(function() { $(this).addclass('tile-view'); $('.faculty-carousel .faculty-items').css('transform', 'translatex(' + 0 + '% )'); }) }); $('.slider-layout').on('click', function() { $('.faculty-items').each(function() { $(this).removeclass('tile-view'); }) }) $(document).ready(function() { panelsizing(); touchcarousel() }) $(window).on('resize', function(){ panelsizing(); touchcarousel() })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 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; } .faculty-items.tile-view { display: flex !important; flex-wrap: wrap !important; width: 100% !important; } .faculty-items li { height: 100px; display: inline-block; position: relative; } .faculty-items li > { position: absolute; top: 0; width: 100%; height: 100%; user-drag: none; user-select: none; -moz-user-select: none; -webkit-user-drag: none; -webkit-user-select: none; -ms-user-select: none; } .faculty-items li:nth-child(odd) { background-color: grey; } .faculty-items li:nth-child(even), .faculty-items a:nth-child(even) { background-color: aqua; } .faculty-items { overflow: hidden; position: relative; right: 0; display: flex; -webkit-transition: transform 0.3s linear; } .faculty-carousel .controls { display: block; } /*# sourcemappingurl=style.css.map */ <link rel="stylesheet" href="style.css" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.js"></script> <div class="slider-layout"> slider layout </div> <div class="tile-layout"> tile layout </div> <div class="faculty-carousel"> <ul class="faculty-items"> <li><a href="#">item 1</a></li> <li><a href="#">item 2</a></li> <li><a href="#">item 3</a></li> <li><a href="#">item 4</a></li> <li><a href="#">item 5</a></li> <li><a href="#">item 6</a></li> <li><a href="#">item 7</a></li> </ul> <div class="controls"> <div class="prev"> prev </div> <div class="next"> next </div> </div> </div> <div class="faculty-carousel"> <ul class="faculty-items"> <li><a href="#">item 1</a></li> <li><a href="#">item 2</a></li> <li><a href="#">item 3</a></li> <li><a href="#">item 4</a></li> <li><a href="#">item 5</a></li> <li><a href="#">item 6</a></li> <li><a href="#">item 7</a></li> <li><a href="#">item 8</a></li> <li><a href="#">item 9</a></li> </ul> <div class="controls"> <div class="prev"> prev </div> <div class="next"> next </div> </div> </div> <div class="faculty-carousel"> <ul class="faculty-items"> <li><a href="#">item 1</a></li> <li><a href="#">item 2</a></li> <li><a href="#">item 3</a></li> <li><a href="#">item 4</a></li> <li><a href="#">item 5</a></li> <li><a href="#">item 6</a></li> <li><a href="#">item 7</a></li> <li><a href="#">item 8</a></li> <li><a href="#">item 9</a></li> <li><a href="#">item 10</a></li> </ul> <div class="controls"> <div class="prev"> prev </div> <div class="next"> next </div> </div> </div>
Comments
Post a Comment