Slick – Carousel

[yummyfajitas]

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...

[captainmuon]

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.

[mbesto]

Highly relevant: http://shouldiuseacarousel.com/

[ig1]

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)

[webwright]

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-...

[thekenwheeler]

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.

[psychometry]

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

[adrianoconnor]

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.

[47]

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-...

[Touche]

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

[err4nt]

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 :)

[vassvdm]

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.

[Smudge]

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).

[thekenwheeler]

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

[dubcanada]

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

[sailfast]

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.

[thekenwheeler]

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

[neves]

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

[coreymgilmore]

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.

[stickydink]

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.

[cairo140]

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?

[lnanek2]

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.

[thekenwheeler]

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.

[lancer383]

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.

[hiphopyo]

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

[rch]

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.

[thekenwheeler]

What do you mean pinch/zoom?

[mkoryak]

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

[shadowmint]

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.

[thekenwheeler]

Works in my firefox, ie9 & ie8

[hcarvalhoalves]

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.

[thekenwheeler]

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

[jbeja]

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.

[capex]

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

[Zikes]

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

[thekenwheeler]

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

[Touche]

They do in Firefox. in Chrome they look correct.

[lnanek2]

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

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

[kwang88]

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.

[wfendler]

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.

[atmosx]

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?

[thekenwheeler]

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

[lwh]

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