Smooth Adaptive Slider Carousel jQuery Plugin - Unicorn Slider

Unicorn Slider is a simple, configurable jQuery slider plugin that helps you create a responsive, horizontal/vertical image carousel with 5 predefined styles.

Main features:

• Supports both horizontal and vertical layouts.
• Auto highlight current slide image.
• Multiple images per slide.
• Easing methods supported. Requires jQuery easing plugin.
• Touch events are supported as well.

How to use it:

1. Load the jQuery Unicorn Slider plugin's files into your html page which has jQuery library included.

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

2. The basic html structure for the Unicorn Slider.

<div class="unicornslider">
  <ul>
      <li>
          <a class="unicorn-a">
              <div class="unicorn1"></div>
              <div class="unicorn-label"><span><span>Alex</span></span></div>
          </a>
      </li>
      <li>
          <a class="unicorn-a">
              <div class="unicorn2"></div>
              <div class="unicorn-label"><span><span>Bert</span></span></div>
          </a>
      </li>
      <li>
          <a class="unicorn-a">
              <div class="unicorn3"></div>
              <div class="unicorn-label"><span><span>Chantalle</span></span></div>
          </a>
      </li>
      <li>
          <a class="unicorn-a">
              <div class="unicorn4"></div>
              <div class="unicorn-label"><span><span>Doris</span></span></div>
          </a>
      </li>
      <li>
          <a class="unicorn-a">
              <div class="unicorn5"></div>
              <div class="unicorn-label"><span><span>Etienne</span></span></div>
          </a>
      </li>
  </ul>
</div>

3. Add your images as backgrounds to the Unicorn Slider.

.unicorn1 { background-image: url("1.png"); }
.unicorn2 { background-image: url("2.png"); }
.unicorn3 { background-image: url("3.png"); }
.unicorn4 { background-image: url("4.png"); }
.unicorn5 { background-image: url("5.png"); }

4. Call the plugin to generate a basic, horizontal carousel.

$(".unicornslider").unicornslider({
  visibleItems: 99
});

5. Initialize as a vertical carousel.

$(".unicornslider").unicornslider({
  orientation: "vertical"
});

6. Plugin's default config options.

$(".unicornslider").unicornslider({

  // Boolean: Debug mode
  debug: false,                   

  // Boolean: Show arrows across borders
  wrapAround: true,               

  // Boolean: Shrink wrapper to minmal size
  leanWrapper: false,             

  // String: Select the animation direction, "horizontal" or "vertical"
  orientation: "horizontal",      

  // String: Prefix string attached to the class of every element generated by the plugin
  namespace: "unicornslider-",    

  // String: Determines the easing method used in jQuery transitions. 
  // jQuery easing plugin is supported!
  easing: "swing",           

  // String: Will be inserted in prev tag     
  prevText: "prev",               

  // String: Will be inserted in next tag
  nextText: "next",               

  // String: Additional class for style in parent element
  style: "",                     

  // String: Select if active element is centered, "off", "mobile", "desktop" or "on" 
  centerActive: "on",             

  // Integer: Number of items to scroll on button click
  scrollItems: 1,                 

  // Integer: Height of button element in px
  buttonHeight: 50,               

  // Integer: Width of button element in px
  buttonWidth: 50,                

  // Integer: The number of items visible 
  visibleItems: 1,             

  // Integer: Animation speed in Milliseconds   
  speed: 1000,                    

  // Integer: The item active on init
  startFrom: 0,                   
  
  // Function: Callback function that fires on init done
  init: function () {},           

  // Function: Callback function that fires on button "prev" or "next" before button click is processed
  button: function () {},         

  // Function: Callback function that fires on animation started
  animationStart: function () {}, 

  // Function: Callback function that fires on animation ended
  animationEnd: function () {},   

  // Function: Callback function that fires on slider destroyed
  destroyed: function () {}       
  
});

Change log:

2016-10-14

• mobile improvements

2016-09-14

• supports touch events

2016-07-13

• update

---

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