A Javascript Library For Slide Transition Effects – slidr

slidr is a standalone javascript library that allows you to slide between any Html elements with smooth transition effects. Ideal for creating any content sliders for your website.



A Javascript Library For Slide Transition Effects - slidr

Transitions supported:

  • Cube
  • Linear
  • Fade
  • Controls
  • Breadcrumbs

How to use it:

Include slidr.js in your web page.

<script type="text/javascript" src="/path/to/slidr.min.js"></script>

Create the Html elements you want to slide.

<ul id="demo" style="display: inline">
  <li data-slidr="one">apple</li>
  <li data-slidr="two">banana</li>
  <li data-slidr="three">coconut</li>

Create the slide transitions in javascript.

slidr.create('demo', {
  breadcrumbs: true,
  controls: 'corner',
  direction: 'vertical',
  fade: false,
  overflow: true,
  theme: '#222',
  timing: { 'cube': '0.5s ease-in' },
  transition: 'cube'

Leave a Reply

Don’t miss out on the latest freebies!

Sign up for my newsletter to receive the latest freebies from the design world. No spam, we promise!