$blog++

Glide.js a simple, lightweight & fast jQuery slider

Glide is responsive and touch-friendly jQuery slider. Based on CSS3 transitions with fallback to older broswers. It’s simple, lightweight and fast. Designed to slide, no less, no more. A lot has been said this past few weeks about OOCSS markup, Jędrzej Chałubek (creator of Glide.js) needed simple and fast slider with fully customizable OOCSS markup. If you’re into OOCSS this is the way to go.

How to use

jQuery is the only dependency. Make sure to include it.

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

Include Glide.js

<script src="jquery.glide.js"></script>

Link to slider stylesheet inside document head.

<link rel="stylesheet" type="text/css" href="css/style.css">

Make necessary markup for slider.

<div class="slider">
	<ul class="slides">
		<li class="slide"></li>
		<li class="slide"></li>
		<li class="slide"></li>
	</ul>
</div>

Init our slider on default options …

  <script>
	  $('.slider').glide();
  </script>

Best features of Glide.js

• Lightweight ~4,5kB minifed
• Ultra fast CSS3 Transitions
• Responsive
• Touch & mobile friendly
• Public API with callbacks
• OOCSS & BEM
• Swipe event
• Arrows and bullets navigation
• Keyboard navigation
• Autoplay
• Pause on hover

Glide.js

Github

• css3
 
• javascript
 
• jquery
 
• plugin
 
• responsive