Responsive Horizontal Slider Plugin For jQuery - Codezero Slider

Codezero Slider is a small, responsive jQuery slider plugin which allows to scroll horizontally through a group of slides with custom overlay and zoom effects.

More features:

• Supports any html content such as images, background images, etc.
• Auto set the slide's width and height based on its container.
• Highly customizable via CSS and HTML5 data attributes.
• Fully responsive and Touch-enabled.

Install it via package managers:

# NPM
$ npm install codezero-jquery-slider

# Bower
$ bower install codezero-jquery-slider

How to use it:

1. Load the required 3rd party scripts in the document.

<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/jquery.scrollTo.min.js"></script>
<script src="/path/to/jquery.mobile-events.js"></script>

2. Download and load the jQuery Codezero Slider plugin's files in the document.

<link rel="stylesheet" href="css/slider.min.css">
<script src="js/slider.min.js"></script>

3. Initialize the plugin and the jQuery Codezero Slider is ready for use.

$('.slider').slide();

4. The basic html to create a background image slider(with auto width and overlay/zoom effects).

<div class="slider">
  <a href="#" class="slider-prev">&langle;</a> 
  <a href="#" class="slider-next">&rangle;</a>
  <div class="slider-viewport">
    <div class="slider-track">
      <div class="slide" data-background="1.jpg">
        <h1>Hello World</h1>
        <p>Without overlay and zoom!</p>
      </div>
      <div class="slide" data-background="2.jpg">
        <div class="slide-overlay" style="padding: 0 1em;">
          <h1>Hello World</h1>
          <p>With overlay!</p>
        </div>
      </div>
      <div class="slide" data-zoom-background="3.jpg">
        <h1>Hello World</h1>
        <p>With zoom!</p>
      </div>
      ...
    </div>
  </div>
</div>

5. The html to create a normal inline image slider (with auto width and overlay/zoom effects).

<div class="slider slide-full-width">
  <a href="#" class="slider-prev">&langle;</a> 
  <a href="#" class="slider-next">&rangle;</a>
  <div class="slider-viewport">
    <div class="slider-track"> 
      
      <!-- No hoverlay, no caption -->
      <div class="slide"> 
        <a href="#" class="slide-image">
          <img src="1.jpg"> 
        </a> 
     </div>
      
      <!-- Icon hoverlay, no caption -->
      <div class="slide">
        <a href="#" class="slide-image">
         <i class="fa fa-search-plus slide-image-hoverlay"></i> 
         <img src="2.jpg">
        </a> 
      </div>
      
      <!-- Text hoverlay, no caption -->
      <div class="slide">
        <a href="#" class="slide-image">
         <span class="slide-image-hoverlay">VIEW ME</span> 
         <img src="3.jpg"> 
        </a> 
      </div>
      
      <!-- No hoverlay, only caption -->
      <div class="slide">
        <a href="#" class="slide-image">
          <img src="https://unsplash.it/610/200/">
          <span class="slide-image-caption"> Image caption here! </span>
        </a> 
      </div>
      
      <!-- Both hoverlay and caption -->
      <div class="slide">
        <a href="#" class="slide-image">
          <i class="fa fa-search-plus slide-image-hoverlay"></i>
          <img src="https://unsplash.it/410/200/"> 
          <span class="slide-image-caption"> Image caption here! </span> 
        </a> 
     </div>
    </div>
  </div>
</div>

5. Plugin's default customization options and event handlers.

$('.slider').slide({
  // General settings...
  slideSpeed: 500,
  enableSwipe: true,

  // If you change class / data attribute names,
  // you will need to change related CSS files
  viewport: '.slider-viewport',
  track: '.slider-track',
  slide: '.slide',
  // Arrows
  prevArrow: '.slider-prev',
  nextArrow: '.slider-next',
  // Slider state
  atLastSlide: '.slider-end',
  atFirstSlide: '.slider-start',
  noSlide: '.no-slide',
  // Slide image classes
  imageContainerClass: '.slide-image',
  imageAsBackgroundClass: '.slide-image-background',
  imageAsBackgroundWrapperClass: '.slide-image-background-wrapper',
  // Slide background classes / data attributes
  backgroundClass: '.slide-data-background',
  backgroundZoomClass: '.slide-data-zoom-background',
  backgroundDataAttr: 'background',
  backgroundZoomDataAttr: 'zoom-background',

  // Check if we should enable single slide mode..
  // Return true to scroll only one slide or false to slide the default distance.
  // You can also set this to a boolean instead of a function.
  // By default, if any slide is wider than 30% of the viewport, single slide mode is enabled.
  isInSingleSlideMode: function ($slider) {
      var isInSingleSlideMode = false,
          viewportWidth = $slider.find(this.viewport).width();

      $slider.find(this.slide).each(function () {
          isInSingleSlideMode = $(this).outerWidth() / viewportWidth > .3;
          return ! isInSingleSlideMode;
      });

      return isInSingleSlideMode;
  },

  // Slide distance used if "isInSingleSlideMode" is true.
  // Return any value supported by the jquery.scrollTo plugin:
  // https://github.com/flesler/jquery.scrollTo
  // By default this will slide 70% of the viewport.
  defaultSlideDistance: function ($slider, $viewport, $track, isNext) {
      return (isNext ? '+=' : '-=') + ($viewport.width() * .7) + 'px';
  },

  // Before callbacks...
  // Return false to cancel slide.
  onBeforeSlideNext: function ($slider) { },
  onBeforeSlidePrev: function ($slider) { },

  // After callbacks...
  onAfterSlideNext: function ($slider) { },
  onAfterSlidePrev: function ($slider) { }
});

Change log:

2017-08-26

• Avoid .slide-overlay to have 0px height in Safari

---

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