Not able to swipe slider in mobile device using to

2019-09-21 05:23发布

站内问答 / JavaScript
1441 0 4

I am using GreenSock Animation. I am getting the issue on a mobile device. I mean In the mobile device swipe not working. I am not able to swipe the slider using touch. Click event is working.

I am using touchswipe.js for the swipe the slider. https://cdnjs.cloudflare.com/ajax/libs/jquery.touchswipe/1.6.4/jquery.touchSwipe.js

Would you help me out with this issue?

//  =============  xxxxx  ==========================	

// TweenMax.set(".centered, nav, h1", {autoAlpha: 1, xPercent:-50, yPercent:-50, force3D:true});	
// TweenMax.set(".go", {autoAlpha: 1, yPercent:-50});	

//Forked from [Chrysto](http://codepen.io/bassta/)'s Pen [Fullscreen slides with TweenLite, CSSPlugin and ScrollToPlugin](http://codepen.io/bassta/pen/kDvmC/).  Optimized with the help of Blake Owen

//First the variables our app is going to use need to be declared

//References to DOM elements
var $window = $(window);
var $document = $(document);

var $navButtons = $(".homeDots li");
var $navGoPrev = $(".go-prev");
var $navGoNext = $(".go-next");
var $slidesContainer = $(".slides-container");
var $allSlides = $(".slide");
var $currentSlide = $allSlides.first();
var slideControl = $("nav a")


//Animating flag - is our app animating
var isAnimating = false;

//The height of the window
var pageHeight = $window.innerHeight();

//Key codes for up and down arrows on keyboard. We'll be using this to navigate change slides using the keyboard
var keyCodes = {
  UP: 38,
  DOWN: 40
};

// individual animations per slide
var currentIndex = 0;

var timeline1 = new TimelineMax()
  //.set('.go-prev',{autoAlpha:0}) 
  .from('.slide01 p', 1, {
    autoAlpha: 0,
    ease: Linear.easeNone
  })
  .from('.slide01 a', 0.1, {
    autoAlpha: 0,
    ease: Linear.easeNone
  })
  .reverse();

var timeline2 = new TimelineMax()
  .from('.slide02 p', 0.1, {
    autoAlpha: 0,
    ease: Linear.easeNone
  })
  .reverse();


var timeline3 = new TimelineMax()
  // //.set('.slide03 h1',{x:-200})
  .from('.slide03 p', 0.1, {
    autoAlpha: 0,
    ease: Linear.easeNone
  })
  .reverse();


var timeline4 = new TimelineMax()
  // .from('.slide04 h1',0.1,{y:1000})  
  .from('.slide04 p', 0.1, {
    autoAlpha: 0,
    ease: Linear.easeNone
  })
// .reverse();



var timeline5 = new TimelineMax()
  .from('.slide05 p', 0.1, {
    autoAlpha: 0,
    ease: Linear.easeNone
  })
// .set('.go-next',{autoAlpha:0})  // always in last slide / timeline !!
// .from('.slide05 h1',0.1,{y:-1000})

// .reverse();

//every timeline has to be listed in this array here !!!
var timelines = [timeline1, timeline2, timeline3, timeline4, timeline5];

//Going to the first slide
goToSlide($currentSlide);
//TweenLite.set($currentSlide, {className: "+=active"});

/*
 *   Adding event listeners
 * */

$window.on("resize", onResize).resize();
$window.on("mousewheel DOMMouseScroll", onMouseWheel);
$document.on("keydown", onKeyDown);
$navButtons.on("click", onNavButtonClick);
$navGoPrev.on("click", goToPrevSlide);
$navGoNext.on("click", goToNextSlide);

var self = this;
$document.swipe({
  wipeUp: function() {
    self.goToNextSlide();
  },

  wipeDown: function() {
    self.goToPrevSlide();
  },

  min_move_x: 50,
  min_move_y: 15,
  preventDefaultEvents: true
});


/*$('.slides-container').swipe({
	swipe: function(event, direction) {
	  if (direction === 'up') {
		goToPrevSlide();
	  } else {
		goToNextSlide();
	  }
	}
	});*/

/* == Internal functions == */


/*  When a button is clicked - first get the button href, and then slide to the container, if there's such a container */

function onNavButtonClick(event) {
  //The clicked button
  var $button = $(this);

  //The slide the button points to
  var $slide = $($button.attr("id"));

  //If the slide exists, we go to it
  if ($slide.length) {
    goToSlide($slide);
    event.preventDefault();
  }
}

/*  Getting the pressed key. Only if it's up or down arrow, we go to prev or next slide and prevent default behaviour */

function onKeyDown(event) {

  var PRESSED_KEY = event.keyCode;

  if (PRESSED_KEY == keyCodes.UP) {
    goToPrevSlide();
    event.preventDefault();
  } else if (PRESSED_KEY == keyCodes.DOWN) {
    goToNextSlide();
    event.preventDefault();
  }

}

/*
 *   When user scrolls with the mouse, we have to change slides
 * */
function onMouseWheel(event) {
  //Normalize event wheel delta
  var delta = event.originalEvent.wheelDelta / 30 || -event.originalEvent.detail;

  //If the user scrolled up, it goes to previous slide, otherwise - to next slide
  if (delta < -1) {
    goToNextSlide();
  } else if (delta > 1) {
    goToPrevSlide();
  }
  event.preventDefault();
}

/*
 *   If there's a previous slide, slide to it
 * */
function goToPrevSlide() {
  if ($currentSlide.prev().length) {
    goToSlide($currentSlide.prev());
  }
}

/*
 *   If there's a next slide, slide to it
 * */
function goToNextSlide() {
  if ($currentSlide.next().length) {
    goToSlide($currentSlide.next());
  }
}


/*
 *   Actual transition between slides
 * */
function goToSlide($slide) {
  //If the slides are not changing and there's such a slide
  if (!isAnimating && $slide.length) {
    //setting animating flag to true
    isAnimating = true;
    $currentSlide = $slide;
    currentID = $currentSlide.attr('id');
    NextSlide = $currentSlide.next()

    //Sliding to current slide
    TweenLite.to($slidesContainer, 1, {
      scrollTo: {
        y: pageHeight * $currentSlide.index()
      },
      onComplete: onSlideChangeEnd,
      onCompleteScope: this
    });

    //Definig slide status
    TweenLite.to($allSlides.filter(".active"), 0.1, {
      className: "-=active"
    });
    TweenLite.to($allSlides.filter($currentSlide), 0.1, {
      className: "+=active"
    });

    //Animating menu items
    TweenLite.to($navButtons.filter(".active"), 0.5, {
      className: "-=active"
    });
    TweenLite.to($navButtons.filter("." + currentID), 0.5, {
      className: "+=active"
    });

  }
}

/*
 *   Once the sliding is finished, we need to restore "isAnimating" flag.
 *   You can also do other things in this function, such as changing page title
 * */
function onSlideChangeEnd() {
  isAnimating = false;

  // Reverse the timeline for the previous slide
  timelines[currentIndex].reversed(true).progress(0);

  // Change the index
  currentIndex = $currentSlide.index();

  // Play the timeline for the current slide
  timelines[currentIndex].reversed(false);
}

/*
 *   When user resize it's browser we need to know the new height, so we can properly align the current slide
 * */
function onResize(event) {

  //This will give us the new height of the window
  var newPageHeight = $window.innerHeight();

  /*
   *   If the new height is different from the old height ( the browser is resized vertically ), the slides are resized
   * */
  if (pageHeight !== newPageHeight) {
    pageHeight = newPageHeight;

    //This can be done via CSS only, but fails into some old browsers, so I prefer to set height via JS
    TweenLite.set([$slidesContainer, $allSlides], {
      height: pageHeight + "px"
    });

    //The current slide should be always on the top
    TweenLite.set($slidesContainer, {
      scrollTo: {
        y: pageHeight * $currentSlide.index()
      }
    });
  }

}
body {
  padding: 0;
  margin: 0;
}

.slides-container {
  /*position: absolute;
  left: 0;
  top: 0;*/
  width: 100%;
  height: 100vh;
  overflow: hidden;
  z-index: 10;
}

.slide {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.banner-bg {
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: auto;
  min-height: 100%;
  background-position: center;
}

.slide01 {
  background-image: linear-gradient(rgba(0, 0, 0, 0.50), rgba(2, 2, 2, 0.50)), url('https://images.unsplash.com/photo-1568745814386-e7241cd58169?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80');
}

.slide02 {
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(2, 2, 2, 0.50)), url('https://images.unsplash.com/photo-1556911073-52527ac43761?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80');
}

.slide03 {
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(2, 2, 2, 0.50)), url('https://images.unsplash.com/photo-1562102086-8194dcef8419?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80');
}

.slide04 {
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(2, 2, 2, 0.50)), url('https://images.unsplash.com/photo-1556740772-1a741367b93e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80');
}

.slide05 {
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(2, 2, 2, 0.50)), url('https://images.unsplash.com/photo-1568816756611-aaf3d3bd0ef4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1024&q=80');
}

.banner-bg {
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: auto;
  min-height: 100%;
  background-position: center;
}

.homeDots {
  position: absolute;
  top: 50%;
  right: 05%;
  z-index: 10;
  transform: translateY(-50%);
  color: #ccc;
  padding-bottom: 20px;
}

.homeDots ul li {
  padding-bottom: 15px;
}

.homeDots ul {
  list-style: none;
}

.homeDots ul li.active {
  color: #fff;
  font-weight: 700;
}

.homeDots ul li span {
  position: relative;
}

.homeDots ul li span:after {
  content: "";
  width: 20px;
  height: 2px;
  background-color: #fff;
  display: block;
  position: absolute;
  right: -30px;
  top: 10px;
}

.homeDots ul li.active span:after {
  background-color: #ccc;
}

.scroll-downs {
  position: absolute;
  margin: 0 auto;
  width: 30px;
  height: 25px;
  bottom: 16%;
  left: 49%;
  z-index: 2;
  cursor: pointer;
}

.mousey {
  width: 3px;
  padding: 9px 12px;
  height: 25px;
  border: 2px solid #fff;
  border-radius: 25px;
  opacity: 0.75;
  box-sizing: content-box;
}

.scroller {
  width: 3px;
  height: 10px;
  border-radius: 25%;
  background-color: #fff;
  animation-name: scroll;
  animation-duration: 2.2s;
  animation-timing-function: cubic-bezier(.15, .41, .69, .94);
  animation-iteration-count: infinite;
}

@keyframes scroll {
  0% {
    opacity: 0;
  }
  10% {
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    transform: translateY(15px);
    opacity: 0;
  }
}
<div class="slides-container">

  <div class="slide slide01 active banner-bg" id="slide-1"></div>
  <div class="slide slide02 banner-bg" id="slide-2"></div>
  <div class="slide slide03 banner-bg" id="slide-3"></div>
  <div class="slide slide04 banner-bg" id="slide-4"></div>
  <div class="slide slide05 banner-bg" id="slide-5"></div>


</div>

<div class="homeDots">
  <ul class="test text-right">
    <li id="#slide-1" class="slide-1 active"><span>About Us</span></li>
    <li id="#slide-2" class="slide-2"><span>Our Products</span></li>
    <li id="#slide-3" class="slide-3"><span>Our Services</span></li>
    <li id="#slide-4" class="slide-4"><span>Careers</span></li>
    <li id="#slide-5" class="slide-5"><span>Contact Us</span></li>
  </ul>
</div>
<div class="mouseHero go-next">
  <div class="scroll-downs">
    <div class="mousey">
      <div class="scroller"></div>
    </div>
  </div>
</div>

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenMax.min.js"></script>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/plugins/ScrollToPlugin.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.touchswipe/1.6.4/jquery.touchSwipe.js"></script>

0条回答
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)