Sudo Slider | Comments

Hans:
May 07, 2013 at 08:40 AM

Hi Erik
Thanks for the answer and making the hint to using custom links, which work fine for me. I would nontheless appreciate to get the results of your analysis concerning prevNext on a iPad.
Kind regards, Hans

Damon:
May 06, 2013 at 09:13 PM

@Eric I understand the feature.
I'm getting the exception on my console, because the content of target is "test/example.htm", and chrome alert me when "image.src = target;". The problem is that afer that the slider becomes erractic.

Can you please take a look of this fix?
https://github.com/psysp/Nivo-Slider/commit/1566f115910c035828e5c683f27a3449235a377a

Erik:
May 06, 2013 at 08:20 PM

@Hans:
The images you use are very big (3000 * 2000), and i think that is casuing the issues.
Try to scale down the images used in the slider.
You could also try using customLinks to simulate the next/prev buttons (thereby having the buttons with prevNext:false).
Also, when does the flickering occur? When animating, panning the page, all the time?
I will try to see if i can find the issue myself when i get hold of an iPad (do not own one myself).

@Damon:
I support loading both HTML documents and images asynchronously.
The current way i detect whether or not an url is a image, is to try to load it as an HTML document, and if that fails treat it as an image.
That causes the exception you mention to pop up in the console, i have yet to experience the exception becoming visible to the average user. (Just tested this in Chrome, IE10 and IE6).
So it isn't actually an error, but a feature used to support loading both HTML and images, without having to specify the content-type.

Damon:
May 06, 2013 at 04:22 AM

complete: function(){
// Some browsers wont load images this way, so i treat an error as an image.
// There is no stable way of determining if it's a real error or if i tried to load an image in a old browser, so i do it this way.
if (!textloaded) {
// Load the image.
image = new Image();
targetslide.html('').append(image);
image.src = target;

This Code is throwing an error when i do some ajax calls:
Resource interpreted as Image but transferred with MIME type text/html

that's because the Target Variable is an html file and not an image.

Hans:
May 05, 2013 at 06:53 PM

Hi Erik
After migrating to SudoSlider 3.0.2 (from SudoSlider 2.2.8) I have a strange random flickering/flashing effect on a mobile test site when accessing the site with an iPad. I could identify the reason for the flickering, it's the parameter prevNext. When I set this parameter to true, the flickering disappears (see noflicker.kywa.ch/multimedia/fotos). But if I set this parameter to false there is the above mentioned random flickering (so far iPad only, but not in a desktop or mobile phone browser, but till now I didn't test the prototype on android yet). The effect can be seen on mvcframe.kywa.ch/multimedia/fotos.
Since the flickering in the new version of SudoSlider on an important tablet device is hindering me from upgrading to SudoSlider 3.0.2 I would appreciate an analysis from your side.
Configuration: jquery 1.9.1, jquery mobile 1.3.0.
Thanks for your work so far and your help.
With kind regards, Hans

Jon Tarbuck:
May 01, 2013 at 04:41 PM

Thanks very much for your help Erik, that worked great!

Erik:
May 01, 2013 at 01:31 PM

@Jon Tarbuck:
Yes you can, just use customLinks: http://webbies.dk/assets/files/SudoSlider/package/demos/customLinks.html
Set the option customLink to the same in both sliders, and place the buttons as you like.
The slider on this page (bottom right): http://webbies.dk/ uses that trick, just with links to specific slides instead of "next" and "prev" buttons.

Jon Tarbuck:
May 01, 2013 at 01:24 PM

Hi Erik,

Is there any way I can use one set of previous and next buttons to control two sliders - so clicking on the next button would advance both sliders to the next slide?

Love the slider, so many options! Keep up the good work!

Thanks,

Jon

Andreas:
Apr 28, 2013 at 12:19 PM

Hi Erik, it's me again ;-)

I've found the problem. It is the inline image positioning that (on default) always adds a line height beyond it so that the surrounding div or li that has a bigger height than the image itself. And your script takes the height of the surrounding div/li.

When you add a "vertical-align: top" - style to the image itself, the spacing is gone. Perhaps you may add this to your script or it may help some one else.

Andreas:
Apr 28, 2013 at 06:16 AM

Hi Erik,

thanks for your fast reply. I've checked out your current development version with the div tags but the problem still remains. It occurs in any browser I've tested (IE, FF, Chrome, Opera). Seems to be a height calculation problem, but I couldn't figure it out yet.

I'm not sure if your current dev state should already fix the problem or not (I've also replaced the list tags with div tags).

Regards

Erik Krogh Kristensen:
Apr 27, 2013 at 07:35 PM

@Andreas:
No that shouldn't be the case.

It happens in some browsers (Firefox), where the browser doesn't realize that the slider isn't a list.

I'm working on replacing the li and ul tags with div tags, which will fix the problem. (ul and li tags will still work).
You can see the latest development version on this page:
https://github.com/webbiesdk/SudoSlider/tree/dev
Look at the basic demo.

Andreas:
Apr 27, 2013 at 04:17 PM

Hi Erik,

first thanks for your great script. I'm using it for a faded continuous slider with auto height adjustment. The height of the slider div should always fit the height of the current image but this isn't the case. There is always a "padding" of several pixels, even with your demo:

http://webbies.dk/assets/files/SudoSlider/package/demos/autowidth.html

The height difference is always the same for each image. your demo page it is 7 pixel. How can I avoid this difference? As example the second demo image has a height of 241 pixel and the slider div gets a final height of 248 pixel. This shouldn't be the case, or?

Currently I've fixed this by adding an initial and afterFading script to "reset" the div to the correct height.

Thanks for your help.

Darrin:
Apr 18, 2013 at 11:34 PM

Cool, thanks for the quick fix!

Erik:
Apr 18, 2013 at 03:29 PM

@Darrin:
You are right, and it was a bug.

It was caused to the "sudoSlider.getValue('autoAnimation');" call returning undefined.

I've fixed it in 3.0.1 that i've just released.

If you look at the demo ( http://webbies.dk/assets/files/SudoSlider/package/demos/pause%20on%20mouseover.html ) and it still doesn't work, try to clear your browser cache.

Darrin:
Apr 18, 2013 at 02:42 PM

Great project - thanks for sharing.

However, i do have a question regarding pausing the slider on mouseover. The docs and demo states this is built in. However, when i view the demo on both Safari (5.1.8) & Firefox for Mac (20.0.0), there is no pause at all. I did not try with other browsers...

David:
Apr 11, 2013 at 02:05 PM

Thank you very much Erik!!! I would have never thought to put the z-index that high.

Again, thanks for making such a wonderful slider script!

Erik:
Apr 08, 2013 at 08:49 PM

As i said in the previous response, i am working on the next major version of SudoSlider.
The major addition is a lot of new fancy effects.
I suggest you take a sneak peak: http://webbies.dk/tmp/slider3/demos/explorer%20effects.html

Download here: https://github.com/webbiesdk/SudoSlider/tree/dev (no guarantees about stability given!)

@carol:
I think this a what you were looking for.

Erik:
Apr 08, 2013 at 03:48 PM

@Annie Gage:
I assume you are using the "auto" option.
Just set the "pause" option to a high number, the default is 2000 (its in miliseconds).

@Courtney M:
1:
You are using responsive. That complicates things.
The code that makes it responsive sets the width of a slide to (containerWith / numberOfVisibleSlides).
So if you are using responsive, each slide will always have the same width.
A fix could be to fill out the slides by adding the following CSS:
.photos li img {width: 100%; height: auto;}

2:
I've done that in a demo.
http://webbies.dk/assets/files/SudoSlider/package/demos/fancy%20stuff%201.html
I used the methods instead of customLinks. Since customLinks actually listens to every click event in the document.

@Rodrigo Munera:
Yes, you found a bug. Thanks for that.
I'm currently working on a new major version, so i won't released a new fixed version for a while.
But for now you can fix it by replacing
goToSlide(NEXT_STRING, FALSE);
on line 409 (inside the startAuto method) with:
if (autoOn) goToSlide(NEXT_STRING, FALSE);

Btw. Awesome website there mate.
But when sliding from the last to the first slide on a big screen, you can sometimes see "behind" the slider.
You should be able to fix that by setting sliceCount to 2 and autoWidth to false.

@Danny:
If you look at this demo: http://webbies.dk/assets/files/SudoSlider/package/demos/methods%201.html
You can see that i call sudoSlider.getOption('speed')" when a button is clicked.
Similar you can set up your own trigger to run sudoSlider.goToSlide('next')" when the next-button is hovered.

@David:
The fade animation puts a clone above the slider with "z-index: 10000".
For your buttons to be displayed, you need to set their z-index to something higher. For example by adding the following CSS:
#sliderbtns {z-index: 100001}

David:
Apr 01, 2013 at 02:26 PM

Hi,

I posted this question previously, but I haven't seen it go up or be answered. I was wondering if there was a way to have the navigation buttons go over the slider area, without being affected by the fading effect? I have setup an example of what I want to do, using the customLink setup. However, the links fade in/out along with the images in the slider. Is there a way to get around this?

Here is the example: d2designs.ca/slider/

Any help is appreciated.
Thanks.

Danny:
Mar 28, 2013 at 03:52 PM

Great slider! Thanks for sharing. Is there any way of going to the next slide by hovering over the 'next' arrow? As opposed to clicking on it?

Cheers!

Rodrigo Munera:
Mar 22, 2013 at 01:10 AM

I think I found a bug.
After I build the auto-playable slider, if I "sudoSlider.stopAuto;" before the first slide slides, the slider doesn't stop until the following slide has auto slid.

In other words, if I click (which triggers the stopAuto method) from slide 1 to slide 2, the auto-slide event will push the slide 2 to slide 3 and THEN stop, as opposed to stopping on slide 2.

If I wait for the first slide to move over automatically, then it will stop wherever I click the next or previous arrow.

The IP address of the sample is http://69.63.135.112

I tested it on chrome 25.0.1364.172 for Mac OS
Safari 6.0.3 for Mac OS
IE 9 for Win 7 64-bit
Chrome 25 for Windows 7
Bug could not be reproduced on Firefox 19 for either Mac or PC.

Courtney M:
Mar 20, 2013 at 07:40 AM

What a wonderful plugin! I have a couple of questions. I have setup the slider here: http://dev.notiesmanagement.com/models/women/fashion-direct/alden-corinna/228/

I tried using this demo as a model: http://webbies.dk/assets/files/SudoSlider/package/demos/fancy%20stuff%202.html

Here are my two issues:

1) My images have variable widths. I need them to show side-by-side, flush against one another, rather than in containers of equal width. AutoWidth does not seem to be making any difference. Is there a way to have the images all show across the screen, without having them overlap or have space between?

2) I am using thumbnail navigation. Is it possible to have the thumbnails scroll as well? Because some of my profiles have more thumbnails than will fit on the screen.

I toyed with trying two different sliders on one page (one for the large images and the other with thumbnails) and then use Custom Links to link from one to the other. Not sure if that would work. Any suggestions or assistance you can provide would be very much appreciated!

I have been searching high and low for a plugin that will do these things. So far everything else has come up short, and yours by far looks the most promising. If I can get this to work I will most definitely be making a donation to your project. Thank you!

Annie Gage:
Mar 16, 2013 at 07:52 PM

Where do I change the script so that the slide displays for longer? Please help! Thanx

Erik Krogh Kristensen:
Mar 11, 2013 at 03:33 PM

@carol:
You can use the method setOption() to set a random true/false value to the options fade, vertical and crossFade.
If you do that in the afterAniFunc, you will effectively have a random effect on each slide.
You can read about setOption and afterAniFunc in the docs.

I'm working on a feature for SudoSlider 2.3 where you can specify your own animation. I'll make a demo showing how you can have random animations using the new feature when i release version 2.3.

carol:
Mar 07, 2013 at 01:51 PM

Hi!
Can you tell me how to set a random effet on the slider? Thx a lot!!

Erik Krogh Kristensen:
Mar 05, 2013 at 09:16 AM

@Alex:
I've found at least one way to do it.
The way i've found requires that you use TubePlayer to start the videos.
You can see it in the video demo: http://webbies.dk/assets/files/SudoSlider/package/demos/videos.html

Alex:
Mar 03, 2013 at 11:16 PM

Hi!
I was wondering if there's a way to pause the slider while the embeded Youtube video's being played?
What I've got now is that when runnig the video in the slide, slides keep on change... and the video keeps on playing.
Best regards,
Alex.

Erik:
Feb 23, 2013 at 10:51 AM

I know its been a long time, but i've had other things to do.

@Loïc:
You can always use a different selector for the different sliders, so the first slider have id="slider1" and the second have id="slider2" and so on.

And you can completely change the HTML used for the next and previous buttons.
Look at "prevHtml" and "nextHtml" on this page: http://webbies.dk/SudoSlider/help/#Settings

@Lorcan:
I know that IE had some problems with that demo, and i've done some things to fix that in 2.2.8 (the version currently available here on the site).
Try to update to the newest version if you havn't already (also the newest version of jQuery), and report back if it still isn't working.

@Samuel Bravo:
You can run "$("#slider").css({overflow: "visible"});" after the slider is created to remove the "white" screen.
To achieve the effect you are looking for, make sure to set continuous to true, and use a high slideCount value (see the docs: http://webbies.dk/SudoSlider/help/#Settings )

@Elerrawin:
You can disable it, just set "preloadajax: false". (I didn't write that in the docs before, its in there now).

@Alex Hommel:
I found that 1px bug myself some time ago, because for some reason the newest versions of webkit didn't agree with my positioning.
Its fixed in 2.2.8.

@sha:
You can use beforeAniFunc and afterAniFunc to add the classes to the "active" slide.
I think you'll figure it out if you look at some of the demos that use beforeAniFunc and afterAniFunc.

@Frank:
You could do it by using "afterAniFunc" to capture what slide is currently active.
Then make sure the line "sudoSlider.goToSlide((direction == "left") ? 'next' : 'prev', duration);" is only run when it doesn't go past the edge.
But mostly i think you need a JavaScript expert to make it for you, if you wan't it to work nicely.

@Terence:
If you look at this demo: http://webbies.dk/assets/files/SudoSlider/package/demos/modal.html
It should be quite easy to modify the ajaxLoadFunction function to resize the images.

@Alex Hommel:
If you look in the style.css file you will see the following:
/* Uncomment this if you wan't to only have 1 visible slide before the javascript kicks in.
#slider li {display:none;}
#slider li:first-child {display:block;}
*/
That will make sure that only the first slide is shown until the JavaScript kicks in. It works in all browsers that support the ":first-child" selector.

@Dan:
I didn't know that direction = 'rtl' existed. Are you using my slider?
If you are, i think you are looking for something like the slider on this page: http://info.gov.sa/ (the slider is SudoSlider).
If you wan't more help, please be more specific and link to a page where the problem is.

Dan:
Feb 19, 2013 at 03:02 PM

Hi!
First of all, great plugin.
second, I wanted to know if it's possible to use it with direction = 'rtl'. currently it messes up the behaviour when I try. any help?

GO HERE INSTEAD

GO HERE INSTEAD

Comments

Comments (418)

Help and support

Donate to the project

See the demos