i-like-robots/jquery-slideshow

jQuery Slideshow is a performant and developer friendly image slideshow and content carousel plugin. 2KB when gzipped.

jquery-slideshow's Issues

Multiple slideshow

I have several divs with class slideshow (that's what I really need, the amount of divs can differ from time to time).

$slideshow = $('.slideshow).slides
  skip: no
  pagination: no
  transition: 'crossfade'
  auto: 1500
  loop: yes

works pretty well. but when I tried to access api

api = $slideshow.data 'slides'

I get control only for the first div. I want to play/pause slideshow on div I mouseenter/mouseleave, but it play/pause only the first div.

Do not use protocol-relative jQuery URL

Currently index.html uses a protocol-relative URL to include jQuery:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

Opening this file locally (file://) will fail to load jQuery so the include should be changed to

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

current slide for hash url

Hi,

I would like to know, how to store the current slide data to send in hash url ??

Thx

Error with Internet Explorer

For some reason the plugin works great on firefox and chrome but not on ie. The numbers are moving but the images are not rottating.

Please see example here:
http://digi-com.co.il/clients/kolhasport/

What am I'm doing wrong?

Thanks.

Add timeout to touch events

Add a timeout to touch events so only fast finger gestures are recognised.

Add Custom CSS Transitions

Hi Matt,

First of all, I LOVE your plugin concept. I'm looking forward to using it (I have to build it into a WordPress plugin in order for it to be usable for me, but I haven't gotten around to that yet).

I hope I'm doing this right, filing this as an "issue." It's more of a proposal or a request actually. I'm new to GitHub though.

I think it would be great if the transition options were "crossfade," "scroll" and "customcss." The customcss option would not affect any style attributes at all. Instead, it would add/remove classes, such as "future," "current," "past," maybe more. In a Fork I've attempted to do this (https://github.com/joerhoney/jQuery-Slideshow/blob/master/src/slideshow.js), but I'm not understanding a lot of what's going on in your script (I'm just not as well versed in JavaScript and jQuery). As a highly experienced CSS coder however, I can say there are almost infinite possibilities in this idea of the customcss transition. I've been looking for a script that does this, but haven't had much success. I've concluded I'll have to build it myself (unless I can talk someone else into building it). I'm seeing if I can achieve this with your slideshow script because it has the most developer-friendly foundation I've found yet. I feel that's important for creating the most customizable jQuery slideshow ever (which I think your's is). So I stand before you with what I consider to be a brilliant idea and the desire to help you make your great invention even better, but I lack the know how. But I'm still going to try.

So would you be able to explain to me in some way what is occurring in the crossfade transition segment of the script, so I can try to tie in what I know about adding/removing classes with jQuery for the customcss transition I'm trying to write? Ultimately I'd like this to be a part of your original jQuery Slideshow code if you're interested. I would love to be a contributor to your project and help you code it if I can get some help learning how to do that. Otherwise, I need to somehow figure out a way to do this for myself anyway and I just need a little help.

Thanks in advance! Let me know if there's a more proper way I should have made this proposal/request.

Joe Rhoney

How to add pause button?

How to add pause button?
I try with this, ..no luck.

var slideshow = $('#divslide').slides();
var api = slideshow.data('slide');
// the pause code:
$('#pausebutton').click(function(){
slideshow.pause(); //--> is it correct?
});

I also tried:
api.slideshow.pause();
api.pause();
none of them working properly.

Possible to set showing time for eace slide?

Current Slide

Hi,

Is there a way to get the current Slide item as object?

Greez
Cyril

Is there any way to make it circular

I'm using this library in one of the project , just want to know if i can make it circular

data-transition="?"

Hi,

I'd like to know how many transition type are they ?
Because when I look "slideshow.js" it maybe have only 2 parameters !

Could you inform me if should be another than scroll and crossfade ?

I'd like to use slideDown, slideUp of jquery !

Seen you later

Deprecate homebrew swipe

Deprecate custom rolled swipe detection in favour of more robust https://github.com/stephband/jquery.event.swipe

Scrolling too far to the left when reaching the last image

First of all, this is a really great plugin, thanks for it.

I have created an example on a customer site (http://www.buchingerwilhelmi.com/node/103) which uses the plugin and when you scroll to the very last image, you end up seeing 3 images and some free space right of the last image.

This is because I have defined that there are 3 images visible but I used that value 3 only as a compromise. A precise number can't be given as the thumbnails have different widths.

What would be ideal if the plugin would no go further to the left, if the last image has reached the right border of the container. Do you know what I mean?

oncomplete callback function doesn't work from 1.6.0 or later

There's either a bug affecting the oncomplete callback function or we need a line of documentation explaining how it's supposed to be used. I went back release by release to test if it used to work the way I expected it to and it worked in versions 1.5.2 and 1.5.1. I didn't go any further back from there.

Here's a condensed version of what I have in my HTML

    <div class="slideshow" data-oncomplete="saveStep">...</div>

I'm naming my callback function in the data-oncomplete property of the div tag. The name of my callback function is saveStep, which just stores the index number of the currently viewed slide in a cookie so a user can return to the same slide that was last viewed easily.

The error I keep getting is:
TypeError: 'undefined' is not a function (evaluating 'this.opts.oncomplete.call(this, this.current)') (slideshow.js:147)

Line 147 of version 1.7.0:

this.opts.oncomplete.call(this, this.current);

If I change it the following, it works:

saveStep.call(this, this.current);

So the slideshow appears to be accessing the function that I setup, but it won't access it when it's being referenced from this.opts.oncomplete.

That's odd, so I write this.opts.oncomplete to log and I see that it's being interpreted as a string instead of a function when called this way.

I also tried every version in between 1.7.0 and 1.5.2 and had the same problem on all of them. I didn't test the onupdate callback, but I'm assuming it would have the same issue for me.

BTW, this plugin was perfect for me. Much thanks!

Slides change too rapidly, can't slow down

The slideshow is working okay on a nonprofit website I'm updating, but the slides change too rapidly. I've tried setting the Speed parameter to 20000 and altering the default 600 setting in the .js file, but nothing seems to happen. Am I looking at the wrong settings?

http://familiesfirstseacoast.org/slideshow.html

Note: the slides are a half MB each and can take a long time initially to load. Once everything is working, I'll optimize with jpegs.

Removing the display of slide number in the pagination?

Hi Matt, great slideshow. I have a question. How do you remove the visible number 1-6 displayed? I have turn off controls, removed parts of script and checked the CSS. However, I can't seem to remove the number displayed in pagination.

Update styles of custom navigation links to slides?

Using custom navigation links, how do I update the active links css style based on the current active slide?

Or to say it another way, I'd like when a slide is active for its corresponding custom text link to be highlighted, whether I clicked on that link, or if I clicked on a next button.

example:
link1 link2 [link3]
[slide 3 active]

I see that something similar is done with the data-pagination. However, I'd like to have custom text in the pagination.

Scroll effect stop after it reach the end

The problem is - when I use scroll effect with my slides (divs with iframes and images) animation stops after it reaches the last slide while the navigation dots continue to switch.

At the same time crossfade effect works as expected.

loop option is true (change it directly in the plugin code)

i use data-visible="4" , but it does't show 4 item ,i show all items

i use data-visible="4" , but it does't show 4 item ,i show all items, please help me

nextText & previousText parameters

How change nextText and previousText in Slideshow parameters ?

Thx

Move update callback to transition end

Firing the update callback (and thus the _update method) before the transition causes problems in environments where JavaScript is paused on touch events (frowning at iOS ><) - which is no fun when combined with swipe gestures.

Current behaviour allows this sorry state of affairs:

1. user swipes their finger not-quite horizontally across the carousel…
2. … but Safari doesn't quite capture it fully and the viewport is scrolled a little (pausing the JS)
3. .to() is called and thereforeonupdate but the transition never finishes so oncomplete is not triggered
4. The slideshow status and DOM are now out of sync =(

conflict with twitter bootstrap

Hi, I'm trying to use the slideshow with bootstrap, but it seems that css namespace conflict with each other result in the buttons stop working properly

http://jsfiddle.net/2sq85j7s/3/

check code above and if u remove bootstrap css library it will be working again.