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

Touch-enabled Full Page Slider with jQuery and CSS3 - Slideview
File Size: 42.3 KB
Views Total: 5717
Last Update:
Publish Date:
Official Website: Go to website
License: MIT

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="//"></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
  <div class="slide slide-2">
    <article class="container">
      Slide 2
  <div class="slide slide-3">
    <article class="container">
      Slide 3
  <div class="slide slide-4">
    <article class="container">
      Slide 4
  <div class="slide slide-5">
    <article class="container">
      Slide 5

<!-- 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>


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

  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:


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



  • Optimized Slide State


  • Added styles to fix initial appearance


  • Added !important declaration to buttons when hiding on touch


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


  • Fixed click logic not working


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


  • Updated styles


  • 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.