Touch Me.
Hardware accelerated using CSS3 for supported iOS, Android and WebKit
iosSlider is a jQuery plugin which turns any wide element into a touch enabled horizontal slider.
Awesome photography provided by Aaron Forster
| Firefox | Safari | Chrome | Internet Explorer | iOS Safari | Android |
|---|---|---|---|---|---|
| 5.0+ | 5.0+ | 19.0+ | 7+ | 4.0+ | 2.3+ |
iosSlider may work in earlier versions of browsers listed above, but are not included in testing at this time.
To get started, you will need to download the iosSlider script. Click here to download the latest version. This download contains the iosSlider script, the jQuery library, and source files for the examples shown above.
The jQuery library and iosSlider Plugin scripts must be included in the HTML header of the web page. The jQuery library must be included first for the iosSlider plugin to function.
<!-- jQuery library --> <script type = 'text/javascript' src = '/iosSlider/jquery-1.7.min.js'></script> <!-- iosSlider plugin --> <script type = 'text/javascript' src = '/iosSlider/jquery.iosslider.js'></script>
Add the iosSlider HTML code within the body of the web page. The HTML can contain as little as one slide element, but if you want to leverage the snapToChildren setting, you will need to use multiple slides.
<!-- slider container --> <div class = 'iosSlider'> <!-- slider --> <div class = 'slider'> <!-- slides --> <div class = 'slide'>...</div> <div class = 'slide'>...</div> <div class = 'slide'>...</div> </div> </div>
Place the CSS in your stylesheet. The required CSS attributes are included to guarantee optimal performance. Feel free to apply as many other CSS attributes as you want. To see some real-world examples of this, check the demos folder of the iosSlider download.
/* slider container */
.iosSlider {
/* required */
position: relative;
top: 0;
left: 0;
overflow: hidden;
/* optional */
width: 630px;
height: 214px;
}
/* slider */
.iosSlider .slider {
/* required */
width: 100%;
height: 100%;
}
/* slide */
.iosSlider .slider .slide {
/* required */
float: left;
/* optional */
width: 630px;
height: 214px;
}
Add the code below to your JavaScript file. The following code uses the jQuery selector to fire the iosSlider jQuery plugin. If you are unfamiliar with jQuery, here is a tutorial to get you started.
$(document).ready(function() {
/* basic - default settings */
$('.iosSlider').iosSlider();
/* some custom settings */
$('.iosSlider').iosSlider({
snapToChildren: true,
scrollbar: true,
scrollbarHide: false,
desktopClickDrag: true,
scrollbarLocation: 'bottom',
scrollbarHeight: '6px',
scrollbarBackground: 'url(_img/some-img.png) repeat 0 0',
scrollbarBorder: '1px solid #000',
scrollbarMargin: '0 30px 16px 30px',
scrollbarOpacity: '0.75',
onSlideChange: changeSlideIdentifier
});
});
You can pass along any of the following key/value pairs listed below to the iosSlider() function or modify them at the bottom of the the iosSlider() JavaScript file directly.
| Key | Value | Description |
|---|---|---|
| elasticPullResistance | 0.6 | (decimal, 0.0 - 1.0) The elastic resistance when pulling on the slider edge. |
| frictionCoefficient | 0.92 | (decimal, 0.0 - 1.0) The friction coefficient applied to the momentum on touch release affecting the rate of deceleration. |
| elasticFrictionCoefficient | 0.8 | (decimal, 0.0 - 1.0) Additonal friction coefficient applied when momentum slides outside the bounds of the slider. |
| snapFrictionCoefficient | 0.92 | (decimal, 0.0 - 1.0) Friction applied to the slider when snapping to an element. |
| snapToChildren | false | (boolean) Slider will slide to the closest child element on touch release. |
| startAtSlide | 1 | (integer) Current slide when slider is initially loaded. |
| scrollbar | false | (boolean) Show or hide the scrollbar. |
| scrollbarHide | true | (boolean) Show or hide the scrollbar when it is idle. |
| scrollbarLocation | 'top' | (string, 'bottom' or 'top') Location that the scrollbar will appear. |
| scrollbarOpacity | 0.4 | (decimal) The css opacity of the scrollbar when visible. |
| scrollbarHeight | '4px' | (string) The css height in 'px' of the scrollbar. |
| scrollbarBorder | 'none' | (string) The css border of the scrollbar. |
| scrollbarMargin | '5px' | (string) The css margin of the scrollbar. |
| scrollbarBackground | 'none' | (string) The css background of the scrollbar. |
| scrollbarBorderRadius | '100px' | (string) The css border-radius of the scrollbar. |
| scrollbarShadow | 'none' | (string) The css box-shadow of the scrollbar. |
| desktopClickDrag | false | (boolean) Desktop click and drag fallback for the desktop slider. |
| responsiveSlideWidth | true | (boolean) Width of slides becomes responsive to the width of its parent element. Slides dynamically collapse to the width/height of the parent element when wider/taller. |
| navSlideSelector | null | (string) A jQuery selection (ex. $('.navButtons .button') ), each element returned by the selector will activate navigation to each slide respectively. ie. element 0 when clicked (or touched) will animate to the first slide and so on. |
| navPrevSelector | null | (string) A jQuery selection (ex. $('#previousSlide') ), the element returned by the selector will navigate to the previous slide when clicked. |
| navNextSelector | null | (string) A jQuery selection (ex. $('#nextSlide') ), the element returned by the selector will navigate to the next slide when clicked. |
| autoSlide | false | (boolean) Enables automatic cycling through slides. |
| autoSlideTimer | 5000 | (integer) the time (in milliseconds) that a slide will wait before automatically navigating to the next slide. |
| autoSlideTransTimer | 750 | (integer) the time (in milliseconds) required for all automatic animations to move between slides. See navSlideSelector, navPrevSelector, navNextSelector for details on activating elements for automatic sliding. |
| autoSlideToggleSelector | null | (string) A jQuery selection (ex. $('#autoScrollToggle') ), the element returned by the selector will disable/enable automatic scrolling when clicked. Note: Only works when autoSlide is set to 'true'. |
| infiniteSlider | false | (boolean) Makes the slider loop in both directions infinitely with no end. When set to true, the option scrollbar is automatically disabled. |
| onSliderLoaded | null | (function) Executed when slider has finished loading initially. Returned parameter: 'args' (array) { settings, sliderObject, currentSlideObject, currentSlideNumber } |
| onSlideChange | null | (function) Executed when the slider has entered the range of a new slide. Returned parameter: 'args' (array) { settings, sliderObject, currentSlideObject, currentSlideNumber } |
| onSlideComplete | null | (function) Executed when the slider has come to a stop on a new slide. Returned parameter: 'args' (array) { settings, sliderObject, currentSlideObject, currentSlideNumber } |
| Method | Description |
|---|---|
| $('div').iosSlider('destroy'); | Destroys the selected slider. Optional parameter: 'clearStyle' (boolean, default: true) when iosSlider is destroyed, all inline style applied to the slider will be removed. |
| $('div').iosSlider('goToSlide', slideNum); | Moves to the selected slide. Required parameter: 'slideNumber' (integer, default: null) |
You may use iosSlider (beta) freely, without restriction in any material intended for sale or distribution. Attribution is not required but always appreciated. You are not permitted to make the resources found on iosscripts.com available for distribution elsewhere "as is" without prior consent.
If you would like to feature iosSlider (beta) on your site, please do not link directly to the resource zip files. Please link to the appropriate page on iosscripts.com where users can find the download.
Need help with your implementation? Feel free to drop me a line below and I will get back to you as quickly as I can.
If you run into problems implementing iosSlider and need to report a bug or request a new feature, please create an issue on GitHub issues and I will investigate.
Additional demos, readme, and changelog can be found in the iosSlider repository on GitHub
Hi Marcus,
Well done and thank you for sharing your amazing script. Just wondering whether it is possible to achieve this with iosSlider to have a vertical scroll.
Let’s say I have 5 images in total. My container is set to 900 x 300 pixels.
1st image = 900 x 300 pixels.
2nd image = 900 x 600 pixels.
3rd image = 900 x 600 pixels.
4th image = 900 x 300 pixels.
5th image = 900 x 300 pixels.
Is there a way for me to scroll up on the 2nd and 3rd slides to see the rest of the images?
Your help will be greatly appreciated.
Many thanks in advance.
Kind regards,
Mr V
Hello! Thank you for this amazing script. I am wondering if it’s possible to integrate a draggable scroll bar to move the images? This would serve desktop users who aren’t savvy enough to know the images can be be dragged to navigate. Thanks much!
Hi Marcus,
Thanks for this valuable plugin. I would like to know the direction in which I have swiped ie; to detect whether I have swiped backward or forward.
Looking forward to get your reply soon.
It’s not built in at the moment. You could use the onSlideComplete callback to store the slide number when fired and then compare that to the new slide number when fired again, thus giving you the direction.
Thanks Marcus
Keep going…
Just downloaded the brilliant plugin and it works perfectly fine on both PC and Android devices. The only problem I’m facing now is that I wasn’t able to zoom into the page or image using Safari browser on the new iPad (iPad 3). The webpage and image look freeze. Could you please advise if anything I can fix up?
Thanks!
Can you email a link over to contact@iosscripts.com so I can take a look at your implementation?
Dear Marcus,
I’m using your slider (v0.9.3.1) and the content of my slide are responsive.
When I change my iPad orientation or resize my browser (mediaqueires are “triggered”),I jump to the next slide.
Also I’m using fullscreen slides and I was wondering how I could change iosslider’s height to adapt to the current slide’s height each time the onSlideChange function is triggered.
Thank you so much for the great plugin !
Flo
When I change my iPad orientation or resize my browser (mediaqueires are “triggered”),I jump to the next slide. Are you using media queries to change the size of the slider/slides? Please let me know what you are manipulating with the media query.
Also I’m using fullscreen slides and I was wondering how I could change iosslider’s height to adapt to the current slide’s height each time the onSlideChange function is triggered. You could use $(args.currentSlideObject).height() to get the height and apply it to $(args.sliderObject).parent(). I’m not sure how weird this would look though, you might want to animate the transition.
Dear Marcus,
It seems that v 0.9.4 fixed the issue :) Thank you very much !!!!
Yay, progress!! :D
Hi Marcus,
I’m using mediaqueries on the content within the slides. My structure looks like this :
Content
…
…
…
iosslider, slider and slides have a width of 100%
I use mediaqueries on section, changing them from a width of 960px to auto; when the browser width is inferior to 960px.
Thanks for the suggestion on adding transition, I’ll try it and let you know.
oups the comment system got rid of the html code I sent, my strucutre is like this :
div .main
div .ioslider
div .slider
div .slides
section .content <- thos are using mediaqueries
/div
/div
/div
/div
In the meantime, I tried your suggestion on resizing the height onslideChange, it works very well on desktop when I change slide triggered by $(‘div’).iosSlider(‘goToSlide’, slideNum); . However on iPad, it seems that the onSlideChange and onSlideComplete aren’t triggered when swiping.
Hi Marcus,
I made some more test on the new version 0.9.4, onSlideChange and onSlideComplete aren’t triggered when swiping .
Thanks again for the valuable work
Really? They seem to be firing for me. What does your iosSlider() call look like?
I have come across a situation in which the sliding items have an input form and it fails. The input form cant be filled in Chrome, swiping still works. In FF and IE it doesn’t make any problem. Any idea?
Probably a bug. I will take a look at it.
Hi Marcus,
Thanks a lot for develop it. It is just what I was looking for.
I want to ask you something. You think I can use ios slider putting all the divs of the slide with 100% with and height for realize the effect that this guy uses on his website? http://caseybritt.com/
Thank you.
You should be able to get the responsive full page width effect by setting the iosSlider container div to be 100% width and slides to be 100% width. As for the keyboard integration that isn’t possible with this script, but I will add it as a possible new feature to be added later.
Hi,
great slider. Thanks for the fantastic script.
I had integrated into my web project, but when I viewed the slider in IE7+, the content of the is shrink, when I view in PC –> Chrome, Safari, Firefox, Opera, Phone –> Android, Iphone, Ipad is working great, The content is fit but why IE cannot fit, it shrink. may I know how to fix this in IE?
link : http://itech-gd.info/en/simon
I put it at [WALLPAPER STYLE] + [FURNITURE]
Thanks,
IE8/9 look like they are working. I see your issue in IE7.
I have seen issues arise when iosSlider is initialized while hidden. The first thing I would try is specifying a width to the parent of the slider class: “leftPanelList_msTitle_3_msContent_3″ or try initializing iosSlider after the content is opened.
Thanks a lot…I had specific the width for the parent of the slider class, It’s work like a charm… actually IE8+ caused this problem not IE7+, sorry about giving wrong info…anyway thanks for your help and keep-up the good work
hey , great slider .
i have one issue with resize slider on orientation with android .
what i am doing wrong ?
http://www.2scan.info/nadav/new-mobile-desgin/index-new.html
thanks
There are known bugs in orientation change on android. I am still working them out.
ok i will be happy to know when you got them fix
thanks (:
Hey! The library looks and feels great. I’m wondering If you could fix this in line 749:
//from this:
$(this).css({
float: ‘left’
});
//to this:
$(this).css({
‘float’: ‘left’
});
It seems to break yui compressor, since float is a reserved, though unused, keyword in js.
cheers
Good catch. I will fix that in the next version.
hi,
marcus good work , is there any possibility to prevent horizontal slide while scrolling content vertical.because while i scroll inside content vertically it automatically moving to next or previous slide vise versa.
I’m not sure I understand what the issue is. The slider shouldn’t be automatically moving to the next/previous slide on its own unless you have it set to autoslide.
thank you for reply, i’m not set autoslide true , it will happen only i scrolling faster up and down.
Hi currently i’m working width 0.9.2.1 all seems to work width the image gallery and thumbs however using $(‘.iosSlider’).iosSlider(‘goToSlide’, 2); activates thumb button 2 but not slide 2 it remains on slide 1 .
running on windows Chrome.
Thx for any suggestion
Ps this is only in fancybox popup in THE main window thuis is working properly
How are you using fancyBox? iFrame or page embed?
Hi Marcus i am using fancybox inline however in iframe the same problem exists, even in twitter Bootstrap modal.
When are you calling $(‘div’).iosSlider()? There are known issues when initializing the slider while it is contained within an element with { display: none }. Make sure you are initializing after the fancyBox is loaded.
well Marcus you’re right for you to be complete maybe a faq
// set click funtion on your images
$(“a.swipeImages”).click(function(){
// populate the hidden div for fancybox with object this
$(“#imagesPopup”).data(‘context’,$(this));
// get the slidenumber from the images
var slideNumber=($(‘#imagesPopup’).data(‘context’).attr(‘data-slider-id’));
// use href attribute for fancybox and the slidenumber to execute the goToSlide function
$.fancybox({
href : “#imagesPopup”,
beforeShow : function () {
$(‘.iosSlider’).iosSlider(‘goToSlide’,slideNumber);
}
});
});
hi Marcus, i think i found a minor issue with the returned values from onSlideComplete.
If it is triggered by me physically sliding the images using my track pad, the id of slider object is in sliderObject[id]. However, if i do it dynamically using $(‘mydiv’) iosSlider(“goToSlide”, sNum); then the id is sliderObject[0].id…. i have a work around now, but thought you may want to know about it… thanks again
Very nice find. I’ll have it patched in the next version :D.
will definitely be waiting for it… Thanks again for a great slider.
Hi Marcus,
it seems that the onSlideComplete event is triggered when iosSlider is first created. is this the intended behavior? if so, can’t be disabled so as it only fires when the slide have actually stopped moving?
in my implementation i destroy and recreate the slide multiple times and i do use the onSlideComplete for something else as well, so currently i cannot tell when the slides have stopped moving from i just recreated an iosSlider.
any suggestions, or is there a chance to modify your code to reflect what is actually happening…
In the mean time you could remove line 990 from the script. That will disable the onSlideComplete being triggered from the initialization process. The only effect removing this will have is onSlideComplete will not be triggered onorientationchange and onresize. I’m not sure if this affects your implementation but that’s a short term solution until I decide what I would like to do with the onSlideComplete function.
- that should work for my implementation… i’ll give t a shot… thanks…
- my 2 cents, is to have 2 events, one for iosSlider “ready” and another for onSlideComplete.
your suggestion did the job… many thanks….
hi Marcus,
do i still need to comment out line 990 (or its new line number) in revision 0.9.4, or has it been fixed?
Also, for the iosSlideComplete issue that i reported earlier… is that also taken care of in 0.9.4? it seems that it is, but wanted to make sure.
Hi, loving the script!
Having some issues though setting up multiple slider on a single page. Is there a simple solution for this? I’m trying to set multiple classes for the slider but it doesnt seem to work(noob issues here)
Thanks!
Hey can you give me some more information? What does your $(‘div’).iosSlider(); call(s) look like?
$(‘.iosSlider’).iosSlider({
scrollbar: true,
snapToChildren: true,
desktopClickDrag: true,
scrollbarLocation: ‘top’,
scrollbarMargin: ’10px 10px 0 10px’,
scrollbarBorderRadius: ’0′,
responsiveSlideWidth: true,
navSlideSelector: $(‘.iosSliderButtons .button’),
infiniteSlider: true,
startAtSlide: ’2′,
onSlideChange: slideContentChange,
onSlideComplete: slideContentComplete,
onSliderLoaded: slideContentLoaded
});
When i add more classes to $(‘.iosSlider’) ($(‘.iosSlider’ ‘.iosSlider2′ etc) the slider breaks and no images are shown. I don’t think its in the css since i added the new classes to the same previous css markup( all sliders are consistent through out the site)
Any clue what i might be doing wrong?
Did your jQuery selector look like $(‘.iosSlider1, .iosSlider2′).iosSlider()? If not, you’re using jQuery selectors wrong. Alternatively, you can just do:
$(‘.iosSlider1′).iosSlider();
$(‘.iosSlider2′).iosSlider();
Thank you for the help, got it to work=)
Hey,
I have another question I cannot seems to find on google…
How can I lock the vertical slide/scroll when I scroll/slide the iosslider horizontaly on mobile?
I figured I have to add an “ontouch even” on my iosSlider class which will disable the vertical scrolling by returning false.
How could I do that?
Which touch device are you using? Once you start scrolling on the slider horizontally, it should disable vertically.
Do some research on e.preventDefault(); for more info on disabling default scrolling/behavior.
It’s weird. I tested with an android and it already works but not on an iphone/ipod.
Any idea?
Once you start scrolling horizontally, the slider is supposed to lock vertical page scrolling. It seems to be working on my iPad… Are you able to reproduce the issue with the demos on this page?
Actually it doesn’t happen on this page… It’s perfect on my ipod.
It might be a css problem I guess. What could be the problem?
Well if it’s an issue related to your code specifically then I would need to take a look at it to identify the issue :). If you want me to take a look, email a link to contact@iosscripts.com.
Im using iphone/Ipad for the moment. I haven’t test for android yet.
Is it normal?
Anyway thanks, I’ll try to find something with e.preventDefault();
Hi Marcus,
Thanks for the plugin – it looks very interesting. A minor thing, but the 4-Embedded-HTML example seems broken. I think it’s to do with the “float:left;” on “.iosSlider” – one of the height calculations returns 0 and the element gets hidden. It worked for me when I removed the float.
Cheers,
Pete
Thanks for pointing that out. I have fixed it in the new zip. :)
No worries. Thanks for the quick response.
Hey Marcus! Thanks for this very nice jquery! Unfortunately, I have a little problem I have been working on too much.
My slider has infiniteDrag, no snaptochildren, no desktopclickdrag because it is only for a mobile version.
Everything works well but I cannot slide my first element.
The slider is for my navigation menu and all buttons are inside “li” -> “a” -> “div” -> img and a “p” under the image. ( looks like this : )
For the first element (only on mobile), I cannot slide my button normally. I have to slide it through the “p”. Normally I slide the navigation buttons with the “img” except for the first 1 and the last 1.
What could be the problem?
In the current version, there are issues with anchor links breaking the slider. And I believe I have seen exactly what you are experiencing…
The good news is I will be releasing 0.9.2 shortly (hopefully tonight!). I hope that my fix will address the anchor/onclick issues you are experiencing. Hopefully my approach fixes your issue! :D
I’m glad to hear that!
I hope it fixes my issue.
I will send you more detailed information with an example if the error occurs after the next version.
Thank you for the fast answer! :)
0.9.2 released. See if that fixes your issue.
Hello,
It did fix my problem :P
Thank you a lot!!!
I can’t wait for the final version :)
Hey Marcus thanks for the great script, I think I found a bug on your script. When I use goToSlide the timer isn’t reset, so if you time it just right it switches to the intended slide but then changes again because of the autoslide timer :(
Good catch. I’ll have it fixed for 0.9.2! :D
Update: I have applied this fix to the new 0.9.2 release.
Hi Marcus,
I’m starting a project using this great slider and I have the following issue.
I’m initializing the plugin using :
$(‘.iosSlider’).iosSlider({
snapToChildren: true,
responsiveSlideWidth: true
});
When I resize the window or change orientation, I keep on going back to the first slide. How can I prevent such behavior ?
Thanks !
That’s a bug :(. I have it fixed in 0.9.2 though. I am doing some final testing now and plan on rolling it out soon.
Thanks very much for the fast update and all the work you’ve done !
I believe I have fixed this issue in 0.9.2. Try it out and let me know :)
Works like a charm, thx !
Oups me again, seems like the startAtSlide functionality is not working anymore on v0.9.2 :)
Booo! I have fixed it in 0.9.2.1. Sorry!
I had used the above slider for sliding the html pages for IPAD .One of the html pages having some 360 image rotation function.When we drag on the image it will rotate,but problem in IPAD ,touch event conflicts for particular page .The problem is the touch event function overides the 360 degrees rotation function
Hi,
its a great plugin,im using ios slider to load html pages by using jquery load function,normal html files works fine,but for html pages with jquery animation conflict occurs,another question
can i use with jquery mobile so that in all devices works fine
Nice work, i am looking forward to use your “onSlideComplete” feature.
In the meantime, for some reason, after embedding your “Photo-Gallery” example in my my page, Safari displays it with vertical scrolling/sliding. i am not sure from looking at the plugins’ parameter how to control this action to make it horizontal.
Can you please direct me to instructions on how to switch from one mode to another?
thanks,
Vertical? I didn’t program it to be able to do that! Do you have an example I can look at? Feel free to send details to contact@iosscripts.com
Vertical would be nice! Any idea if you plan to include this? Been scouring the internet for ONE plugin that does both at this caliber. Great work BTW… Also, I have a question. I am using this to provide a sliding toolbar. each slide is an .
There are 17 large buttons in the toolbar. 7 are visible, the remaining 10 are hidden until scrolled into view. I’d like the “nextSlide” and “prevSlide” buttons to be able to scroll the next set of 7 buttons into view. Then when clicking “nextSlide” again, only the remaining 3 would slide into view. I believe I can achieve this by wrapping sets of 7 items in one slide. However, I would have to break up my UL lists into multiples and this isnt preferred for accessibility reasons. In addition, I also believe doing this would slide the last three all the way to the left edge, leaving large whitespace which is also not preferred as this is wasted real-estate when existing buttons could be visible.
Any way one can add a config value to specify the number of slides in a “slide group” and the plugin automagically calculate the number of slides? Like paging really…
that’s weird… I am not able to reproduce it at the moment, but will send example if i can…. i already changed my code few times over since i first posted, and now it is working fine… i was just still curious on how i achieved that vertical scrolling… anyways… thanks…
This doesn’t work correct on ios 4.3. I have tested it with simulator.
Hi Marcus,
I’m trying to figure out how to modify the speed at which the slider scrolls when clicking on a slide selector button. Ideally, my client would like to see an immediate transition with no animated scrolling.
I suspect editing this will involve modifying the xCurrentScrollRate array, but I’ve been playing around with the code for a few hours now and can’t figure it out.
Oh, and thanks for this plug-in, it’s awesome.
Have you tried lowering autoSlideSpeed? This will actually affect all slide transition speeds (navPrevSelector/navNextSelector/navSlideSelector/autoSlide/goToSlide).
Let me know if this accomplishes what you need.
Thanks for the fast reply!
I did end up finding that adjusting the scrollIntervalTime variable is what affects that, however it’s not behaving in the way I want. Even if I set it to 0, it changes immediately on my desktop browser, but on iPhone and iPad I can still see it scrolling past the other slides to get to where it wants to be.
The thing is – as per my client’s request – I want to keep the scrollIntervalTime at 10 for everything except for when using the slide navigator. When using the slide navigator, I want the specified image to display immediately, without scrolling through all the slides between the current and clicked slide.
I could write a function that adjusts the scrollIntervalTime variable for when the slide navigator is in use, however, as stated above, even when set to 0, i still see the scrolling on iPhone and iPad.
Hey Marcus, caught a minor bug: When you use ‘goToSlide’, it doesn’t update the internal “currSlide” index, so that if you ‘goToSlide’ number 1 from, say, the end, hitting the next button doesn’t go to slide 2 because it still thinks it’s at the end.
Ah, thanks. I’ll add it to the list :).
Marcus,
Thanks for creating such a great script. It is just what I am looking for. I was wondering if you’ll be updating the CSS (and the link to the newer JS file) on this page to make it easier to apply your examples on our own webpages?
I ran into a problem with the embedded html because the width of my image was not the entire width of the slider. Thus, when grabbing the image to drag the slider to the next frame, I ended up just dragging only the image. I got around that problem by adding the following class:
.iosSlider .slider .item .cover {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
that I then am applying to an empty div element between the image and div with class=”text”
to put a barrier between the image and the cursor (at least in FF 11.0).
I understand this could cause potential navigation problems and perhaps problems with forms in a slider div (but the use of the extra div is optional. I mention it here in case you might find it useful.
Also, I have an issue with the parent element that is arbitrarily used to determine the responsiveWidth and height. In my case, my slider’s parent element happens to have a height of 300px, so even at 1020×768 my 608x600px slider is being resized unconditionally. Perhaps it would be possible to specify an array of responsive width breakpoints that could used by default and if that array is empty, *then* use the parent width & height? Just my two cents. If I can work something out, I’ll send you the code.
Otherwise, this is just an awesome plugin! Keep up the great work
Sincerely,
Christopher.
Hi! This plug-in is awesome, great job. With the last two versions, links don’t work in embedded html slides on the first slide if DesktopClickDrag is true. The links work on mobile, though, and if DesktopClickDrag is set to false. Is there a JS tweak that could be made to address this or will it just be tackled in the next version? Awesome work, again.
Next version I am looking to fix anchor linking/onclick events within slides. I admit it is currently bugged… infinite slider and some jQuery cloning caused some onclicks to be lost.
At any rate, I am working out a way of handling links/onclicks properly going forward. Sometimes when a user is grabbing the slider and then releases, a slide with a link in it is inadvertently clicked. Some drag sensitivity monitoring should be used to address that. But progress is being made and I will have a fix :).
Anyway, that’s where I’m at. I would expect to have something in place on the weekend. Thanks again for trying out iosSlider!
Best jQuery plugin I’ve used yet, especially because I can use it everywhere :)
Functionality Request:
Something that I can’t quite figure out myself bug-free: Slide Addition. Is it possible to add a new slide to the end of the current set? The app i’m developing has a max-load of only 5 data-items at a time for performance reasons, and I would like to set it up so that onSlideComplete, it triggers an additional call to load an item and then append it, as a slide, to the end of the current slider-container. Ideally this would work in reverse, too –the ability to destroy individual slides.
Another functionality request, (though this is something that I have already hacked together but it would be a good addition to the core): The ability to cancel out drag / click if over / on a particular target. In my modified version of the plugin, i set up two additional parameters (“cancelOnClass” and “cancelOnId” that check if a given target has been clicked or touched and cancels out the drag-call if true. Very useful for sites with multiple touch-slide areas (nav docks, text, etc.)
Again, great, great work.
I think that you could call incorporate the destroy method, jquery’s appendTo() method to add a new slide and then initiate the slider again starting at a specified offset.
Another way would be to have all the slides in the slider at the beginning but leaving them as empty divs. When sliding close to them, you would load the contents of the slide onSlideComplete.
Just 2 ideas off the top :).
I like your second idea, I will look into it!
Hey Marcus,
Yes, I actually ended up going with the second suggestion; it ended up working well and solving most performance issue, though it still feels a little hacky compared to a public method “add slide” / “remove slide” — but yes, thanks again for getting back to me. This thing flys on the iPad with everything from embedded videos to multiple views to … who knows. Awesome work.
marcus, i am in a similar situation, except that i do not have a Fixed number of slides, they could be anywhere from 1 to 40 slides. so i tried the destroy-create method. It seems to be doing everything correctly except that all images have “display:none” on them. So nothing is visible in the slider, even though the code shows that the correct divs are there. I can even slide them around and i can see that the scrollBar adjusted accordingly to the new number of slides and my onSlideComplete handler displays the correct values in the console.
so any ideas why the slides have disply = none, and how to remedy this?
Or am i calling the destroy function wrongly?
here is how i am calling it:
//Load some images in div in html…
….
// Create a slider
$(“.iosSlider).iosSlider({…….});
// Load a new set of images and put in div in individual divs in html
…..
// Destroy Previous iosSlider….. it has a class= iosSlider, and id = g_slidecont.
$(‘#g_slidecont’).iosSlider(“destroy”);
// Recreate the Slider
$(“#g_slidecont”).iosSlider( {…..});
This is the most beautiful Plugin for iPad and Touch device Thank you so much
First of all, what a wonderful little plugin! Perfectly suits my needs.
I’ve downloaded the 0.9.1 (beta) version, yet I have trouble getting anchor elements to work. They seem to work perfectly on all slide except for the very first one.
Is this a bug ?
That is definitely a weird bug. I will fix it for the next release. Thanks for finding it!
Very good piece of work. But it does not run under Safari, 5.02 – 5.1.5 – therefore the name does not quite fit. Any update?
Under 5.02? Your wording is kind of throwing me a bit. Do you mean Safari 4?
Hi Marcus, thanks for the quick reaction. I did not want to offend you or your work in any way – to be clear: this is probably the best slider to date! Moreover, the mentioned “Safari-Bug” (so called) occured under SF 5.15 Win Vista – which surely disqualifies me from now on :-) Surely it runs in the Apple world where it is supposed to be, I guess.
No offense taken :). I will take a look at it in Saf 5.15 on Vista and get it working for a future release. Thanks again for finding that bug!
Hello.
How works the calculation of the “SnapToChildren”? I need to Update this – The Function use the half size of an item. I need not the half size, i need the double ratio.
How i can recalculate the SnapToChildren function?
Thanks for help
Edit to my previous comment:
The first image seems to always be unresponsive to touch when you enable infiniteSlider. When I set that to false all is well.
Hmmm… Can you send me a link to an example? or zip it and send it to me?
Send it over to contact@marcwhitbread.com. Thanks!
I’m trying to get this to work with a figure and caption in the slide but it’s not responding to touch on iOS. Do images have to be applied in the background css? I also tried putting an overlay div on top on the figure tag but it still wouldn’t work with touches.
[...] iosSlider is a jQuery plugin which turns any wide element into a touch enabled horizontal slider. Touch Me. Hardware accelerated using CSS3 for supported iOS, Android and WebKit iosSlider – jQuery Horizontal Slider for iPhone/iPad Safari (Beta) [...]
Hi Marcus,
The new version is great! The gotoslide function works well too. :) The only thing now is that code like this cannot be used anymore in the new version:
function UpdateNav(settings, node, activeSlideNode, newChildOffset) {
$(‘#slide_sorter a’).removeClass(‘selected’);
$(‘#s’ + activeChildOffset).addClass(‘selected’);
}
Is there any alternative to this in version 0.9?
Much obliged,
G.
Yes! I have improved the way the optional functions handle parameters. The easiest way to explain it would be to get you to take a look at the demo’s in the iosSlider.zip.
Hi Mark,
Finally i used your plugin on one of the projects i am working on, I totally love it.
I am trying to add Google Map in one of the slides. Any idea, how to?
My plan is to have 2 pictures, one Google Map and one Interactive image (with lightbox popup)
Hi there!
I was wondering the same think about the mouse wheel …. Is it possible? And if the answer is Yeap, how can I do this? :-P
Thks
This functionality is not currently built in. What are you looking to do with the mouse wheel? Scroll up and slide left, scroll down slide right?
Hi Marcus!
Thanks 4 your answer!
Well, I’m using the magic mouse, and I would like to scroll left and slide left, scroll right and slide right… should it be possibile to do it?
Emerson
By the way, it’s possible to random images with your amazing script and show the slide number?
Thks for all!
Emerson
Hi,
Is there any way i can add mouse wheel effect to the Embedded html version?
Please contact me on the e-mail. I really need help!
Thanks,
Paul
What are you trying to do with the mouse wheel?
Hi Marc,
I have a strange behaviour with “infiniteSlider” on iPad with version 0.8.9 : I can slide infinitely towards the left, but not towards the right. The right direction has only one copy of the slides and then I’m stuck.
It works okay on an iPhone, though.
Have you seen this problem before?
Greg
Hi,
I tried to append more clones of the children to the scrollerNode object, i.e. replacing :
$(scrollerNode).children().clone().prependTo(scrollerNode).clone().appendTo(scrollerNode);
with
$(scrollerNode).children().clone().prependTo(scrollerNode).clone().appendTo(scrollerNode).clone().appendTo(scrollerNode).clone().appendTo(scrollerNode).clone().appendTo(scrollerNode);
This seems okay now, even though I don’t understand why I don’t find a limit just a little further to the right : I guess I don’t understand how you coded the infinite slider at all! :-)
Greg
Try out v0.9. I think I might have fixed it.
When I set the width of the classes .slide and .iosSlider to 1024px in my CSS file, my slides and my slider always get a width of 876px by element style.
When I set the width lower than 875px my CSS works and there is no element style, however when I set it any value higher than 876px I get the element style of 876px again.
how can I fix that?
great slider though! thanks a lot!
Is responsiveSlideWidth: true? i think you need it to be set to false, or left out of the options so it defaults to false. Could be a bug though, let me know if it works!
Additional info about responsiveSlideWidth: When responsiveSlideWidth is set to true, it compares the window width to the outer width of the slides (width + margins + borders + padding) and makes the outerwidth equal to the window width if it is greater.
responsiveSlideWidth was not set, so it should have been false.
It works now as I have an element with class content inside the slide with width set to 1024px.
.content{
width: 1024px;
}
I don’t know if this fixed the problem or if it was something else, but I’m happy it works now!=)
Thanks for your very fast answer!
Hi Marcus,
I just thought about a few things concerning iosslider. Currently it is possible to embed a slider within a slider. This is especially useful when creating a flipbook (or magazine) with iosslider. That way you can embed small slideshows in pages. However, when swiping an embedded slider, the parent slider also slides along with it. Would there be any way to prevent this?
Also, it would be cool to offer a vertical scrolling version of iosslider.
G.
Thank you for that slider!
I have a question: how can I redirect the user to a page when it reaches the last item of the slider?
This is possible?
Anyway thank you very much!
Something like this might work.
var lastSlide = 5; $('div').iosSlider({ onSlideComplete: checkSlide }); function checkSlide(settings, node, activeSlideNode, activeChildOffset) { if(activeChildOffset == lastSlide) { window.location.href = 'page.html'; } }Oh! Tnks! Works perfectly
Thanks for sharing this great plugin with us! :) I’m using it now to develop a magazine on iPad. The only thing I can’t get my head around with my limited knowledge of jquery is how to make the slider jump to a specific slidenumber. I’d like to be able to do something like to be able to link from one slide to another.
Any thoughts would be much appreciated. Cheers! :)
The only way you can navigate the slider right now is with the options: navSlideSelector, navPrevSelector and navNextSelector. I don’t think these will be useful in this case… :(
On a positive note, I think this functionality is something I would like to include! So I will add it to the next beta release. Probably a end of week.
That’s great! :) It would be awesome if you could just jump to a slide-number from a link. (for example onClick=”$(‘div’).iosSlider.gotoslide(5);” )
Can’t wait to see it in the next beta – best of luck! :)
I have added this functionality to v0.9 (beta). Here’s how to move to a specific slide.
$(‘div’).iosSlider(‘goToSlide’, slideNum);
That’s absolutely awesome – thanks!!! Will try this out asap!
G.
Hello,
I really like this plug-in, it’s the best slider I’ve found and it works really well with my jQuery Mobile / responsive design site that I’m working on.
My question is about how to tell the plugin to refresh the width calculation of the “.slider” div. I am using the plugin for a features comparison and there is an option to remove and item from the list (I’m removing “.sliderFrame” div when the user clicks the remove link). I’ve tried adjusting the width of the “.slider” div based off the number of remaining “.sliderFrame” divs but that doesn’t seem to resolve the issue. I’m still able to scroll/swipe to the phantom (removed) slide.
Is there a way to refresh the slider without re-initializing it?
Thanks again for creating this VERY useful plugin!
Mike
Thanks for trying out iosSlider. :)
Re-initialization would be possible by calling $(‘div’).iosSlider(); again. But then it may be attached twice… havn’t had a chance to try it yet. I would recommend trying that (but it may cause some undesirable effects :S).
I am currently working on a destroy method which would allow you to kill the plugin globally. You could then bundle that with executing $(‘div’).iosSlider(); again to simply recalibrate. I would expect that functionality to be working by the end of the weekend.
Yeah, that would work. So instead of a refresh I would just destroy the slider and reinitialize. Works for me. Looking forward to it!
The destroy method has been added in v0.8.9 (beta). See Public Methods above for usage. Let me know if it allows you to do what you need.
Can the destroy method be called on an individual slider? Something like this?
$(“#myFirstSlider”).destroy(true);
And if I had a second slider on my page $(“#mySecondSlider”).iosSlider({…}) it would still be active? Or are all sliders destroyed no matter?
The destroy method has been changed in v0.9 to do what you need. Only the slider object specified in the selector will now be effected. $(‘div’).iosSlider(‘destroy’);
Yes, for now I just made a destroy for all. I am adding the singular version to the next update.
Great stuff, thank you!
May I ask what license you are using? Haven’t found anything on the site, nor in the code.
Thanks.
No redistribution of original or derivative works. No attribution required for use. This only applies to beta versions. The full release will be different.
Hi Marcus,
English is not my native language and this is a bit difficult to explain.
When I set infinitiveScroll on true in the demo called “4-Embedded-HTML” and click on the previous button, nothing happens. Click on the next button the slider slides to the second slide in the duplicated slides prepended. Click next again and it goes back to the first slide and now everything works normal. Drag and autoplay works just fine.
Thought I’ll let you know.
I see it. I have a fix for this on its way tonight or tomorrow.
Hi Marcus,
Great job. I’m building a small site right now. Before I downloaded your script I tried this site on IE8 and everything worked. I downloaded and used the script but when testing it on IE8 it doesn’t slide. So I tried one of the examples that came with the download and they don’t work on IE8 as well. I’ve been comparing the examples with the demo on this site but can’t find it.
Any ideas? Tnx.
Somewhere along the script the width of the Slider is being calculated. In IE8 I don’t see the calculated width back in the Slider style element. If put in in manually then I can drag the slider (kinda) but the prev next buttons still don’t work. I’ll keep on digging.
It should be working… I will update the demo package tonight with the fixes. Sorry about that.
Update: Fixed. Download 0.8.7 and try it out. There was an issue with IE7/8 failing when no border CSS was set.
It works. Tnx. I’ll let you know when it’s online.
This is a realy nice script. But I have a special problem. I want to use it for sliding about 50 images on mobile devices and specially for low bandwidth. So I have tried to implement a preloader for my images, so that the image only load, if the actual slide is active. But I can’t get this to work. I have tried it with background image, with normal image tag and so on. All images that I load after the slider initialisation will not be displayed. But in source code, image url’s are correct. It would be very nice if there would be an option to load images individually and not on initialize of the slider.
I was interested having preloading and i did it like this :
$(‘.iosSlider’).iosSlider(
// your ioslider Setups
onSlideComplete:loadImg
);
function loadImg(settings, node, activeSlideNode, activeChildOffset) {
$(‘.selector’+activeChildOffset).html();
};
all my images are embedded in :
selector0 : first image
selector1 : second image
…
…
Oups sorry :
of course I add the image call on the .html() function something like .html(”);
I like your approach to the preloading. Somehow I never thought of integrating it this way.
In addition to this, it might be a good idea to check the next/previous slides of the current (activeChildOffset +/- 1) and buffer those without having to go to the slide and then wait.
Good point on preloading the next/previous slide. One nice integration would be to get access to the previous / current / next selector on the onSlideComplete function :)
Yeah you’re right. I would like to pass a lot more variables back to those functions. I am trying to think of a better way to do it. Perhaps passing an array of variables back would work better. So it would be just:
function slideCompleteFunc(args) {}
Much cleaner and more data that way.
Yep sounds good !
Actually having the current selector would be enough as getting the pre and next one would be fairly using jquery’s magic .
Hi Alex,
Thanks for trying out iosSlider! At the moment, there is no way of buffering the images within the slider, but I do plan on adding that functionality :).
That would be great! Thanks for the fast reply ;)
Hi Marcus,
I experienced a bug with iosSlider and @font-face. The problem is that iosSlider computes the size of the slider before the @font-face font is loaded and applied. If a font changes the width of the slides, then the added pixels make the slider too small : you end up with the last right slide being “cut off” and sent to the “next line”. If this doesn’t make much sense, a demo is here:
http://artefarita.com/iosSlider/iosSlider-bug-overflow.html
The last item should be “Décoration & Travaux” and it is not visible because of the @font-face declaration.
Maybe computing the width on “window.load” instead of “document.ready” could help?
Grégoire
Well, it seems to work with $(window).load() instead of $(document).ready(), so maybe you could just add this “@font-face” corner-case in the documentation.
It works with window.load on the given link, but not on my real world slider : the computed width is 0px!
From what I’m seeing, it looks like this might do the trick. I cant say for sure without more testing but I would try the following:
document.onreadystatechange = function() { if (document.readyState == "complete") { //load slider } }That makes sense. window.load means that the slider waits until the page has completely loaded all media before firing. That might end up being too ‘late’ in some cases though… If I can’t find a way of resolving this via the script, I’ll be sure to add this situation to the documentation.
Thanks.
Hi,
Would it be easy to retrieve the current and targeted slide selector when in the onSlideChange() function ?
Thanks !
Ok I should have looked at the examples first, for the targeted slide offset that’s how I did :
$(‘.iosSlider’).iosSlider(
onSlideComplete:SlideChange
);
function SlideChange(settings, node, activeSlideNode, activeChildOffset) {
// do whatever you need with the var : activeChildOffset
};
Love the plugin ! :)
Thanks!
Marcus,
Great script you’re developing here! I have a quick question for you – I notice that you have some variables set up for different IE versions which currently don’t seem to do anything, and that the script currently bombs on IE. Do you have any plans to make this work cross-browser? I would love to use this, but unfortunately the project that I have in mind would need a solution whereby we could use the same script to power both desktop and mobile versions, and IE is a large part of the market.
Wonderful work… I look forward to seeing how you take it forward!
David
I am half way through IE7+ support for the script. Maybe even IE6 if it plays nice.
That’s awesome news, Marcus. Thanks for getting back to me, and well done on an excellent script.
You may also be interested to know about the following script: http://www.benbarnett.net/2010/09/01/enhancing-jquerys-animate-function-to-automatically-use-css3-transitions/ , which would allow you to intelligently use css3 transitions etc automatically, rather than having to hard-code it in to your script.
IE7+ support has been added in v0.8.5. Enjoy :D
Great script indeed.
You may have already noticed it; but when there are lots of items (130 in my case), it crashed my chrome browser … (But I totally agree, that having 100 items in a slider is certainly too much …)
If your slides are 800px wide (for example) x 130 slides. The slider is 100K pixels wide LOL. I can see a lot of bad things happening. I’ll look into it though.
Hi!
First off, great script! Thank you so much for sharing.
Is there an easy way to have the thumbails (buttons) scroll along the bottom instead of going to a second line below? If I’m over 6 slides, the thumbnails below the main picture go to a second line.
Thanks again for all your hard work!
Cheers,
B.
Thanks!
Reply with a link to your example and I will take a look :)
Thanks Marcus!
You can see it here: http://www.bp1.ca/escios/gallery2.html
It’s being designed to work with an iPad in landscape.
Cheers,
B.
I think if you put the thumbnails within a different slider, you would probably be able to achieve this. I’ll look into building out a demo with this concept in mind tonight. Expect to see it up on the site tomorrow.
Hey Marcus,
I tried to add the thumbnails to a slider and it’s *almost* working. It shows the first slide, but not the second.
The latest version is up.
If you get a chance, can you take a look at it? I’m missing something easy I imagine.
Cheers,
B.
You’re getting there. I uploaded a new 0.8.4 zip with a fifth example. Try that and let me know if it’s what you are looking for.
Thanks Marcus!
Works great. I’ll see if I can add a function that scrolls the bottom slider when someone swipes past the 6th one.
Thank you again!
Cheers,
B.
That’s great news! Thank you.
BTW: I did try and wrap the thumbnails in a new slider, but could not get it to work.
That’s why I decided to ask. :)
Cheers,
B.
hey man, im back again.
The new option responsiveWidth was great.
There were a few tweeks and bug fixes though.
At first i changed the orientation and it didnt resize so i thought it didnt handle that, i was about to add it then notice you had it there but just a slight bug that didnt allow it to work on android.
so i change from $(‘body’) to $(window) now thats fixed.
then i noticed that when u change u completely reinitialize the slides which is kind of good except that if im on slide 4 , when i change orientation i go to the slide that was set to start.
so i changed childrenOffsets[settings.startAtSlide-1] to childrenOffsets[activeChildOffset] in the init code.
i also added made some changes in init to the stage width so i wouldnt have to use css unless i had too. for my purposes only , others might prefer the default way
i will shoot you the plugin with the old lines commented out an my new lines of code. for all the above
i will also start to take a loop at the loop and you are correct about the most desired way.
Thanks again
Hi,
I’m experiencing the same problem than “jk” with landscape mode : the slider doesn’t resize itself. I’m using version 0.8.4 and I have set the “responsiveSlideWidth” to false (it really should be set to false by default in my opinion, as the longer slide names are cut off when it’s on, making the slider looking seriously bugged).
While I’m here, I tried to use the “startAtSlide” option and it doesn’t seem to work, even with “snapToChildren” set to true (by the way, the “description” for the “startAtSlide” starts with “(boolean)” instead of “(integer)”).
I also noticed that version 0.7.7 is more fluid than 0.8.4 is (sorry to be so negative about the latest version but I think it’s important for you to know).
Cheers,
Greg
I appreciate any feedback. The more critical people are, the better this can be ultimately. So thanks!
Responsive slide width will not resize anything within the slider, only the slide itself. This means that if you want your titles to resize or wrap when they are too long, you will need to have width set to auto or a percentage on those items.
I will look at the bug in startAtSlide not working.
Sorry for the typo in the options, I can fix that at least! :D
As I continue to build up the features, performance will be impacted in the short term. I expect it to be an ongoing struggle.
Hi Marcus,
I cannot find out if I can have slides with non-constant width (i.e. dependant of the length of the text in each slide) and “responsiveSlideWidth” set to true (so that landscape mode extends the slider to the width of the screen). It seems that whenever I set “responsiveSlideWidth” to true, all slides get the same width. Do you confirm this behaviour? If so, could it be possible to have a slider width that ajusts to landscape mode, without forcing a constant width on the slides themselves?
Thanks,
Greg
Hi again,
I solved the problem by commenting out the following lines in init() :
/*
if(settings.responsiveSlideWidth) {
stageWidth = ($(stageNode).width() > windowWidth) ? windowWidth : $(stageNode).width();
}
$(stageNode).css({
position: ‘relative’,
top: ’0′,
left: ’0′,
overflow: ‘hidden’,
zIndex: 1,
width: stageWidth
});
if(settings.responsiveSlideWidth) {
slideWidth = $(slideNodes).outerWidth(true);
if(slideWidth > windowWidth) {
slideWidth = windowWidth + ($(slideNodes).outerWidth(true) – $(slideNodes).width()) * -1;
} else {
slideWidth = $(slideNodes).width();
}
$(slideNodes).css({
width: slideWidth
});
}
*/
I guess you could add another option for people who only need the “landscape” resize of the slider, but who don’t want fixed-width slides.
Greg
That works. But that’s definitely a bug. responsiveSlideWidth should only alter slides that are above the threshold when set to true, not change them all :S. Expect that fix in the next release. :)
hello, marcus
ur plugin is great!! thanks!
i have one problem.
when i zoom the webpage, no matter in or out, the slider will flash(looks like reload), and sometimes the word will be blur.
Is it the bug about mobile device?
The slider needs to recalibrate whenever there is a change in window resolution, updating the scrollbar, slide widths, etc. This essentially resets the slider to its starting state. Would you prefer to see something different happen when zooming in?
Also, which device are you using?
Thanks.
Oh, i see
That means the recalibrate process can’t be avoid.
I am using ipad.
are there differences among different devices?
Thanks!!
Sometimes there are bugs across different devices, that’s the only reason I ask.
The recalibration process has been streamlined in version 0.8.3. By default, when you are on a slide and the window is resized, you will stay on the same slide. Another option you have is to set responsiveSlideWidth = false. This will disable all resizing and recalibration. Let me know if that helps.
Oh, Thanks so much!
I will try it.
I have another question.
I want to know if iosslider is possible to be used on the items with different width?
Hi, just wanted to say: Beautiful / easy to use script !
marcus you have been excellent in updating and add functionality to your plugin.
The feature i am waiting on is the added feature of the infinite loop.
There are two types
- infinite loop where you see the transition back to the first slide/last slide
- infinite loop where there is always just the next and previous slide with no extra transition
If you are interested i just took a look at you code and i see it is easily implement the first one with two lines of code.
i would have to really examine your code a little more for the second type. (maybe ill get a little time tommorrow when i test out the responsiveSlideWidth to figure it out as well.
only if you are interested.
Thanks again
Ya, the first one is pretty easy, I can’t see too many preferring that over the true infinite style though. If you have coded something up for the first one, feel free to send it over to contact@marcwhitbread.com. Thanks!
sorry to be overwhelming your blog post area!
Quick question i am trying to implement this into a mobile enviroment, i have problem getting a 100% width set for the slide the allows it to automatically adjust based on screen size.
example. i have a slide div that has a image that i have to defined width and height and a div under the image that has text and so forth. but i cant get it to allow the text to automatically be the width of the screen and adjust according
do you understand? and do you know the method of handlng this similar to how yahoo.com slider sits.
thanks
I get what you are saying…. That would be a situation I overlooked.
SO, let me ask you this. Is there ever a situation where you might want to have slides wider than the width of the screen? no, right? I will add some code that evaluates the following:
if(slideWidth > windowWidth) slideWidth = windowWidth.
If the slide width is less than the window width, then it will function as normal. Deal?
just to also clarify i was originally posting for a css solution that i thought you may already know about.
but this should work just as nice.
A CSS solution would be impossible I think… for a slide to have it’s width dynamic based on the window, it would need to be a direct child element of it, and that wouldn’t be possible because they need to sit within the slider :S.
At any rate, 0.8.2 is up and should do what you need! The ‘responsiveSlideWidth’ option will allow you to toggle this functionality on and off. Cheers! :D
yeah you are correct about the css
and i will get a chance to update you tommorrow.
Super Awesome thanks to you and your plugin again.
yes that sounds like a plan, sounds like the solution. i can test out once its updated.
As far as the if block.
i dont think i ever would need any slides wider than the screen. but for others you never know.
so i would say a api option to turn it off or on. ex. slideWidthAuto: true/false and maybe even slideHeightAuto: true/false (not sure) then only use the if block above when this option is true
just idea.
looks good appreciate the update. now just whenever you get time to get to the infinite loop through slides(i think it will be as full featured as any other plugin)
thanks again
Nice work!
Am I missing something or is there no way to continue to the first slide when u get to the last siide and go to the last slide if you slide past the first slide.
i guess i mean is there no way to have it where its continuous(no end)
You’re not missing anything, it doesn’t exist… yet. The ‘infinite’ scrolling style has been asked requested a lot. It’s a priority enhancement right now :). Hoping to have it up with a few other new additions in the next little bit. :)
ok sounds good, nice work even without it but i would definitely use it over something else with it.
is there any current function / or variable that i can access that will allow me to dynamically change the current slide.
I need a way to have previous/next buttons for those that dont realize they can slide, just asking before i try to hack in my own version
Wow what a coincidence! I am about to release that! If you can wait a few hours, I can have 0.8.1 up tonight with that functionality included.
man yeah that is coincidental but even better than that… You are awesome on the support, quick reply and just pure dedication to your project.
just awesome.
Thanks for some awesome Javascript!
I’ve come across a curious bug using an input form element & iosSlider on the same page – example @ http://cucaera.co.uk/lincsbeetles.m/e3.html
Works fine on an iPod, but on my Android device (using the stock browser) typing in the input is delayed – it takes ~4 seconds for the character to show.
One more thing: onSlideStart and onSlideComplete arguments/parameters doesn’t match. Why?
onSlideStart(this, HTMLElement)
onSlideComplete(this, DOMWindow, i)
The second parameter need to be the slider’s element.
Br,
David
Hi Marcus!
I have an issue with Chrome on the second example.
First swipe the slide nr. 2 was perfect. Then, when I want to swipte to the third slide it’s jumped to the first slide. Actually, forgot the original statement when I starts drag (onmousemove event). In IE and FF works great. I checked your code and I think I found the problem: If you force “isWebkit” var to false, the bug is disappearing. I think you are using isWebKit to detect iPhone/iPad/iThings but it isn’t good, you need to check Chrome as well.
Or I have a simple fix. At line number 195, change this:
if(isTouch || isWebkit) {
to this:
if(isTouch && isWebkit) {
I didn’t tested on my iPad, but I think it’s will be good.
Fix it, then publish your next release :)
ps.: sorry for my bad English knowledge.
Keep up the good work!
Br,
David
I’m sorry… I somehow missed that bug when I was tinkering with some desktop compatibility. The fix you mentioned work but not exactly what I had to do to fix it. Touch devices and WebKit browsers are not exclusive to one another in all cases.
Just in case you are curious, to fix the issue I changed a condition within the init() and getSliderOffset() functions to:
if(isTouch || isWebkit) {
from this:
if(isTouch) {
At any rate it is fixed in version 0.7.9. Sorry for the inconvenience :(.
I’m having the same issue with examples 2 and 3. Using Safari 5.1.3, OS 10.7.3.
Fixed in 0.7.9. Sorry about that…
Yeah, Safari is using same engine (WebKit).
Marcus, publish your code to github / bitbucket(free) and I will fork your code. I found some annoying “features” like onSlideStart / onSlideComplete can’t reach the slider or the scroller element. Some inline style is unnecessary too (f.e. margin-bottom). I would like to share with you and with the community.
David
Haha, I found scrollbarMargin’ settings. Shame on me!
David
Hi Marcus,
I’d like to know if this is possible to initialize the slider so that a given slide is visible.
The use case is that I have added a “selected” class on the selected “li” element (so I have a somewhere), and if this element is far to the right of the slider, then it may not be visible on the new page.
The idea could be to “snap” from slide to slide, until we find the one which carries the given class (“selected” in my example, but the name of the class should ultimately be left to the user).
What do you think of this idea?
Thanks,
Greg
What I will do is add an option called ‘startAtSlide’ (or something similar) which will accept an integer value of the slide to start at. The javascript would look like:
$('.iosSlider').iosSlider({ startAtSlide: 2 });This will initiate the slider at slide 2. Will that achieve what you are thinking of?
This will be included in the soon to be released version 0.8 :D!
Yes, I think I will be able to iterate over the slider to get the slide with the “selected” attribute.
The html tag was eaten by the form. Insert “li class=’slide selected’” between “so I have a” and “somewhere”. :-)
Somebody told me that is it not working on a Windows mobile.
Can anybody confirm this?
Maybe internet explorer issue?
Without testing it and knowing how bad IE usually takes to these sorts of things I would say probably not.
It works almost on IE mobile. but only the browse-buttons work, not the touch-dragging.
I can confirm this as well. Prev/Next button functionality works well but the swipe/touch-drag functionality does not work.
Are there any plans to adopt this? I’d be more than willing to assist with testing on a Windows Mobile 7.5 device.
Hi, great,
if you want to mimic iPhone or mobile phone, when the image pass 51% of the screen, it should slide and not return back,
If you do it slowly, and slide image until 51% of the image is showing, on mouse out it should continu to slide. :)
I am having trouble understanding what you’re saying. I’m benchmarking it against the iPhone/iPad home screen slide functionality (when the ‘snapToChildren’ option is set to true). In 0.7.7 I am not seeing any major difference in functionality, unless there is a bug I’m not seeing :S.
What is supposed to happen is: While ‘snapToChildren’ = true, if the user swipes quickly, it will always snap to the next slide. When the user slides at a speed below the velocity threshold, it will snap in the direction of the most visible slide.
hello Marcus,
first of all : thanks and congratulations for your work, your slider rocks !
i totally agree with Florian : adapting behaviour when rotating would be greatly appreciated ; before you achieve this, may there’s a way to desactivate the sliding effect and then reactivate it ?
Best regards
That’s one of my higher priority improvements. You can expect it in the next week or so.
Thanks for replying as fast !
Hope to here about this improvement soon, keep on the good work :)
Adaptive, landscape/portrait switching is now supported in version 0.7.8. You can use media queries in CSS or JS (or just use the default behavior) when the screen size is changed and the slider will automatically recalibrate.
i have downloaded the new slider and am now using it. it is a big improvement on the previous version i was using. i have found a small issue that may want fixing. on line 427 you have left in alert(‘a’); i assume this was for testing purposes as it serves no purpose and probably just wants removing
Yes, sadly I left that in 0.7.5 by mistake. 0.7.6 should be fine though :). Thanks.
Hi Marcus!
I downloaded version 0.7.3 and I have a problem to reach the last item to the right. Very often, the slider bounces back, making this item unreachable. Is there a way to configurate the slider so that it doesn’t bounce back “too much”?
Thanks!
Greg
Can you send me a link to it? Thanks.
Hi Marcus,
It seems to be ok with version 0.7.6! Thanks!
Greg
Hi there !
First off, thanks a lot for this great script. I’m using it in a project to generate an image rotator…this means that I only have one slide. I tweaked the script a bit to fit my needs, but I can’t get the following to work: I would like that the end of the slide (part to the far right) acts the same as the beginning of the slide. Would you mind pointing me out how I could achieve this ? Thanks in advance.
Kind regards, Oliver
Hi Oliver,
I am not 100% what you mean, can you put your example on the web and pass me a link? If you can’t do that, can you email a site zip to contact@marcwhitbread.com so I can take a look?
Thanks! :D
hi!
i like this a lot too.
I have several slider on my page (ijinprod.com/iphone/)
so i can’t scroll vertically…
Do you have a workaround for me?
thank you
Hi tais,
The difficulty is that I need to separate the user’s desire to scroll down and navigate horizontally effectively without compromising the slider at all. I will try to get a fix out within the next 48 hours. Stay tuned!
Greaat! well done! it work perfectly!
i stay tuned! you rocks.
héhé… got some goood news for me?
Yep! I will be uploading the new version tonight! :D
Hi Marcus,
Nice script, very easy to use!! Thank you for writing it!
I’m wondering if it’s possible to make the slider infinite? Means it goes in circle and when you hit the last slide, it will automatically return to the first slide?
This idea is on my radar for sure. Probably some time after beta.
Hi Marcus!
I’m trying to make an horizontal menu for iPad/iPhone. Your “iosSlider” class is what I find to be the best so far, in terms of fluidity.
However I have a problem : when I add links in the “slide” elements of your example, the “clicking area” is shifted to the bottom and to the right (as displayed by the area when the links are activated). I have put a screenshot here, showing that the active area is not centered :
http://artefarita.com/iosSlider/shift.jpg
As can be seen, to activate the Google link, the user has to tap on the bottom of the “g” and not on the second “o” as expected.
You can test the problem here :
http://artefarita.com/iosSlider/iosSlider.html
or more shortly :
http://bit.ly/wKLrBS
I don’t own an iPhone or an iPad, and I test on Android’s browser (WebKit based).
I believe this is a bug from iosSlider, because when I remove the call to iosSlider() from my JS, the links “active” areas are normal (centered around the text).
Can you confirm that you have the same behaviour on your iPhone/iPad, and have you any idea of where the bug comes from? I tried to isolate the problem but without success.
Thanks!
Greg
Hi Greg,
Thanks for trying out iosSlider! That issue is interesting… I will take a look at it and update the plugin with the fix (probably today or tomorrow). I use an iPhone/iPad to test so hopefully it isn’t an android specific issue. It’s webkit as well so it should be fine… I will update the plugin and email you the fix as well :).
Update: Sadly I can’t seem to regenerate this issue on the iPad/iPhone. Although, there was a different bug in 0.4 which had some links not activating when clicked within the slider. I have released a newer version (0.5) which resolves that particular issue. Download 0.5 and try it out and let me know if it fixes your issue as well: iosSlider 0.5 (beta).
Once I have the iPhone/iPad working to my satisfaction, I will move to Android dev. But for now it will have to stay unsupported :(.
Hi Marcus,
Thanks for the reply! The problem was that the click was not being propagated and so it was ok with version 0.5.
The slider would be perfect if it could compute the horizontal length of the items and stop moving them when there’s no need too. For example, if I have only 3 items in my menu, and each one is 70px width (total 210px), and my slider is 300px, then I would like the slide effect to be removed completely when I touch the items (the slide effect only makes sense if there are hidden entries in the menu).
The menu entries are fetched from a database and I don’t know how many there are statically.
Thanks!
Greg
I think I understand what you are saying… So deactivate the slider if the width of the contents are less than that of the slider? I think that’s an awesome idea!
Update: Fixed in 0.7.1 (beta). Thanks for spotting that one :)
Wow, that was quick! Thank you! :)
Hi,
Great plugin, thanks! However, I would like to have the slides to snap only to the next one and never bounce back to current, if not slid far enough. I have tried with different settings, but nothing seems to affect it. I’m going through the code now to find the place where it checks the slide’s position and decided to bounce back to the current one, but I would appreciate if you can point me to the right direction.
Also having it as an option in the future would be great.
–patrik
Hi Patrik,
iosSlider 0.7 (beta) contains this functionality. When the option ‘snapToChildren’ is set to true, slides will always move to the next/previous item on slide unless the momentum is extremely low. Thanks again trying out iosSlider!
Hi,
great work.
How far are the controls for normal web browsing. Like for blackberry.
hi, im currently using your slider in a mobile website and have found a bug. if you are at the very right of the scroller and try to scroll left again but do it too fast and drag your finger off the edge of the screen the scroller bounces off the right edge and back to where is was. this is slightly difficult to replicate on an iphone but can be done. however it is very noticable on android, which is why i would like a fix. any ideas?
also the scroller performs very poorly on android browsers. i dont understand why seen as it is the same web browser so this must be a bug aswel. i no its not billed as a cross platform component but it would be a good feature.
my current settings are;
Hi Tom,
The bug you found has been resolved in iosSlider 0.7 beta. Also, I have noted the issues with android browsers and can only offer you a frowny face [:(… but I can say that I will be fully optimizing the Android version once I release the 100% working iOS version. Thanks again for using iosSlider!
i’m glad to see you have now fixed the issue. i will download and try the new version asap. as far as i can tell the slider works quite well on android apart from the one issue i reported. so maybe not too much optimization will be required.
Hi Marcus,
I am currently trying to put a link in the slider, but it doesn’t work. The iOS slider only shows up when you’re using an iPad, iPod or iPhone, so I hope you own one of these.
Do you have any idea why it wont work? I really need this since I’m loading the contents via jQuery (via the <a> relation).
The URL is: http://bit.ly/s98TP9
Hope you can help me out!
Kind regards, Robin.
Good news, I have a fix for your issue! :D
Here is a copy of iosSlider 0.5 (beta) with a the fix applied to resolve the issue you are experiencing.
Thanks again for using iosSlider! It’s still in beta so let me know if you come across any other issues.
Hi Marcus,
Thanks for this!! I really needed this. Hope it doesn’t cause any other bugs since it’s a beta version.
Thanks for your work, appreciate this!
Greetings from holland :) Robin
No problem! Thanks for finding the bug for me. :)
Send over a link to the page once it’s all styled and polished, I would love to see the finished product!
This is the coolest JS on the web right now!
We just spent 1 hour searching around and testing different systems, and this one is by far the best. We definitely want all the features above, and the ability to double-tap to open a new page.
Thank you for building this fantastic Mobile JS.
Now for special request:
Can you create an elasticity to the dragging, so as to separate the strip of objects to independent object motion. For example, please think of a Newton’s Cradle, but with elastic and time variables.
What do you think?
Coolest JS on the web?! Well, thanks! I think the iPad/iPhone web stuff is so heavily overlooked right now it’s ridiculous.
I love the double tap idea for links within the slider… I’ll add that to the list of features coming to future releases! :D. As for the second idea, I COULD create that with some decent sized modifications to this script. It would be an interesting implementation, but sort of outside the scope of this project I think :S.
I am a gun for hire though, so if you need that specific thing done real bad, send an email to contact@marcwhitbread.com.
hi,
i really like your Script (there are not many sliders around which do not need jqtouch or jqm).
But I am having a problem with dynamic width. I am trying to use it so that the images use the complete width of the device (no matter what resolution the device has) but I did not have much success with it.
Can you give me some help.
Thanks in advance
Hi Florian,
This is a good example. I will definitely include the dynamic width slider as a coded example in an upcoming release. Here is what you need to do… Within the document.ready function – above the iosSlider trigger – you need to add the following code:
$(document).ready(function() { /* set the width of the iosSlider container to be the window width */ $('.iosSlider').css({ width: $(window).width() + 'px' }); /* set the width of the iosSlider slides to be the window width */ $('.iosSlider .slide').css({ width: $(window).width() + 'px' }); /* launch iosSlider */ $('.iosSlider').iosSlider(); });Please let me know if you have any additional questions, and I’ll do my best to help you out. Thanks again for using iosSlider! :D
Thanks for the hint,
I will check how to detext landscape/portrait switching, then I will include it that way.
I am taking feature requests! Feel free to pass along any functionality that you would like to see in upcoming releases! :D
another nice to have would be setting the index of the starting image so you don’t have to start with the first.
here’s a workaround:
$('.slider').css({ webkitTransform: 'translateX(-' + (newIndex*$(window).width()) + 'px)' });(where newIndex is the index of the image you want to scroll to)
You’re definitely on the right track with that code. You aren’t accounting for variable sized slides though, but this would be easy to implement none the less. I’ll add it to my long list of to-do’s! Thanks :D
Nice features to have:
- As already discussed: 100% width, including changing from landscape to portrait and back.
- Some control buttons (next image, prev image). I know swipe should replace that, but it would be nice to have that as a fallback or to trigger a swipe with a link..
- Loop: I do not know how it should work but a loop so that after the last image the first image is displayed.
Oddly enough, the looping and the controls are already on their way. The portrait/landscape switching and the 100% width functionality are great ideas! I will add them to the list of new functionality.