11 ms·
Slick – Carousel
- Zikes 13y agoIs it just me or do all the code boxes have the text the same color as the background?
- Touche 13y agoThey do in Firefox. in Chrome they look correct.
- thekenwheeler 13y agoThats your adblock blocking the highlight.js cdn
- Zikes 13y agoI'm on Chrome.
- thekenwheeler 13y agoI just updated to cdnjs so when the cache clears out I'm assuming this won't happen anymore
- yummyfajitas 13y agoI 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/carouselsarebadforconversions.html http://www.bayesianwitch.com/blog/2014/carouselsarebadforcon...
- Touche 13y agoCarousel's have uses outside of image viewers. For example, every mobile application is essentially a bunch of views in a carousel.
- wlesieutre 13y agoThe 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.
- thekenwheeler 13y agoWhile 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.
- adrianoconnor 13y agoCarousels 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.
- psychometry 13y agoI honestly can't think of an instance where a carousel is the best UI element to use, yet everyone requests them. Why?
- hockley 13y agoInternal 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."
- stickydink 13y agoUsing 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 13y agoI 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?
- thekenwheeler 13y agoJust pushed a commit for this. You got your wish :)
- neves 13y agoVery good work. Even before seeing it, I've already made my mind. I'd always use a carousel from a guy called Wheeler!
- deleted 13y ago[deleted]
- wehadfun 13y agoThis is great.
- deleted 13y ago[deleted]
- thejosh 13y agoLooks nicer than bxslider.
- thoughtpalette 13y agoI've been using bx exclusively for these, but the features of this is well worth the switch it seems.
- kwang88 13y agoThis 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.
- coreymgilmore 13y agoThis 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.
- usaphp 13y agoWhat license is it?
- thekenwheeler 13y agoIts a dual MIT/GPL. But I wrote it. So do whatever you want with it. I mean that.
- SchizoDuckie 13y agoIt's using jQuery, so no. It'll not be the last one I'll ever need.
- thekenwheeler 13y agoHave 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 13y ago* 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 13y agoI'm working on an angular directive
- thekenwheeler 13y agojQuery 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 13y agobookmarks this post for future reference
- rch 13y agoIt 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 13y agoWhat do you mean pinch/zoom?
- lancer383 13y agoThe 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 13y agoWell that's not a plugin problem, thats a demo page problem. And I typically disable that when there is responsive/mobile formatting in place
- ulisesrmzroche 13y agoI 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.
- thekenwheeler 13y agoYou 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.
- cairo140 13y agoTesting 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.js#L1185 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?
- thekenwheeler 13y agoI 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.
- lnanek2 13y agoHonestly, 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 13y agoagreed
- lancer383 13y agoI 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 13y agoYeah, looks better than the lot. Swipe.js, Slides.js, ResponsiveSlides.
- lwh 13y agoPart of the joy of carousel selection is giving otherwise useless stakeholders a feeling of productivity. There can be no last carousel!
- Smudge 13y agoI 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 13y agoYes. There is a .slick-intialized class that you can bounce off of. So element {visibility:hidden} .slick-initialized element { visibility: visible }
- dubcanada 13y agoYou can usually easily fix this by using CSS to display none everything but the first slide. So it gracefully falls back.
- JeremyMorgan 13y agoThis 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.
- jbeja 13y agoI 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.
- lnanek2 13y agoCurrently 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...
- atmosx 13y agoSorry 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 13y agoThats a great idea. Maybe I'll whip it up.
- xwei 13y agoSeems great, just the arrow buttons are so small (hard to click)
- wfendler 13y agoWhen 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.
- hcarvalhoalves 13y agoI 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 13y agoYou mean like using data attributes? Or like a polymer or angular directive? Not sure specifying responsive option sets would be easier.
- hcarvalhoalves 13y agoI 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 13y agoLet 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.
- sailfast 13y agoAside 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 13y agoIf you have an issue, just let me know. I typically have a < 24h turnaround.
- anilmujagic 13y agoThis is really slick! (pun definitely intended ;))
- mkoryak 13y agoAwesome! 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 13y agoI 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 13y agoWorks in my firefox, ie9 & ie8
- shadowmint 13y agoMake 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 13y agoCould 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.
- timme 13y ago> 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.
- maddisc2 13y agoReally Nice work, Thanks for sharing!
- capex 13y agoThe best use of carousel I recently saw was applied on a form http://tympanus.net/codrops/2014/04/01/minimal-form-interface/ http://tympanus.net/codrops/2014/04/01/minimal-form-interfac...