Ubislider

Simple and lightweight responsive jQuery slider

Example 1 | Horizontal

Example 2 | Vertical on the left

Example 3 | Vertical on the right

Example 4 | Integration with ElevateZoom

Why should I use this slider?

  1. Fully responsive - will adapt to any device
  2. Slides can contain images, video, or HTML content
  3. Small file size, fully themed, simple to implement
  4. Browser support: Firefox, Chrome, Safari, iOS, Android, IE7+
  5. Very light and loading fast
  6. Different types of usage

Installation

Step 1: Link required files

First and most important, the jQuery library needs to be included (no need to download - link directly from Google). Next, download the package from this site and link the ubislider CSS file (for the theme) and the ubislider Javascript file.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- ubislider Javascript file -->
<script src="/js/ubislider.min.js"></script>
<!-- ubislider CSS file -->

<link href="/css/ubislider.css" rel="stylesheet" />
Step 2: Create HTML markup

Slides can contain images, video, or any other HTML content! Put your content of each slider inside <li> tag

Example 1 and 4 code | Horizontal and Integration with ElevateZoom

For integration with ElevateZoon specify id to .ubislider-image-container div.

<div class="ubislider-image-container" data-ubislider="#slider" id="imageSlider"></div>
<div class="ubislider" id="slider">
    <a class="arrow prev"></a>
    <a class="arrow next"></a>
    <ul class="ubislider-inner">
        <li>
        	<img src="img/sample1.jpg">
        </li>
        <li>
        	<img src="img/sample2.jpg">
        </li>
        <li>
        	<img src="img/sample3.jpg">
        </li>
    </ul>
</div>
Example 2 and 3 code | Vertical on the left and right

Need to be added left or right class near .ubislider-image-container and .ubislider classes and give needed styling in css.

<div class="ubislider-image-container left" data-ubislider="#slider"></div>
<div class="ubislider left" id="slider">
    <a class="arrow prev"></a>
    <a class="arrow next"></a>
    <ul class="ubislider-inner">
        <li>
        	<img src="img/sample1.jpg">
        </li>
        <li>
        	<img src="img/sample2.jpg">
        </li>
        <li>
        	<img src="img/sample3.jpg">
        </li>
    </ul>
</div>
Step 3: Call the ubislider

Call .ubislider() on <div id="ubislider">. Note that the call can made inside or outside of a $(document).ready() call, and the plugin will work without issue!

Example 1 code | Horizontal

$(document).ready(function(){
  $('#slider').ubislider({
	arrowsToggle: true,
        type: 'ecommerce',
        hideArrows: true,
        autoSlideOnLastClick: true,
        modalOnClick: true
  });
});
Example 2 & 3 code | Vertical on the left and right

Need to assign position to vertical so slide with start scrolling from Top to bottom inside of standard scrolling.

$(document).ready(function(){
 $('#slider').ubislider({
    arrowsToggle: true,
    type: 'ecommerce',
    hideArrows: true,
    autoSlideOnLastClick: true,
    modalOnClick: true,
    position: 'vertical'
 });
});
Example 4 code | Integration with ElevateZoom

You can call onTopImageChange callback function for running scripts after the top image is changed.

$(document).ready(function(){
 $('#slider').ubislider({
    arrowsToggle: true,
    type: 'ecommerce',
    hideArrows: true,
    autoSlideOnLastClick: true,
    modalOnClick: true,
    onTopImageChange: function(){
    	$('#imageSlider img').elevateZoom();
    }
 });
});

Example 5 | Full width Slider

Step 2: Create HTML markup

Slides can contain images, video, or any other HTML content! Put your content of each slider inside <li> tag


<div class="ubislider" id="slider">
    <a class="arrow prev"></a>
    <a class="arrow next"></a>
    <ul class="ubislider-inner">
        <li>
        	<img src="img/sample1.jpg">
        </li>
        <li>
        	<img src="img/sample2.jpg">
        </li>
        <li>
        	<img src="img/sample3.jpg">
        </li>
    </ul>
</div>
Step 3: Call the ubislider

Call .ubislider() on <div id="ubislider">. Note that the call can made inside or outside of a $(document).ready() call, and the plugin will work without issue!

$(document).ready(function(){
  $('#slider').ubislider({
  	bullets: true
  });
});

Example 6 | Full width Slider with videos (both youtube and HTML5 video file)

Step 2: Create HTML markup

Slides can contain images, video, or any other HTML content! Put your content of each slider inside <li> tag


<div class="ubislider" id="slider">
    <a class="arrow prev"></a>
    <a class="arrow next"></a>
    <ul class="ubislider-inner">
        <li>
        	<iframe width="100%" height="600" src="https://www.youtube.com/embed/rlR4PJn8b8I" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>

        </li>
        <li>
        	<video width="320" height="240" controls style="width: 100%; min-height: 600px;">
                   <source src="videos/trailer_480p.mov" type="video/mp4">
                </video>
        </li>
    </ul>
</div>
Step 3: Call the ubislider

Call .ubislider() on <div id="ubislider">. Note that the call can made inside or outside of a $(document).ready() call, and the plugin will work without issue!

$(document).ready(function(){
  $('#slider').ubislider({
  	bullets: true
  });
});