Touch-enabled Full Page Slider with jQuery and CSS3 - Slideview

Slideview is a jQuery plugin which divide your webpage into a fullscreen horizontal slider with smooth transition effects based on CSS3 transitions and transforms. Ideal for a fullscreen html presentation which allows the visitor to navigate between content sections using arrows navigation, dots pagination, mouse drag and touch swipe.

How to use it:

1. Import jQuery library together with the jquery.slideview.js and jquery.slideview.css into your webpage.

<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="js/jquery.slideview.js"></script>
<link rel="stylesheet" href="css/jquery.slideview.css">

2. Build the markup structure for the full page slider.

<div class="slideview">

<!-- Slides -->
<div class="slideview-content">
  <div class="slide slide-1">
    <article class="container">
      Slide 1
    </article>
  </div>
  <div class="slide slide-2">
    <article class="container">
      Slide 2
    </article>
  </div>
  <div class="slide slide-3">
    <article class="container">
      Slide 3
    </article>
  </div>
  <div class="slide slide-4">
    <article class="container">
      Slide 4
    </article>
  </div>
  <div class="slide slide-5">
    <article class="container">
      Slide 5
    </article>
  </div>
</div>

<!-- Slider controls -->
<a class="slideview-button slideview-prev" aria-label="Previous"></a> 
<a class="slideview-button slideview-next" aria-label="Next"></a>
<div class="slideview-pagination"></div>

</div>

3. Initialize the plugin by calling the function on top container.

$(".slideview").slideview({
  nextButton: '.slideview-next',
  prevButton: '.slideview-prev'
});

4. Create your own CSS to style the slides.

.slideview {
  width: 100%;
  height: 100%;
  background: #eaeaea;
}

.slide {
  width: 100%;
  height: 100%;
}

article {
  background: #fff;
  height: 100%;
  overflow: auto;
  max-width: 768px;
}

5. Default options.

contentSelector: '> .slideview-content',
scrollStyle: 'position', 

transition: {
  type: 'swipe', 
  duration: 500, 
  easing: 'swing'
},

mouseDragging: true, 
transitionInterruptable: false, 
userInteraction: true, 
endless: false, 
maxTouchTime: 250,

// playback
autoStart: false, 
showDuration: 4000, 

// load management
slideSelector: '.slide', 

offset: 0, 
limit: 2, 

// callbacks
slideLoaded: null, 
slideBefore: null, 
slideComplete: null, 
slide: null,

preloadImages: true,

nextButton: '.slideview-next',
prevButton: '.slideview-prev',
buttonDisabledClass: 'slideview-button-disabled',

pagination: '.slideview-pagination',
paginationActiveClass: 'slideview-pagination-active',
paginationItem: function(index) {
  return $('<a class="slideview-pagination-item"></a>');
}

Change logs:

2015-10-29

• When updating, do transition only if items options is not set

2015-10-29

• JS update.

2015-10-28

• Optimized Slide State

2015-09-23

• Added styles to fix initial appearance

2015-09-19

• Added !important declaration to buttons when hiding on touch

2015-09-18

• Fixed dragging reset on touchend instead of touchstart
• Fixed prevent default click on dragging

2015-09-17

• Fixed click logic not working

2015-09-11

• Change title even if url matches current location
• Fixed isDragging not resetted on touchstart

2015-09-04

• Updated styles

2015-07-08

• Integrated image loading and history control

---

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