Full Width Responsive Slider Plugin For jQuery - CenterSlider.js

CenterSlider.js is a jQuery plugin used for creating a responsive, full width and highly customizable slider that you can slide between slides with arrow keys or by clicking on the sibling elements.

How to use it:

1. Add any html content (e.g. text, images, etc...) to the slider.

<div id="container">
  <div class="slide">
    <div class="object">
      <img src="1.jpg"> 
    </div>
  </div>
  <div class="slide">
    <div class="object">
      <img src="2.jpg"> 
    </div>
  </div>
  <div class="slide">
    <div class="object">
      <img src="3.jpg"> 
    </div>
  </div>
</div>

2. Add jQuery library and the jQuery CenterSlider.js plugin to the web page.

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

3. Apply your CSS styles to the slider.

#container.ready {
  opacity: 1;
  width: 100%;
}

#container {
  overflow: hidden;
  min-height: 100%;
  height: 100%;
  opacity: 0;
}

.slide {
  height: 100vh;
  text-align: center;
  position: relative;
  display: flex;
}

.slide .object {
  background-color: #f1f1f1;
  height: 280px;
  width: 70%;
  display: flex;
  margin: auto;
}

.slide img {
  width: 100%;
  height: 100%;
  padding: 10px;
  background-color: #fff;
}

.centerslide-prev .object,  .centerslide-next .object { cursor: pointer; }

4. Initialize the plugin to generate an image slider.

$('#container').centerSlider();

5. Options and defaults.

$.fn.centerSlider.defaults = {

  // navigate the slider by clicking previous and next objects
  clickNavigation:    true,

  // navigate the slider with arrow keys.
  arrowKeys:          true,

  // fired before the transition of any navigation event
  before:             null,

  // fired after the transition of any navigation event
  after:              null,

  // transition delay
  delay:              0,

  // transition speed
  speed:              800,

  // 
  timeout:            4000,

  // CSS selector for slides
  slide:              '.slide',

  // CSS selector for objects
  object:             '.object',

  // the amount of pixels that each object should be "peeking in" from the sides.
  peekWidth:          50,

  // easing effect
  easing:             'swing'
  
};

---

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