UPDATE: I have released this script as a plugin – Slider With Variable Elements Widths
I have been struggling to find right image carousel built on top of jQuery. Trend with these kinds of plugins is to have as many features as possible but somehow I wasn’t able to find the one I needed. I was looking for scrolling with different image widths.
I am on my own now. I am looking for simplest solution possible which I am to build on my own.
Step 1: HTML/CSS only
As a starting point I use simple DIV element with overflow:auto parameter. You can view live Example 1 as well. Sample code structure will look like this:
<div>
<ul>
<li><img src="../public/img/image1.jpg" height="150" alt=""></li>
.
.
n
</ul>
</div>
<style type="text/css" media="screen">
.carousel ul { overflow:auto; white-space:nowrap; margin:0; padding:0; list-style:none; }
.carousel li { display:inline-block; }
</style>
Step 2: Let’s add some JavaScript
Well we have simplest carousel possible but perhaps we don’t won’t it to be that simple. Let’s add few simple controls for scrolling to next and previous page as seen in Example 2. Hide that ugly scrollbar by setting overflow:hidden. The controls will simply scroll the view by one width of carousel.
By adding some more functionality we accomplish scrolling by one image. The trick is simple. Just find first positive position of all the elements inside the list and scroll to it’s position. Getting backwards is the same. Find last negative position. That’s it. We don’t need to forget to set position:relative to list. Reason, we don’t want to get offsets of our elements counted from the top left corner of the whole page. See Example 3 for demonstration.
Step 3: Make it prettier
Unfortunately there’s one problem with our current solution. When scrolling by one page forward or backwards, sometimes (a lot) your images end up cut. One solution would be to scroll by one image forward/backwards but we want something more usable.
I decided to drop our current scroll-by-one-page script and clone one for scroll-by-one-image script and adjust it a little. Instead of finding next/previous image I grab carousel’s width and find last visible (and possibly cut) element.
Demo
Take look at live Examle 4 with source code included.
Awesome! Just what I was looking for. Thanks very much for your hard work!
Anyway of having this and having it auto loop like simply scroll?
Great work… That is some nice coding. Most carousels throw a major error when working with items of varying size so thanks again!
The script does not seem to work in IE 7. Any comments about that?
Hi @Angelos, I have updated the script as a plugin. I haven’t been testing it in IE though. I will check that out ASAP and let you know.
Thanks for the feedback.
Thanks so much for this – was looking for something to cope with images of various widths – and this worked perfectly.
One tiny issue – I’m using the slideToLast option. This seems to work fine in FF5 and IE9 – but isn’t working in Chrome (v12). No errors are displayed in the console, it just seems to ignore it. Odd thing is that it clearly works in your examples with Chrome. Have you come across this at all? Any ideas?
Thanks again.
@Ben, I’m glad it works for you.
I came across a case when the last element was pushed below the carousel. The container area wasn’t wide enough. Small CSS hack should fix it.
Another solution that worked for me was to change a line in javascript file:
var originalWidth = 1;
to
var originalWidth = 10; // or greater, which one works for you
That should fix it.
Thank you for your feedback.
This is a great plugin, thank you
Would it be possible for the images to display as a carousel so that once you’ve reached the last image it carries onto the first image rather than slide back to the first?
Thanks
Unfortunately this does not work in IE7 :-( Is there any progress on that?
@Rody: There is some progress; I have fixed the IE issue and added some more functionality;
Hopefully v0.2 will be released some time next week. Thanks for your input.
@Laura: It is possible. Do you men an Infinite Carousel? I am thinking about adding this feature to v0.2.
any info when IE7 fix will be ready :) ?
changing property of li items from ‘inline-block’ , to ‘inline’ (ie < 8 doesnt support inline-block ) works more or less fine. Adding vertical-align: middle should help carousel to deal with variable width and height img dimensions.
Greets
Thanks all for their inputs. I have just released v0.2 of Lemmon Slider here:
http://jquery.lemmonjuice.com/plugins/slider-variable-widths.php
fixed:
- IE6, IE7 issues
- added destroy method
- added infinity
- better documentation
Hey dude, awesome plugin. Just a few things:
I’ve been trying to figure out how to stop the autoscroll when you’re hovering over the carousel. I’m not that good with javascript, so I’m still working on it. If I find anything I’ll post back here.
Also, it just stops working altogether after running for awhile. Again, I’ll try to see what I can do.
Well, it’s a bit of a hackjob, but I added this function:
$(‘#slider1′).hover(
function() { $(this).addClass(‘hover’); },
function() { $(this).removeClass(‘hover’); }
);
Then here’s my sliderAutoloop function:
function sliderAutoplay(){
if ($(‘.hover’).length == 0 ){
$( ‘#slider1′ ).trigger( ‘nextSlide’ );
}
setTimeout( sliderAutoplay, 3000 );
}
Hi John,
I have updated the code for Slider Autoplay at (http://jquery.lemmonjuice.com/plugins/slider-variable-widths.php). There is now a function for pausing the loop.
About the browser issues. I found the same problem when using Chrome (slider sometimes pauses after some time). But sometimes just resumes as nothing happened. I am not sure what is the issue there. In Firefox everything works just fine.
Thank you for your input.
Love this plugin. Thanks for sharing.
How is it possible to click on a slide and make it active? I thought adding the active class would suffice, but It doesn’t I am unable to figure this out, anyone..?
I found out how to fix it.
Is this the correct way?
$(“#slider1 ul li a”).click(function(e){
e.preventDefault();
$(‘#slider1 ul li a’).parent().removeClass(‘active’);
$(this).parent().addClass(‘active’);
var url = $(this).attr(‘href’);
var data = ”;
var idx = $(‘li.active’).index();
$(“#slider1″).trigger(“slideTo”, [idx]);
});
Nice job thank you ! Is there a way to do a regular slide movement ?
Hi @nicolas, I am not sure what you mean by “regular slide movement” but be sure to check plugin version of this carousel at http://jquery.lemmonjuice.com/plugins/slider-variable-widths.php , perhaps you will find what you are looking for.