arielsalminen/responsiveslides.js

Simple & lightweight responsive slider plugin (in 1kb)

ResponsiveSlides.js v1.55

Simple & lightweight responsive slider plugin (in 1kb)

ResponsiveSlides.js is a tiny jQuery plugin that creates a responsive slider using elements inside a container. It has been used on sites like Microsoft's Build 2012 and Gridset App. ResponsiveSlides.js works with wide range of browsers including all IE versions from IE6 and up. It also adds CSS max-width support for IE6 and other browsers that don't natively support it. Only dependency is jQuery (1.6 and up supported, tested up to 1.8.3) and that all the images are the same size.

Biggest difference to other responsive slider plugins is the file size (1.4kb minified and gzipped) + that this one doesn't try to do everything. ResponsiveSlides.js has basically only two different modes: Either it just automatically fades the images, or operates as a responsive image container with pagination and/or navigation to fade between slides.

Features:

• Fully responsive
• 1kb minified and gzipped
• CSS3 transitions with JavaScript fallback
• Simple markup using unordered list
• Settings for transition and timeout durations
• Multiple slideshows supported
• Automatic and manual fade
• Works in all major desktop and mobile browsers
• Captions and other html-elements supported inside slides
• Separate pagination and next/prev controls
• Possibility to choose where the controls append to
• Possibility to randomize the order of the slides
• Possibility to use custom markup for pagination
• Can be paused while hovering slideshow and/or controls
• Images can be wrapped inside links
• Optional 'before' and 'after' callbacks

Usage Instructions and demo

For instructions and demo go to http://responsiveslides.com/, or download this repository as a zip file and and open "index.html" from the "example" folder.

• View additional usage examples online.
• View a demo with captions.

Currently jQuery 1.6 and up is supported.

License

Licensed under the MIT license.

Copyright (c) 2011-2023 Ariel Salminen, https://arie.ls/

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

Changelog

v1.55 (2016-08-05) - Adds jQuery 3.0 compatibility (thanks to @Requios!).

v1.54 (2013-04-26) - Fixes few bugs with the before and after callbacks.

v1.53 (2013-01-14) - Minor speed optimization (thanks @bazineta!).

v1.52 (2013-01-07) - Adds option called "manualControls" which allows to write custom markup for pager navigation (thanks to @andyadams). "controls" option is renamed to "navContainer". Default speed of the transition is now to 500ms. Adds also webkit-backface-visibility: hidden; style for the slides to prevent some HD acceleration issues on mobile WebKit browsers.

v1.51 (2012-12-15) - Fixes a bug where pictures would not display if next button was clicked too quickly 10 times.

v1.5 (2012-12-14) - Adds CSS3 transition support with automatic jQuery fallback.

v1.32 (2012-05-09) - Fixes a bug which caused the slideshow to break in Chrome when changing between active and inactive browser tabs.

v1.31 (2012-05-02) - Easier to use callbacks (+ optional "active" class for the next/prev buttons when animating slides. If you need this functionality, open the unminified version and search for "Adds active class during slide animation" and remove comments around it).

v1.3 (2012-04-26) - Three new options: "random", "pause", "pauseControls" + small bug fixes.

v1.25 (2012-04-19) - No more flashing of unstyled slideshow before JS has loaded. Adds also better support for cases when JavaScript isn't available.

v1.24 (2012-04-12) - Changes the way slideshow works if there's only one slide. Now all classes and max-width for the container are added, but we don't show the next and prev buttons anymore as they don't make much sense in that case. This version also fixes a bug which made the 'previous' button always go to the next slide.

v1.23 (2012-03-31) - Adds new option called "controls", which allows to choose where the controls should be appended to. Includes also code optimization, bug fixes, better option names and better jQuery support (jQuery 1.4 and up is now supported).

v1.22 (2012-03-27) - Adds callback events which are similar as in @Wilto's Dynamic Carousel. The possibility to change the 'namespace' is also back + next/prev buttons have now classes which make more sense.

v1.21 (2012-03-23) - Added two new options: 'nextText' and 'prevText'.

v1.20 (2012-03-21) - New option called 'nav', which enables next and previous buttons. Can be used with 'pagination' and 'auto' options. Adds also new themes folder with three different ways to use the new next and previous buttons.

v1.10 (2012-03-12) - Refactoring, New markup style, CSS is now separated from the plugin, you can have links around images and other elements inside slides (not just images, but also captions etc.) + New option called "pagination", which enables to choose both "pagination" and "auto" at the same time. Shout outs for the help to @bgutschke

v1.05 (2012-03-05) - No more need to change the namespace if you have more than one slideshow on the same page.

v1.04 (2011-12-19) - Fixes problems when ResponsiveSlides.js is used with other plugins

v1.03 (2011-12-12) - Code refactoring, smaller size, better performance

v1.01 (2011-12-11) - Better usage of styles and the namespace

v1.00 (2011-12-04) - Release

Want to do a pull request?

Great! New ideas are more than welcome, but please check the Pull Request Guidelines first before doing so.

responsiveslides.js's Issues

Cursor over text in IE gains priority over 100% vert side navs

So here is one instance my usage of your slideshow.

http://apps.rcu.msstate.edu/Connections_Online/SP12/stories/3/index.html

I have used the 100% vertical navigation on either side of the slideshow and made them just transparent areas. I did this so the user would think < Page/ Page > was a button to move back and forth through the slideshow. The tabs for this were intended to be above all the content within the slideshow, however in IE the text within the slideshow takes priority over the navigation when the cursor attempts the click on either navigation.

As you can see this could cause alot of confusion for users. Can you please help me see what seems to be the problem. Not sure if this is something I've done or whether this is just an untested territory of slideshow's navigation usage when the slide is filled with text.

Thanks,
Joey ([email protected])

How to stop the slider

Hi i have a jquery click function that loads another slider and would like to stop the first one when i load the second, i also would hide it but i don´t kno how to stop it.

I have probe .stop(); but not working, i have removeClass() and then addClass(); another new classes but the li 's continue slidding and fading.

Thank you very much, continue with the good work, sorry for my english, spanish designer trying to code.

change images on the fly

I am making a new site that needs a slider that has image sets that can be changed with javascript. Can I add this or do I need another slider? do you know of one?

After changing the imageset it should stay at the current image for the specified timeout and use the new images when it changes.

Slideshow not loading when adding options

I'm quite sure that this may be more related to jQuery than to your plugin but I wanted to ask anyway. Maybe you can guide me.

I used the original code but I get an 'Uncaught Error' due to the $ function not being recognized.
I was able to fix this using 'jQuery' instead:

  jQuery(function () {
    jQuery("#slides").responsiveSlides();
  });

Now, when I add the options (i.e. nav: true) like the example below, the slideshow won't load.

  jQuery(function () {
    jQuery("#slides").responsiveSlides({
      nav: true
      });
  });

Do you know how can I solve this?

Way to slide container to different heights?

Sorry to bother with a newb question but if I have different height images is there a way I can animate the container to slide to the height of the next image? Other than that love the product thanks so much!

Change fade to slide.

I’m using Slideshow 1 without any modifications. Is there an easy way to change fade to slide?

Navigation show only on hover

Is it possible to only have the navigation controls show up when you hover over the slider? If not that would be a great feature to consider.

Captions

I started thinking that it would be quite easy to add support for captions, as the slideshow is now using different kind of markup.

Any thoughts / is this something which would be useful?

Visible "jump" when a larger image fades into view

If an image is larger than the one before it, a visual "jump" is present as the image fades into view.

Add 2 images to a slideshow, one vertically longer than the other.

Using the default ResponsiveSlide settings, wait for the larger image to appear. Notice as it fades into view but only displays at the exact vertical length of the image before it, cutting off the remainder of the longer image. After the fade is complete, the rest of the larger image "pops" into view without the fade effect applied.

Reproducible in FF11 & Chrome 18.

Slideshow disappears?

Has anyone had any problem where the slides just stop showing after awhile? The element is still on the page ( I can see it in inspector), but the images are just not visible. It seems to be happing in both Chrome/Safari/Firefox? I'm just running a vanilla slideshow without much except maxwidth and speed defined. I can post more if diagnosis is necessary, but thought I'd see if anyone else has experienced this and has any solutions.

Issue with jQuery v1.6.2?

I'm using your script in a website i'm building with Concrete5 wich comes with jQuery 1.6.2. You can look at the website here www.dltransport.it/concrete5/ . In Firefox 10 and latest Chrome on Windows after some minutes (~10) the slideshow degrades, it starts fading the slides very quickly and duplicates itself under the original.Can you reproduce this issue?

Current slide in callback

I'm trying to get the current slide from within the before & after callbacks, to no avail.

I tried using this, but that points to the options object. The arguments object is similarly empty.
I then tried using li.slides1_on and even li[class$=_on], again, to no avail.

Am I missing something? Is there any way to get the current slide from within the callbacks?

No fade, just movement?

Hi

I updated to 1.22 from 1.04 and now instead of a fade between slides I get a slide that flies in from the right.

Any ideas what that might be?

Error on Webkit browsers for viewport meta

The current demo page throws an error in Chrome and Safari:

Viewport argument value "device-width;" for key "width" not recognized. Content ignored.

Changing the semicolons to commas resolves the issue, so the viewport meta declaration becomes:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />

Unable to see pictures at all

Hi, sorry if i copied all your work to visual studios 2010. but i was just trying to test it but it seems that i could not see any pictures at all.. this is the image i am talking about..http://img16.imageshack.us/img16/623/captureudy.png
thanks

Pagers duplicated when colorbox opened

Hi,
I love your light weight plugin. I only have a small issue though. The pagers are duplicated whenever a colorbox opened in the same page where responsiveslides reside.

Looking forward to hearing from you.
Thanks

Multiple slideshow

Hello, I would like to put 4 exact same slideshows in one page but it doesn't work.
Only the first one does. The others don't move... only the first picture shows up.
Thanks !

Plugin versioning & changelog + jQuery version support

As the feature set will inevitably change over time, it would be helpful to add a version number and changelog where applicable (i.e. source code, documentation, site, demo, etc) so perhaps the current release is 1.0 and the next will be 1.1?

Also because not everyone is able to use the latest version of jQuery on their site (perhaps because of dependencies with other plugins, CMS, etc) I suggest that you also include (in the documentation and plugin source) details of what version(s) of jQuery are supported, e.g. v1.4.2+ ?

Adding a link or global call to specific slide starting point

Great script! Really slick and works wonderfully.

I don't know if I am missing something, but I am trying to figure out a way to create an external link to specific slides, or start the slideshow with a specific slide rather than the default first (or random).

Let me know if this is something that you have considered and I am overlooking, or is to yet supported by your great script.

Cheers,

Tom Tranmer

Feature Request: Random order

A great feature addition to this already incredibly useful plugin would be the option to randomize image order.

I tried randomizing via php but it really didn't work with the plugin.

Conflict when using with Lightbox

This is working awesome. But when i include lightbox plugin, the lightbox plugin doesn't seem to work along with this.
Point me in the right direction.

Thanks in advance!
Amarnath Jaganathan

Navigation is not working

First off, I wanted to say this slideshow has been really helpful and I really appreciate you making it and keeping it updated.

The problem is in my tweek of the navigation. So I wanted to put 2 navigations on this responsive online newsletter, one at the top and one at the bottom. So instead of using your auto nav feature, I turned it on and then hid it with display: none; and put the html code for the navs in the locations i wanted. Not sure if this is ok to do, but they worked fine when previewed from Dreamweaver, however once I made them live they don't work. The slide navigation is the page > and < page and each story has a slide show. Do you know what the problem may be?

Here is the link to the site, http://apps.rcu.msstate.edu/Connections_Online/

I appreciate your time and help!

Joey

URL on the images

Hi,

How I can add the URL on images?

Problem with fade & speed

In the script responsiveslides.js:

It seems no matter what I set this to

  "fade": 5000, // Integer: Crossfade time, in milliseconds
  "speed": 5000, // Integer: How long image shows before fading to next, in milliseconds

... there is no change in the fade or the speed.

Am I missing something or is this a bug - ?

Thank you. The script is exactly what I needed, lightweight & responsive with minimum features.

Steve

undefined $tab.on :167

Getting
TypeError: 'undefined' is not a function (evaluating '$tabs.on') :167

which breaks clicking on the pagination

I am incorporating it into drupal 7
the max jquery version I'm stuck using is 1.5.2
(module: jquery update)

really like the plugin, great work.

Image not resizing.

Hello, I have used this script in the past and it has worked like a charm. However, now something weird is happening; when I resize my window the slider sizes small but does not come back to full size when i expand the window unless I refresh the page. Any ideas why this is happening? Or things I should look for?

auto and pagination should be separate

Rather than having to choose between auto and pagination, I suggest they should be separate options, so that you can choose to have pagination WITH auto.

(And of course if someone wants to stupidly have auto off AND pagination off so that you can't navigate between slides then they can, that's their choice, you shouldn't try to prevent that by combining them into a single option as you have)

Problem in IE8 Win

Hello,

a few minutes ago I tweted about my issue, I'm using responsiveSlides in my theme here http://satrya.me/demo/tiga/. The problem is the fade effect not working on IE 8 Win. I tried to tested your demo and everything looks good. Can you help me ?

Thanks

Stop after one or two cycles?

This is a great little script and has solved a problem (adding a slideshow to a fluid layout) that has been bugging me for a long time. If possible, could you tell me what needs changing in the script to make the cycle stop after the first or second run through (or n times).

I've tried tweaking this line:

     var idx = index + 1 < length ? index + 1 : 0;

and I can stop the slideshow going back to the first slide, but then it keeps fading the third slide in and out, which is not the desired outcome.

Any advice would be much appreciated. Thanks.

Inactive Tab 'buffering' slides

In Chrome 19 inactive tabs are buffering the slides and so when the tab becomes active, it races through the unseen slides.

Possibly onFocus/onBlur functions needed to pause when inactive?

Right to left instead of just fading?

Is this possible?

Demo with thumbnails in pagination?

I'd love to see a demo with thumbnail images of the slides used for pagination.

Typically I like to generate the markup for pagination myself, however, this plugin doesn't provide an option to link pagination to an existing HTML element. It always generates the pagination by itself. You'd have to add background images via CSS to every single tab via the namespace_s1, namespace_s2 classes and rely on background sizing for making them fluid.

An option to link to existing pagination markup would be great.

Nesting IMGs in DIVs, As, etc.

Will take a look at nesting list in other wrapper elements, which is currently unsupported.

For instance:

<a …><img …></a> <a …><img …></a>

currently cycles through as if

<a …></a> <a …></a> <img …> <img …>

Problem with IE8

Hello,

I have a big issue, the slides disappear on IE8 win :( , here's the link http://satrya.me/demo/foto/

This repo has been included in The Github Pirates

Okay so not really an issue, just a public service announcement from The Curator, David Higgins (@Higgo)

-- This repo has been included in The Github Pirates' Chest.

What is this about?
The Github Pirates is a constantly updated resource for those interested in HTML5, CSS3, and JavaScript.

You should find out more about this project below:

http://codepirat.es/

OR, Download The Chest:

http://isharefil.es/E9Co

CSS Optimization

I've tried your script. Thank you very much for it!

I wanted you to know that I modified the CSS a little in order to get the 'Slideshow Effect' since the first moment of page loading.
I copied and pasted the code in your web and I was shown 3 li elements, one after the other and then they dissapeared, leaving one behind.

Instead of refering to class .rslides and waiting for the jQuery code to act, I modified the CSS code to #slides and all the slides we're together until the very moment when the animation begins.

Let me know what you think!

Callback

Great plugin, working really well while staying very light!

Not an issue, but a suggestion: add callbacks so that the slideshow can be paused and resumed.

Pause on MouseOver

Your widget is perfect. Only thing it was lacking was a mouseover feature to pause on mouseover.

I added this into the code at line 128:
//Mouseover Support
$(this).mouseover(function() {
clearInterval(rotate);
});
$(this).mouseout(function() {
restartCycle();
});

Touch controls ?

Hi
Do you plan to use touch control support to ResponsiveSlide.js ? (like "taping on slider displays the next slide" or "swiping makes the slider to advance")

Advance to next slide with mouse click.

Wasn't sure how to request a feature.

I would like the slides to advance when the user clicks on the image/slide.

I think this is a pretty standard usability issue. When the slideshow is very large on the page, it can be frustrating for the user to find the pagination of the slides.

Hopefully it is simple to implement? I know that you wanted to keep the functionality basic, but this would improve it a lot.

Thanks for all of your hard work! This has been a great slideshow to use.

Support for Firefox 12.0

I am using ResponsiveSlides.js on a responsive web design project and it works perfectly on the current version of Chrome however in Firefox the images do not display very clearly, they do not seem to adjust after resizing the webpage, they become distorted.

Safari/Chrome Mac and no buttons over the left and right side

Hi,

I simply LOVE this plugin, one of the best I've seen (and I've seen a lot ..!..).

I have just a problem at least with Safari 5.1.7 and Chrome 19.0.1084.46 Mac. The demo "Transparent buttons over the left and right side" where I imagine I should see a left/right button when the mouse is over the slide, I don't see any buttons.

Adding Image Description

Hi there Viljamis,

Is there a way around to add Image Description to each image, at least in the bottom.

As usual thanks in advance for your efforts :D

Amarnath Jaganathan

Make pagination scrollable

http://i.piccy.info/i7/23fd5ce2ba00a64f3c533b22a532c6fa/1-5-8199/20546283/Bez-nazvy-1.jpg

HTML5 support

Hi!

Can you add an option to support HTML5. It would be to change the elements like this:

Make pagination work without delay on iOS

Img Border

I'd like to put a border around the images in the slideshow - the problem is that the right border always gets cut off. I've played around with a lot of the styles but I can't get that border to show while keeping everything lined up. Any ideas?

Max Width not working in Opera 11.61

http://www.davewhitley.com/projects/shipley-donuts/

The max-width is set in the responsiveslides.js settings. It is set at 1296px, but when the browser size is reduced, you can see that it is not working. Works in Opera Mini and all of my desktop browsers. I think I am using responsiveslides.js version 1.4.

Change 'action' class to more specific

A small suggestion: maybe the classname action should be changed to something that's less likely to clash with something that people use in their CSS. Should use settings.namespace?

Pause on MouseOver

Your widget is perfect. Only thing it was lacking was a mouseover feature to pause on mouseover.

I added this into the code at line 128:
//Mouseover Support
$(this).mouseover(function() {
clearInterval(rotate);
});
$(this).mouseout(function() {
restartCycle();
});