Slick – Carousel | Hacker News Reader

Slick – Carousel

kenwheeler.github.io

279 pointsca98am79112 comments

I don't wish to engage in standard HN negativity, but I'd like to suggest that you should probably don't want to use a carousel at all most of the time.

From the user's perspective, a carousel is just a random image. You'll get more conversions if you choose the best image instead of a random one.

http://www.bayesianwitch.com/blog/2014/carouselsarebadforcon...

Carousel's have uses outside of image viewers. For example, every mobile application is essentially a bunch of views in a carousel.

The views in mobile apps are typically organized as a tree instead of a circle and require user interaction to move between them instead of cycling themselves. I wouldn't call them carousels any more than I'd call gmail a carousel because you move between views of different messages.

While I agree with you in terms of adding important or lengthy content to a carousel, there are times when using one is the best way to do it.

Product recommendations on e-commerce sites, Alternate images of products, galleries on mobile, etc...

Plus, good UX or not, I haven't had a design hit my DropBox in over 5 years that hasn't had a carousel in it. So if you have to use one, use this one.

Carousels have their place, but I agree, not on a conversion page. Also, never create a carousel that randomly shuffles between images. If an image is worth showing, show it and let the visitor see it without changing it half way through. The number of time's I've thought 'oh, that looks interesting' only for the interesting thing to disappear... bad idea.

I honestly can't think of an instance where a carousel is the best UI element to use, yet everyone requests them. Why?

Internal Department Head You Can't Say No To: "We need our campaign on the front page next month."

Website Manager: "Okay, we'll put you in the carousel."

Not enough upvotes in the world.

Because UI concerns don't always (or even usually) drive requirements.

I think it's safe to say they're pretty useful for artists and photographers to show collections of their work.

edgecase

Any collection of work for that matter, such as product page that has multiple images.

I think a page of thumbnails or the images themselves is still better.

I have a carousel on my product page and I treat it like an image. I think it works pretty well. When someone clicks on it, I'll show the next image and people actually click through to browse the other images.

http://www.wellingtonstravel.com

I built mine myself but the slick carousel looks pretty good!

Clients/bosses love them and to them they ARE the best UI element to use. I've had this discussion with hundreds of clients and they just won't budge -- they want a carousel, make it so.

They are the "best" for the people or companies featured in the carousel, NOT the users of the carousels.

Exactly. The carousels on The Verge and Polygon are just awful. The only good implementation of a carousel on mobile (in my experience) is the one on GSMArena, which has large prev/next buttons.

I actually like the carousel on the mobile app if that's what you're talking about. I know it's the top stories, but yeah it hides the other stories if you didn't know about swiping.

It could be that the swipe is more reliable in the app, but on the mobile website, it's not. Sometimes my swipe is ignored and sometimes I even accidentally activate the link of the current item in the carousel. #annoying

They're an absolute boon to Web designers where different stakeholders in the client organisation can't make up their bloody minds. There comes a snapping point where a carousel is suggested to avoid insanity.

Indeed. It's an organizational relief valve that doesn't rock the boat much from a UI or product perspective. This is less of a problem at a small company, but a big problem at large companies. Standardizing the creative unit also makes it much easier to manage, and can be changed quickly by a semi-technical person if they are given a tool.

Photographers displaying pictures that don't want to lose vertical space is clearly one.

In our website we use it for instructional photo succession, I think it works pretty good, I'm open to suggestions (other than videos) to other UI elements that would work better for that that purpose.

http://getfinn.com/#instructions

I have never seen your product before, and those four images give me a very clear sense of how it works. I would much rather click through a series of images like this than play a video, even if the video is short.

Good to hear! Thanks for the feedback. I've had to fight against carousels several times, since they sometimes want to be used as a way to save space and fit more information, that's clearly bad UI but I certainly think that there are several cases in which they have their place.

How about text ads?

Because handling internal politics at BigCos can be very difficult. Also, for many departments, the way they are judged on success can differ from other departments doing similar activities.

If you want to see a really horrible example of that kind of politics getting in the way of customers and users - SearsCo

what about this one : https://www.joingrouper.com/

It's an easy way to display multiple photographs in a gallery/portfolio. They can be used for the main images or thumbnails.

I use them on my site for each product's outfits, because it was the only way to always see the outfits next to the original products rather than scrolling down and seeing the outfits out of context. I can't think of a better way to achieve this, what do you think? whatgoestiththis.co is the site and click on any product to see.

The maths looks wrong; the distribution of clicks is only relevant if the total number of clicks stays the same.

Essentially a carousel gives you a "second-bite" at your customer, i.e. the second image is a chance to convert those customers who haven't already been converted by the first image.

Imagine you have two images one which converts at 40% and one which converts at 20% - but each image converts completely different groups; by carouseling the images you could end up with 40%+20% conversion.

In practice you won't because of overlaps, drop-off from people who never see the second image, etc. but it's definitely possible to exceed the maximum conversion of an individual image.

(obviously you should A/B test for your circumstances)

Sure, anything could happen. As Shana says:

It is totally possible that there are edge cases where we are wrong. While we’ve personally performed split tests between carousels and their elements and always came up with an individual slide (rather than the whole carousel) as the highest revenue generating source, it is possible that there will be some cases where a carousel is better for conversions.

To go with your example, assuming each group has 50%, it's still tough. The actual conversion rate of the carousel in your example will be T x 60% + (1-T) x 30%, where T is the fraction of users who actually wait for the second image. Some simple algebra suggests that for this to exceed 40%, you'll need T > 1/3.

The problem with your calculation it assumes that people who are likely to get converted by the first image wait around for the second image and get "unconverted".

A good intuitive way to think about it is this: if you're only showing the second carousel image to people who the first image failed to convert then there's zero down-side.

In practice there are some users who would convert if shown the first image for longer who you'll lose by rotating to another image, but that's what you need to measure to decide if it's worth having a carousel.

the downside is they may bounce instead of waring out the time.

30% is avg of 20% and 40%. Its the conversion rate of a random person who doesn't stick around long enough to see the second image.

I don't think we really disagree - you should test the carousel, and cases where it wins will be edge cases usually.

This assumes one important problem that sees to not be common - that the person viewing the carousel will stick around long enough to view the next choice (or all the choices)

In an ideal world, what you should do instead is parametric optimization of some sort instead of a carousel - so you can hit that other 20%

You can get the same set of bites faster and more effectively by simply placing both images directly onto the page. This is why Amazon Kindle and Apple product pages tend to be so tall. People can scroll a lot faster than they can wait for a carousel to go through.

This.

I've personally never seen carousels out-perform alternatives like having multiple images on the page, or multiple landing pages with separate messaging, or just dropping multiple options for the one that's most important.

I'm sure that there are some cases where they're an effective option - but I've yet to come across one in testing.

As Brad Frost once observed "Carousels exist to keep people from beating the shit out of each other in meetings." - https://twitter.com/karenmcgrane/status/316563205294010370

And sometimes "people" is just the different people in your head who want to talk about ALL THE THINGS - when talking about just the most important one is what you really need to do.

I have A/B tested carousels extensively at my previous job. What I found was that even after a user interacted with the controls, meaning they specifically chose to see subsequent slides, they still clicked the first slide at nearly the same rate as those who never interacted at all (tested with auto slide on and off and variations of the carousels). Intrigued by the finding, I started doing different sorts of the slides (random, most recently added, oldest, etc.) and found no statistical difference. I never had time to figure out why, though, as I took a new position somewhere else. I have a strong suspicion that users see first as most important, though.

Highly relevant: http://shouldiuseacarousel.com/

That is especially effective when you get towards the last few slides and it auto-switches before you are done reading.

Add'l data on how carousels don't convert.

"Don’t Use Automatic Image Sliders or Carousels, Ignore the Fad" http://conversionxl.com/dont-use-automatic-image-sliders-or-...

I agree for the most part. I guess the Airbnb landing page is an obvious counterexample. I'm confident that they A/B tested it to death. In that particular case the transitions are very subtle and don't detract from the CTA (even though it's in the middle of the carousel images). The images themselves serve the purpose of "showing, not telling" what the product is.

Not everybody is concerned about "conversions".

If I'd get to redo the public website of our research institute, I'd add a carousel, because it looks cool and modern, and it allows you to showcase the work of different people without favoring one person by giving them the "best space".

And even if you have something to sell, it might be valuable to "wow" your potential customer, and to give them the impression that you are "cool" and "modern" and "state of the art" and have moving pictures of happy pretty professionals on your site.

Or, it might be better to have a big "BUY" or "DOWNLOAD" button in that space.

You can't generally say what's better for all use cases IMHO. You got to understand your visitors/customers, do testing if you can afford it, and so on.

Also, the main reason why carousels suck in my opinion, the bad usability (no touch, unclear if clicking moves to the next picture or opens another page, not clear how to move to other pictures) seems to be fixed nicely buy this script.

I used to volunteer with my local college club. During that time, the school won a webby.

Probably one of the most undisclosed facts about the schools website: beyond students using it, they probably tested the hell out of "does it drive donations"

Even nonprofits* have conversions to worry about - they take in donor and grant money. Making sure the site is clear in order to do so is way more important than cool

*I can actually name a few nonprofits that do not have this model, but thats because they are secretly for profits if you look through their budgets. They tend to exist in sectors providing services on behalf of the federal government to say the disabled. They don't need to worry about conversions.

links to show?

It depends on what you are using the carousel for.

For example if you are showing let say showing a set of different products, carousel is a bad choice. Because it is dependent on interaction by user or the possibility the user stays on the page long enough for carousal to change image.

But if you are on the product page and viewing different angles of the same product. The bigger the image better the conversion. In this case we have found carousal can help. You still can not use carousal without thumbnails. Thumbnails create 3 times more interaction compared to Carousal. So to summarize for us at Bryght following is true.

Carousal Only < Thumbnails Only < Both Carousal + Thumbnails

Here is the example of product page we are currently experimenting:

http://www.bryght.com/product/854/long-island-brown-leather-...

As long as the carousel doesn't auto-rotate, I could see a carousel + thumbnails working very well for a product gallery. The example on your site does it well.

I use a carousel to display a list of current games on a fantasy sports website and this script looks better than what we're currently using!

Carousels as a component are useful for a lot more than just homepage slideshows :)

I know "progressive enhancement" is a little passé at this point (at least as far as the HN crowd seems concerned), but the flash of unstyled content (before javascript loads) is really ugly. (Try disabling javascript and see how the unloaded carousels take up a ton of vertical space).

The script says it uses CSS3 when available, so I wonder if the markup can also be structured to be styled when the page loads, instead of when javascript loads. (I've done this before with my own carousel -- everything is set up with CSS, and javascript is only used to make the left/right arrows function).

Yes. There is a .slick-intialized class that you can bounce off of. So element {visibility:hidden} .slick-initialized element { visibility: visible }

You can usually easily fix this by using CSS to display none everything but the first slide. So it gracefully falls back.

Aside from the great work on the carousel, I'm perhaps more impressed by @thekenwheeler digging into all the comment responses on the page and all the comments on HN (including feature pushes based on comments). Makes me much more inclined to use it given the right use case.

If you have an issue, just let me know. I typically have a < 24h turnaround.

Very good work. Even before seeing it, I've already made my mind. I'd always use a carousel from a guy called Wheeler!

This is really nice. I have used a few other carousel's before but could never get the multiple-slides-responsive thing to work right. Very cool way to solve that problem.

Using my mouse, I tend not to flick like I would on a touch screen. I press down the mouse anywhere in your carousel, and drag it to the side. If the mouse exits the bounds of the carousel, it flicks back to its original position, even if I start completely on the left-hand-side and drag off the right-hand-side. I would want it to move to the next element.

I took the mouse leaving the slider bounds as a cancel. So you are saying that if you drag outside of the slider area, that the slide should still progress as long as the minimum swipe tolerance has been achieved?

Just pushed a commit for this. You got your wish :)

Testing it out as a user, the slide transitions didn't feel as responsive to swipe velocity as I expected. In particular, if I swipe even a small distance but quickly, I expect to trigger the transition. I just tested it with iOS and Android, and they both seem to do it at least for left-to-right transitions of home screen pages, and Android does it for the top menu.

From looking at [the source](https://github.com/kenwheeler/slick/blob/master/slick/slick....), it doesn't seem check for velocity; it just applies a distance threshold. Have you considered having the threshold respond to swipe speed so that faster swipes over shorter distances trigger transitions?

I actually tried it when first writing it, and that kind of sucked. If you nipped it, it would go super slow, and if you swiped fast, it basically blinked into place. I might revisit this at some point where I round off the translated values a little bit.

Honestly, swiping with a mouse on a desktop is really grueling. I think in cases where you don't just not show the swipe control at all when off mobile, you should at least show some next/prev buttons to click on, or placeholder dots along the bottom.

agreed

I really like this - I have played with FlexSlider when a responsive slider is needed, but it doesn't resize its slides as its containing element resizes. This does it in a much more elegant manner, and the touch events also feel quite natural.

Yeah, looks better than the lot. Swipe.js, Slides.js, ResponsiveSlides.

It looks to me like pinch/zoom doesn't work. Not a big deal, but I wouldn't call it perfect until it's flawless on a tablet and phone.

What do you mean pinch/zoom?

The page itself (not the slider), sets a fixed viewport, which means that a user cannot pinch/zoom the page on a tablet/phone.

Here is the code:

  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">

Removing that little "user-scalable=0" should fix it, as being able to zoom in on a page is a nice feature, and shouldn't be disabled unless there is a really good reason.

Well that's not a plugin problem, thats a demo page problem. And I typically disable that when there is responsive/mobile formatting in place

I dunno, I want to see it work for real. It's whoever wrote the demos fault really. Throw some integration tests up and drive it through its paces. I bet you there's more missing areas.

You aren't getting this are you? The carousel doesn't have anything to do with pinch or zoom. If you put it on your site, boom , pinch and zoom your face off. I chose to disable pinch and zoom on MY demo website, because it is already formatted for mobile.

Makes sense - I should have looked more closely. I was checking it out on a tablet since that's where I'm most interested in these controls. I should mention that the swipe behavior of this one is nicer than most, and so I'll definitely be trying it out at some point. I might make a few modifications to better deal with phones, but that's about it.

Awesome! Ive been looking for to a lib to replace FlexSlider. That lib just has too many weird edge bugs. Ill give this a shot on exhibitionnest.com

I know Firefox isn't the 'hip' browser chrome is these days, but the responsive styles are completely broken in Firefox and IE.

Pretty amateurish.

Works in my firefox, ie9 & ie8

Make the window small. 'works' isn't the same as 'awkwardly falls off the side of the page when the window is small'.

It's fine on chrome.

(at least, that's what I see on my imac and laptop).

Could be wrong but it sounds like you're encountering the Firefox bug with window resizing - Mozilla introduced the Ctrl-Shift-M feature specifically to workaround this issue.

If so it's not an issue with this JS library.

I would like to see one implemented as Web Component instead of the usual jQuery-function-with-configuration-options:

    $('.multiple-items').slick({
      infinite: false,
      slidesToShow: 3,
      slidesToScroll: 3
    });

You're always into a world of pain trying to customize these things besides what is available as a configuration option.

You mean like using data attributes? Or like a polymer or angular directive? Not sure specifying responsive option sets would be easier.

I mean an implementation using shadow DOM. It might even expose some customization options as attributes, but it would be easier to fork & customize than the usual jQuery mess by definition.

Let me see what I can do. It would have to be a custom fork, because that's pretty edge. I'll give it a shot after I finish the angular directive and wp plugin.

I don't understand what is the purpose of a carousel in a website beyond delay the load time and showing just random picture annoyingly that are just ignored most of the time. IMHO, is just better to put the image that give more impact related to the business persona and the website aesthetic overrall.

The best use of carousel I recently saw was applied on a form http://tympanus.net/codrops/2014/04/01/minimal-form-interfac...

Is it just me or do all the code boxes have the text the same color as the background?

They do in Firefox. in Chrome they look correct.

Thats your adblock blocking the highlight.js cdn

Ah, that explains it, thanks.

Ah, yep, Disconnect blocks Yandex.

I'm on Chrome.

I just updated to cdnjs so when the cache clears out I'm assuming this won't happen anymore

Currently using this one: http://www.idangero.us/sliders/swiper/

Don't really see anything listed that would make me want to change...

This is great. Building in the responsiveness is especially nice -- having to build in that type of support in a third party library is a big pain, so it's great to have that outside of the box.

When I checked on this a week or two ago there were no methods or callbacks. Glad to see it's being added to very actively. Might replace OwlCarousel for me.

Sorry for the OT, but is there anything like this for user profile forms? A ready made CSS with placeholders for picture, name, surname, etc?

Thats a great idea. Maybe I'll whip it up.

Part of the joy of carousel selection is giving otherwise useless stakeholders a feeling of productivity. There can be no last carousel!

> the last carousel you'll ever need

> (requires jQuery 1.7 +)

yeah... no.

if you really want to deliver on that claim then make it a vanilla JS component.

Looks nicer than bxslider.

I've been using bx exclusively for these, but the features of this is well worth the switch it seems.

Seems great, just the arrow buttons are so small (hard to click)

This is really slick! (pun definitely intended ;))

This is clearly one of the best, or the best carousel out there right now, but I have a feeling soon everyone is going to have a Slick carousel on their bootstrap site.

Really Nice work, Thanks for sharing!

What license is it?

Its a dual MIT/GPL. But I wrote it. So do whatever you want with it. I mean that.

This is great.

It's using jQuery, so no. It'll not be the last one I'll ever need.

Have you ever used a carousel on a site where you didn't use jQuery? Would you prefer the size of this library triples? Do you think any one man has the time to keep up with the kind of event normalization and browser shimming that jQuery provides?

* Yes. * I don't really care * Irrelevant.

Just sayin'. With angular.js you have absolutely no need to include jQuery as well. Therefore, the tagline will probably hold up until jQuery gets overtaken by Angular.

I'm working on an angular directive

jQuery will never get 'overtaken' by Angular. They are two totally different things. The day $ gets 'overtaken' by Angular is the day I hang up my fucking magic trackpad.

bookmarks this post for future reference

Reply on news.ycombinator.com