add some slide effects.

Overview

slidr.js

A simple, lightweight javascript library for adding slide transitions to your page. No dependencies required.

Tested on Chrome 26.0, Firefox 20.0, Safari 5.1.7, IE 10, Opera 16.0. Limited support for IE8/9.

Check out the demo here.

Features

  • Add as many Slidr's as you want - even place them within each other.
  • Dynamic resizing - adapts to the size of its content, unless you don't want it to.
  • Keyboard navigation - move your cursor on top of a Slidr, and hit the arrow keys!
  • Touch navigation (mobile) - change slides by swiping left, right, up or down!

Instructions

Include either slidr.js or slidr.min.js somewhere at the bottom of your html page, after the body content.

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

HTML

slidr.js works on any inline, inline-block or block elements with an id defined. Valid slides include any first-level children elements with the data-slidr attribute set to some unique value within the parent scope. For example:

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

<div id="slidr-img" style="display: inline-block">
  <img data-slidr="one" src="/static/images/apple.png"/>
  <img data-slidr="two" src="/static/images/banana.png"/>
  <img data-slidr="three" src="/static/images/coconut.png"/>
</div>

<div id="slidr-div" style="display: block">
  <div data-slidr="one">apple</div>
  <div data-slidr="two">banana</div>
  <div data-slidr="three">coconut</div>
</div>

are all valid html markup for creating three different Slidr's within the same page. (inline elements are transformed into inline-blocks in order to apply transitions).

Javascript

A global slidr object is available for calling. The most minimal way of creating a slidr is this:

slidr.create('slidr-id').start();

create() accepts an optional settings parameter as its second argument. A call with all the settings toggled looks like so:

slidr.create('slidr-id', {
  after: function(e) { console.log('in: ' + e.in.slidr); },
  before: function(e) { console.log('out: ' + e.out.slidr); },
  breadcrumbs: true,
  controls: 'corner',
  direction: 'vertical',
  fade: false,
  keyboard: true,
  overflow: true,
  theme: '#222',
  timing: { 'cube': '0.5s ease-in' },
  touch: true,
  transition: 'cube'
}).start();

Settings

Full details on available settings listed below:

Parameter Type Default Description
after function no-op Callback function after a slide transition finishes.
before function no-op Callback function before a slide transition begins.
breadcrumbs bool false Show or hide breadcrumbs on start(). true or false.
controls string border Show or hide control arrows on start(). border, corner or none.
direction string horizontal The default direction for new slides. horizontal or h, vertical or v.
fade bool true Whether slide transitions should fade in/out. true or false.
keyboard bool false Whether to enable keyboard navigation upon mouseover. true or false.
overflow bool false Whether to overflow transitions at slidr borders. true or false.
pause bool false Whether to pause on mouseover when running in auto(). true or false.
theme string #fff Sets color theme for breadcrumbs/controls. #hexcode or rgba(value).
timing object {} Custom animation timings to apply. {'transition': 'timing'}.
touch bool false Whether to enable touch navigation for mobile devices. true or false.
transition string linear The default transition to apply. cube, linear, fade, or none.

The before and after callback functions return the following metadata:

{
  id: "slidr-id",
  in: {
    el: #<HTMLElement>,
    slidr: "data-slidr-in",
    trans: "transition-in",
    dir: "direction-in"
  },
  out: {
    el: #<HTMLElement>,
    slidr: "data-slidr-out",
    trans: "transition-out",
    dir: "direction-out"
  }
}

Global API

The global slidr namespace provides the following function calls:

/**
 * Current version.
 * @return {string} major.minor.patch.
 */
 function version() {};

/**
 * Available transitions.
 * @return {Array} of transitions.
 */
 function transitions() {};

/**
 * Creates and returns a Slidr.
 * Calling create on the same element twice returns the already instantiated Slidr.
 * @param {string} id The element id to turn into a Slidr.
 * @param {Object=} opt_settings Settings to apply.
 */
 function create(id, opt_settings) {};

Slidr API

For javascript control, you can save a reference to the Slidr object as follows:

// Initialize a Slidr. 
// Display breadcrumbs, overflow transitions, use cube transition.
var s = slidr.create('slidr-api-demo', {
  breadcrumbs: true,
  overflow: true
});

// Add horizontal slides with default linear transition.
// The extra "one" allows the slidr to circle back and loop infinitely.
s.add('h', ['one', 'two', 'three', 'one']);

// Add vertical slides using a cube transition.
s.add('v', ['five', 'four', 'three', 'five'], 'cube');

// Now start.
s.start();

Slidr functions are fully chainable (where it makes sense to do so). The following is equivalent:

var s = slidr.create('slidr-api-demo', {
  breadcrumbs: true,
  overflow: true
}).add('h', ['one', 'two', 'three', 'one'])
  .add('v', ['five', 'four', 'three', 'five'], 'cube')
  .start();

The full list of available functions in a Slidr object is listed below:

/**
 * Start the Slidr!
 * Automatically finds slides to create if nothing was added prior to calling start().
 * @param {string} opt_start `data-slidr` id to start on.
 * @return {this}
 */
 function start(opt_start) {};

/**
 * Check whether we can slide.
 * @param {string} next a direction ('up', 'down', 'left', 'right') or a `data-slidr` id.
 * @return {boolean}
 */
 function canSlide(next) {};

/**
 * Slide!
 * @param {string} next a direction ('up', 'down', 'left', 'right') or a `data-slidr` id.
 * @return {this}
 */
 function slide(next) {};

/**
 * Adds a set of slides.
 * @param {string} direction `horizontal || h` or `vertical || v`.
 * @param {Array} ids A list of `data-slidr` id's to add to Slidr. Slides must be direct children of the Slidr.
 * @param {string=} opt_transition The transition to apply between the slides, or uses the default.
 * @param {boolean=} opt_overwrite Whether to overwrite existing slide mappings/transitions if conflicts occur.
 * @return {this}
 */
 function add(direction, ids, opt_transition, opt_overwrite) {};

/**
 * Automatically advance to the next slide after a certain timeout. Calls start() if not already called.
 * @param {int=} opt_msec The number of millis between each slide transition. Defaults to 5000 (5 seconds).
 * @param {string=} opt_direction 'up', 'down', 'left', or 'right'. Defaults to 'right'.
 * @param {string=} opt_start The `data-slidr` id to start at (only works if auto is called to start the Slidr).
 * @return {this}
 */
 function auto(opt_msec, opt_direction, opt_start) {};

/**
 * Stop auto transition if it's turned on.
 * @return {this}
 */
 function stop() {};

/**
 * Set custom animation timings.
 * @param {string|Object} transition Either a transition name (i.e. 'cube'), or a {'transition': 'timing'} object.
 * @param {string=} opt_timing The new animation timing (i.e "0.5s ease-in"). Not required if transition is an object.
 * @return {this}
 */
 function timing(transition, opt_timing) {};

/**
 * Toggle breadcrumbs.
 * @return {this}
 */
 function breadcrumbs() {};

/**
 * Toggle controls.
 * @param {string=} opt_scheme Toggle on/off if not present, else change layout. 'border', `corner` or `none`.
 * @return {this}
 */
 function controls(opt_scheme) {};

CSS

Temporary scrollbar during transitions

On some browsers, Slidr's that transition beyond the viewport might force an unwanted temporary scrollbar to appear (although this won't affect the page, the flickering can still be annoying). To fix this, add the following CSS:

body {
  overflow: hidden;
}

Dynamic resize

Slidr follows a fairly straightforward heuristic for figuring out what it's width or height should be. If the width and height is explicitly set, Slidr will not resize. Otherwise, it will always adapt to the size of its content. You can also set just one and it'll dynamic resize the other.

If min-width and min-height is defined, Slidr will only resize if the content exceeds those bounds.

Dynamically resizing (no width/height set):

<div id="slidr-inline-dynamic" style="display: inline">
  <div data-slidr="one">good</div>
  <div data-slidr="two">gorgeous</div>
  <div data-slidr="three">unbelievable</div>
</div>

Static sizing (width and height set):

<div id="slidr-inline-static" style="display: inline; width: 155px; height: 30px">
  <div data-slidr="one">good</div>
  <div data-slidr="two">gorgeous</div>
  <div data-slidr="three">unbelievable</div>
</div>

Slidr controllers

Slidr controllers are marked up like so:

<aside id="{slidr-id}-control">
  <div class="slidr-control up"></div>
  <div class="slidr-control down"></div>
  <div class="slidr-control left"></div>
  <div class="slidr-control right"></div>
</aside>

You can customize the look of Slidr controls through CSS selectors like below:

// Customizing a specific controller arrow.
aside[id="{slidr-id}-control"] .slidr-control.right {
  width: 50px !important;
  height: 50px !important;
  top: 50% !important;
  margin-top: -25px !important;
  right: -25px !important;
  border-radius: 25px;
  background: url('/static/images/arrow_right.png') 14px 13px no-repeat black;
  opacity: 0.4;
}

aside[id="{slidr-id}-control"] .slidr-control.right:hover {
  opacity: 1;
}

Note: controller arrows make use of the :after pseudo element. To hide the default triangular arrow, use the following CSS:

// Hide a single arrow within a single controller.
aside[id="{slidr-id}-control"] .slidr-control.right:after {
  border-color: transparent !important;
}

// Hide all arrows within a single controller.
aside[id="{slidr-id}-control"] .slidr-control:after {
  border-color: transparent !important;
}

// Hide all Slidr arrows.
aside[id*="-control"] .slidr-control:after {
  border-color: transparent !important;   
}

Slidr breadcrumbs

Slidr breadcrumbs have a similar HTML markup. Each ul denotes an entire row, while each li denotes an individual breadcrumb:

<aside id="{slidr-id}-breadcrumbs">
  <ul class="slidr-breadcrumbs">
    <li></li>
    <li class="normal"></li>
    <li class="normal active"></li>
  </ul>
  ...
</aside>

Thus you can configure them like so:

// Customize the position, size, border color and background color.
aside[id="{slidr-id}-breadcrumbs"] {
  right: 50% !important;
  margin-right: -41px !important;
}

aside[id="{slidr-id}-breadcrumbs"] .slidr-breadcrumbs li {
  width: 15px !important;
  height: 15px !important;
  margin: 3px !important;
}

aside[id="{slidr-id}-breadcrumbs"] .slidr-breadcrumbs li.normal {
  border-color: white !important;
}

aside[id="{slidr-id}-breadcrumbs"] .slidr-breadcrumbs li.active {
  background-color: black !important;
}

In the worst case, feel free to create your own controllers and access via the Slidr API instead!

For further questions or issues, visit here.

License

This software is free to use under the MIT license.

Comments
  • Auto Transition

    Auto Transition

    I really like the slider! I'm just having trouble getting the auto slide feature to work

    slidr.create('slidr-img', { after: function(e) { console.log('in: ' + e.in.slidr); }, before: function(e) { console.log('out: ' + e.out.slidr); }, breadcrumbs: true, controls: 'none', direction: 'horizontal', fade: true, keyboard: false, overflow: false, theme: '#222', timing: { 'fade': '.3s ease-in' }, touch: false, transition: 'fade' }).start(); });

    slidr.auto(2, left, data-slidr); slide(right);

    question 
    opened by amilajack 14
  • no keyboard naviagation

    no keyboard naviagation

    Keyboard navigation - move your cursor on top of a Slidr, and hit the arrow keys!

    Does not seem to work on Win7, FF24, Chrome Beta, IE10.

    Other than that, seems like an awesome library!

    invalid question 
    opened by tomByrer 5
  • Multiple sliders

    Multiple sliders

    Hi,

    I got a problem using the slider multiple times. The page is: http://www.communityinnovations.com.au/corporate-social-responsibility/

    I checked the code several times. ID#'s are correct and matching. But the statistics slider is not working.

    Ideas?

    question 
    opened by slarcher 5
  • Cannot call method of 'start' undefined.

    Cannot call method of 'start' undefined.

    I have this markup on the page, and both the slidr library and object call comes in just at the end of the body. The implementation works flawlessly on Chrome on OS X even though the console spits this message:

    Uncaught TypeError: Cannot call method 'start' of undefined 
    

    However, Chrome on Windows doesn't render slidr at all, instead leaving a 0 height object.

    The Body

    <div id="featured" class="center">
        <div data-slidr="one">
            <h2><a href="http://pearshapedexeter.com/post/77702772634/skaters-manhattan-review">Skaters - 'Manhattan' Review</a></h2>
            <img src="http://i.imgur.com/Q6ad10V.jpg" alt="Manhattan - Skaters">
            <p><b>Pip Williams</b> reviews the new release from up and coming group Skaters.</p>
        </div>
        <div data-slidr="two">
            <h2><a href="http://pearshapedexeter.com/post/77701630818/post-four-monday-24th-february-2014-hello-fond">The Listening Post - #4</a></h2>
            <img src="http://i.imgur.com/RG6yUlv.jpg" alt="The Listening Post">
            <p><b>James Hitchings-Hales</b> flags the best in new music for your perusal.</p>
        </div>
        <div data-slidr="three">
            <h2><a href="http://pearshapedexeter.com/post/77700202322/thumpers-headline-kink-nights-at-the-cavern">Thumpers Headline KINK</a></h2>
            <img src="http://i.imgur.com/gmIGaaR.jpg" alt="Thumpers at Cavern">
            <p><b>Jack Reid</b> gives his take on the appearance of the formidable Thumpers at Cavern.</p>
        </div>
    </div>
    

    The Call

    // Slider
            slidr.create('featured', {
              breadcrumbs: true,
              controls: 'border',
              keyboard: true,
              theme: '#498c34',
              touch: true,
              transition: 'cube'
            }).start();
    
    opened by JackWReid 4
  • ui-router and slidr

    ui-router and slidr

    I have implemented a very simple slidr in my website. However when I load the page where the slidr is with ui-router (similar to ajax), the slidr brake up. Any idea?

    question 
    opened by samuelecioni 4
  • href for images

    href for images

    I am trying to wrap img sliders with href, but it is not working. Here is the html

     <div id="slidr" style="display: inline">
                <span data-slidr="one"><a href="/documents/membership/newmemberhandbook.pdf"  target="_blank"><img  src="/images/sp_sliders/NewMember1.jpg"></a></span>
                <a data-slidr="two" href="/cig/home/#national-convention"><img  src="/images/sp_sliders/2015con.jpg"></a>
                <img data-slidr="three" src="/images/sp_sliders/leadership.jpg">
                <img data-slidr="four" src="/images/sp_sliders/PIZZABOX.jpg">
            </div>
    

    Here is the javascript

    <script>
        var s = slidr.create('slidr', {
            'controls': 'border',
            fade: false,
            keyboard: true,
            overflow: true,
            pause: false,
            theme: '#222',
            timing: { 'cube': '0.5s ease-in' },
            touch: true,
            transition: 'cube'
        });
        s.add('h', ['one', 'two', 'three', 'four', 'one']);
        s.auto();
    </script>
    

    Any suggestions. I love how simple this slider is to use

    opened by jay4linux 3
  • Remove moot `version` property from bower.json

    Remove moot `version` property from bower.json

    Per bower/bower.json-spec@a325da3

    Also their maintainer says they probably won't ever use it: http://stackoverflow.com/questions/24844901/bowers-bower-json-file-version-property

    opened by kkirsche 3
  • Delay

    Delay

    Hi there,

    Is there a way to have a delay in-between the slides changing? i.e. first slide shows > user clicks breadcrumb > delay > change slide function runs.

    Reason being that we have some animation that runs on individual components within each slide and we want to run some more animation on those components before we run the animation for next slide.

    I have tried using timing: { 'none': '5s ease-in' } to control this, however by passing 'none' it means the 5s delay doesn't happen.

    I hope that makes sense.

    opened by wayferer 3
  • Change Slide with a Navbar

    Change Slide with a Navbar

    I would like to change the content of the whole page with a navbar on the top.

    Is there a slidr.goTo( "someSlide" ) function that I can call when an element in the navbar is clicked?

    opened by cgarciae 3
  • Fallback for older browsers

    Fallback for older browsers

    Hi Brian

    I know you developed this for cutting edge browsers however I was wondering if you could recommend a fallback situation for IE8 for example. Not saying some crazy effects but just a simple manual slide ability.

    Is there something you would recommend?

    Thanks

    bug question 
    opened by slarcher 3
  • endless loop

    endless loop

    Hello, is it possible to make an endless loop? after the last picture it should start from the beginning. i didn't find anything for this topic

    THANKS for help and thank for the amazing plugin

    greets steri

    opened by steri-rex 2
  • Centering slide images vertically

    Centering slide images vertically

    I need to set a fixed width for the slide show, which also means max-width and max-height for the images. This means that some images will be less high than the slideshow container, and they are positioned at the top.

    I was wondering how one can center slide images vertically. Since the images are positioned absolutely by slidr.js, it's not as simple as adding a vertical-align directive. Adding a top: xx directive will apply to all images, not only the small ones.

    opened by william-vw 2
  • How to make multiple slides ?!

    How to make multiple slides ?!

    Hi, it's a pretty nice plugin and documented very well. but I only miss the multiple options.

    Is it possible to slide 2 or three items at the same time? and sorry to open an issue for this.

    opened by Alaamasoud 1
  • Slide in random direction and specific timings per slide

    Slide in random direction and specific timings per slide

    I am using slidr to build out a display screen and it works well however I have 2 things I would like to accomplish. The first being, could I set a data-attribute on each slide which determines the direction to slide next, thus allowing me to create a 'random' effect for transitions?

    The 2nd thing I would like to do is have a data-attribute on each slide which defines how long this slide should be visible for before advancing - is this also possible using the api at all?

    Thanks in advamce

    opened by BHWD 4
  • Uncaught TypeError in Chrome

    Uncaught TypeError in Chrome

    Hello,

    As title sad I have error using your plugin on Chrome v67. I am receiving error Uncaught TypeError: Cannot set property 'el' of null on slidr.js?v=1529922826:539.

    Strange thing is that it work in every other browser (Firefox Quantum, IE11, Opera).

    opened by danicic89 0
Releases(v0.5.0)
  • v0.5.0(Feb 16, 2014)

    • Fixed some weird quirks on IE8/9
    • Added pause option in settings. If true, pauses a Slidr on mouseover when running in auto(). Defaults to false.
    • Calling auto() now reuses any previously passed in parameters. This allows resuming a slidr after a call to stop().
    Source code(tar.gz)
    Source code(zip)
  • v0.4.0(Dec 20, 2013)

  • v0.3.0(Nov 21, 2013)

    • Added keyboard navigation setting (requires a mouseover on a Slidr to trigger)
    • Added touch (swipe) navigation for mobile
    • Performance improvements:
      • Refactored keyframe creation - now generates a set of static, reusable animations instead of creating globally unique animations per Slidr
      • Use a single global timer to poll for resize, instead of individual timers per Slidr
      • Added a subtle transition effect when a Slidr resizes
      • Remove tap highlights and user-select on mobile
      • Correctly allow recreating a Slidr if it gets removed from the DOM and reinserted
    Source code(tar.gz)
    Source code(zip)
  • v0.2.0(Nov 14, 2013)

  • v0.1.0(Oct 24, 2013)

Owner
Brian Chan
Brian Chan
Vegas is a jQuery/Zepto plugin to add beautiful backgrounds and Slideshows to DOM elements.

Vegas – Backgrounds and Slideshows Vegas is a jQuery/Zepto plugin to add beautiful backgrounds and Slideshows to DOM elements. Important note: Vegas 2

Jay Salvat 1.8k Jan 7, 2023
Easily add the iOS style pull-to-refresh functionality to any page.

NO LONGER SUPPORTED. USE AT YOUR OWN RISK. Easily add the iOS style pull-to-refresh functionality to any page. iOS users have become accustomed to bei

Daniel Raftery 48 Apr 14, 2022
Some experimental rain and water drop effects in different scenarios using WebGL, by Lucas Bebber.

Rain & Water Effect Experiments Some experimental rain and water drop effects in different scenarios using WebGL, by Lucas Bebber. Article on Codrops

Codrops 1.4k Jan 4, 2023
Loading effects for assets including some built in animated reveals

Asset loading effects This is a library to show the loading progress of given assets and reveal them using various animations. Please give feedback, r

Zach Saucier 97 Dec 8, 2022
Some ideas for decorative link distortion effects using SVG filters.

Distorted Link Effects A couple of ideas for decorative link distortion effects using SVG filters on lines, circles and squares. Article on Codrops De

Codrops 122 Dec 4, 2022
Some shape morphing hover effects on images using SVG clipPath.

Organic Shape Animations with SVG clipPath Some shape morphing hover effects using SVG clipPath on an image. Article on Codrops Demo Credits Anime.js

Codrops 197 Oct 16, 2022
A lightweight, efficient and easy-to-use Canvas library for building some cool particle effects.

JParticles · 中文 | English 官网:jparticles.js.org 特效列表 粒子运动 波纹运动 波纹进度条 雪花飘落 线条动画 介绍 JParticles(JavaScript Particles 的缩写)是一款基于 Canvas 的不依赖于其他库的轻量级 JavaScr

花祁 466 Dec 27, 2022
Tiny CSS framework with almost no classes and some pure CSS effects

no.css INTERACTIVE DEMO I am tired of adding classes to style my HTML. I just want to include a .css file and I expect it to style the HTML for me. no

null 96 Dec 10, 2022
A dependency-free JavaScript ES6 slider and carousel. It’s lightweight, flexible and fast. Designed to slide. No less, no more

Glide.js is a dependency-free JavaScript ES6 slider and carousel. It’s lightweight, flexible and fast. Designed to slide. No less, no more What can co

null 6.7k Jan 7, 2023
A slideshow that uses a CSS glitch effect for slide transitions.

Glitch Slideshow A slideshow that uses the CSS Glitch Effect to transition between slides. Article on Codrops Demo Credits Images by Unsplash.com imag

Codrops 111 Dec 16, 2022
null 136 Dec 30, 2022
Slide-element - A ~700 byte Promise-based library for animating elements with dynamic heights open & closed. Basically, a modern variant of jQuery's slideUp(), slideDown(), and slideToggle().

slide-element A tiny, accessible, Promise-based, jQuery-reminiscent library for sliding elements with dynamic heights open & closed. To see it in acti

Alex MacArthur 165 Dec 12, 2022
Make the content slide prettily across the screen with variable sizes of scrolling items, in any of four directions, pausing while the mouse is over the marquee, and all with vanilla JavaScript.

TEG Marquee Make the content slide prettily across the screen with variable sizes of scrolling items, in any of four directions, pausing while the mou

Paul B. Joiner 0 Dec 30, 2021
A dependency-free JavaScript ES6 slider and carousel. It’s lightweight, flexible and fast. Designed to slide. No less, no more

Glide.js is a dependency-free JavaScript ES6 slider and carousel. It’s lightweight, flexible and fast. Designed to slide. No less, no more What can co

null 6.7k Jan 3, 2023
A full screen slide show for images and videos

Vanilla JS Slide full screen slide show for videos and images Why? This is a scratch-your-own-itch project as I wanted a way to see images and videos

Christian Heilmann 24 Oct 26, 2022
Simple customizable slide panel (without jQuery)

toolslide.js Minimalistic customizable slide panel (without jQuery) Table of contents Quick start Usage Examples Options Methods Events Browser suppor

null 5 May 23, 2022
A markdown based tool for slide deck creation.

Decker A markdown based tool for slide deck creation. Installation from source Install stack and Node.js (for npm) Clone this repo. cd decker git subm

Decker 8 Nov 7, 2022
Slide everything into this vanilla javascript slider: just 20kb all-inclusive, no dependencies!

Lightweight vanilla javascript media and contents slider, by LCweb Just 20KB to have: Top features list: single file, no dependencies, 100% pure javas

Luca 4 May 12, 2021
A K6 Multi Scenario template applying some best practices along some examples

K6-Multi-Scenario-Template It is a performance testing template that shows how to use K6 to implement a Multi Scenario template applying some best pra

Swiss Life OSS 33 Nov 27, 2022
A simple react project that contain a single page application (SPA) And a simple caculator to make some calculation and there is a section you can see some Math quotes. Ⓜ💯

A simple react project that contain a single page application (SPA) And a simple caculator to make some calculation and there is a section you can see some Math quotes. Ⓜ??

Reem janina 7 May 31, 2022