Touch-enabled Fullscreen Page Slider Plugin With jQuery - XSwitch

XSwitch is a simple yet highly customizable jQuery one page scroll plugin which allows horizontal or vertical scrolling within specified fullscreen elements, with touch swipe, keyboard and mouse wheel support. It uses CSS3 transitions for smooth scrolling effects. It also generates a side navigation where you can navigate between elements by mouse click.

How to use it:

1. The XSwitch plugin requires the latest version of jQuery library loaded correctly in the html document.

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

2. The basic HTML structure. Don't forget to add the 'data-XSwitch' attribute to the top container.

<div id="container" data-XSwitch>
  <div class="sections">
      <div class="section" id="section0"></div>
      <div class="section" id="section1"></div>
      <div class="section" id="section2"></div>
      <div class="section" id="section3"></div>
  </div>
</div>

3. The basic HTML structure. Don't forget to add the 'data-XSwitch' attribute to the top container.

<div id="container" data-XSwitch>
  <div class="sections">
      <div class="section" id="section0"></div>
      <div class="section" id="section1"></div>
      <div class="section" id="section2"></div>
      <div class="section" id="section3"></div>
  </div>
</div>

4. The required CSS styles.

* {
  margin: 0;
  padding: 0;
}

html,  body {
  height: 100%;
  overflow: hidden;
}

#container,  .sections,  .section {
  position: relative;
  height: 100%;
}

.section {
  background-color: #000;
  background-size: cover;
  background-position: 50% 50%;
}

5. Style the side navigation.

.pages {
  position: fixed;
  right: 10px;
  top: 50%;
  list-style: none;
}

.pages li {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
  margin: 15px 0 0 7px;
}

.pages li.active {
  margin-left: 0;
  width: 14px;
  height: 14px;
  border: 4px solid #FFFFFF;
  background: none;
}

6. Apply the following options to the plugin.

$('#container').XSwitch({

  // CSS selectors
  selectors: {
    sections: '.sections',
    section: '.section',
    page: '.pages',
    active: '.active'
  },

  // starting section
  index: 0,

  // jQuery easing function
  easing: 'ease',

  // animation speed
  duration: 500,

  // infinite looping
  loop: false,

  // enable side navigation
  pagination: true,

  // enable keyboard navigation
  keyboard: true,

  // 'vertical' or 'horizontal'
  direction: 'vertical',

  // callback function
  callback: ''
  
});

---

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