Mobile First Full Page Slider with jQuery - Swipe Slider

Swipe Slider is a touch-enabled smooth page slider plugin which allows the visitor to navigate between fullscreen pages with mouse drag (Desktop) and touch swipe (Mobile & Tablet).

How to use it:

1. You first need to include the latest version of jQuery library on the webpage.

<script src="//code.jquery.com/jquery.min.js"></script>

2. Add pages to the html document.

<div class="container" id="swiper-slider">
  <div class="wrapper">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
    <div class="box">5</div>
  </div>
</div>

3. Create a pagination that will indicate on which page you're viewing.

<div class="pager">
  <span id="thepage"></span>/<span id="pagelength"></span>
</div>

4. Make the pages full height and width.

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  box-sizing:content-box;
  -webkit-box-sizing:content-box;
}

body { overflow: hidden; }

.container {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.wrapper {
  width: 100%;
  position: relative;
  -webkit-transition: transform 0.3s ease;
  transition: transform 0.3s ease;
}

.box {
  width: 100%;
  text-align: center;
  vertical-align: middle;
  color: #fff;
}

5. Style and position the pagination.

#msg {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
}

.pager {
  position: fixed;
  right: 15px;
  top: 15px;
  z-index: 11;
  color: #fff;
}

6. The core JavaScript to enable the page slider. Currently it supports vertical page scrolling.

var $window = $(window);
var winW = $window.width(),
    winH = $window.height();

var xStart,xEnd,yStart,yEnd;
var $swipe = $('#swiper-slider');
var $boxWrapper = $swipe.find('.wrapper');
var $box = $swipe.find('.box');
var boxLength = $box.length;

var $pageCount = $('#pagelength');
var $thepage = $('#thepage');
$pageCount.text(boxLength);
$thepage.text('1');

$boxWrapper.height(winH*boxLength);
$box.height(winH);

//swipe event
function handleTouchEvent(event){
    //if (event.touches.length == 1 || event.touches.length == 0){
    //console.log(event);
    event = event.originalEvent;
    //console.log(event.type);
    switch(event.type){
        case "touchstart":
            xStart = event.touches[0].clientX;
            yStart = event.touches[0].clientY;
            console.log(xStart,yStart);
            break;
        case "touchend":
            xEnd = event.changedTouches[0].clientX;
            yEnd = event.changedTouches[0].clientY;
            var $this = $(this);
            swipehadle($this,xStart,xEnd,yStart,yEnd);
            break;
        case "mousedown":
            xStart = event.clientX;
            yStart = event.clientY;
            console.log(xStart,yStart);
            break;
        case "mouseup":
            xEnd = event.clientX;
            yEnd = event.clientY;
            var $this = $(this);
            swipehadle($this,xStart,xEnd,yStart,yEnd);
            break;
        case "touchmove":
            event.preventDefault();
            break;
        case "mousemove":
            event.preventDefault();
            break;
    }
}

function swipehadle(thebox,xStart,xEnd,yStart,yEnd){
    var horizontalDistance = xEnd-xStart;
    var verticalDistance = yEnd-yStart;
    console.log(xEnd,yEnd);

    var $thebox = thebox;
    var theIndex = $thebox.index();
    console.log($thebox);

    if(verticalDistance>30){
        console.log('swipe down');
        if(theIndex>0){
            //slider down action
            $boxWrapper.css({
                '-webkit-transform': 'translate3d(0,'+(-winH*(theIndex-1))+'px,0)',
                'transform': 'translate3d(0,'+(-winH*(theIndex-1))+'px,0)'
            });
            $thebox.addClass('box-active').siblings().removeClass('box-active');

            //pager show
            $thepage.text(theIndex);
        }
    }else if(verticalDistance<-30){
        console.log('swipe up');
        if(theIndex<boxLength-1){
            //slider up action
            $boxWrapper.css({
                '-webkit-transform': 'translate3d(0,'+(-winH*(theIndex+1))+'px,0)',
                'transform': 'translate3d(0,'+(-winH*(theIndex+1))+'px,0)'
            });
            $thebox.addClass('box-active').siblings().removeClass('box-active');

            //pager show
            $thepage.text(theIndex+2);
        }
    }

    if(horizontalDistance>30){
        console.log('swipe right');
    }else if(horizontalDistance<-30){
        console.log('swipe left');
    }
}

$('body').on("touchstart touchend touchmove mousedown mouseup mousemove",'.box',handleTouchEvent);

Changelog:

2020-12-19

• Updated event

---

This awesome jQuery plugin is developed by taodesign. For more Advanced Usages, please check the demo page or visit the official website.