
Slick – Carousel - ca98am79
http://kenwheeler.github.io/slick/
======
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...](http://www.bayesianwitch.com/blog/2014/carouselsarebadforconversions.html)

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

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

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

~~~
taigeair
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](http://www.wellingtonstravel.com)

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

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

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

~~~
thekenwheeler
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?

------
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....](https://github.com/kenwheeler/slick/blob/master/slick/slick.js#L1185)),
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
agreed

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

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

~~~
thekenwheeler
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

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

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

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

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

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

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

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

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

------
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...](http://tympanus.net/codrops/2014/04/01/minimal-form-interface/)

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

~~~
Touche
They do in Firefox. in Chrome they look correct.

~~~
thekenwheeler
Thats your adblock blocking the highlight.js cdn

~~~
Touche
Ah, yep, Disconnect blocks Yandex.

------
lnanek2
Currently using this one:
[http://www.idangero.us/sliders/swiper/](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!

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

------
thejosh
Looks nicer than bxslider.

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

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

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

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

------
maddisc2
Really Nice work, Thanks for sharing!

------
usaphp
What license is it?

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

------
wehadfun
This is great.

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

~~~
thekenwheeler
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?

~~~
SchizoDuckie
* 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.

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

~~~
SchizoDuckie
_bookmarks this post for future reference_

