{"id":197316,"date":"2015-03-05T08:56:56","date_gmt":"2015-03-05T15:56:56","guid":{"rendered":"http:\/\/css-tricks.com\/?p=197316"},"modified":"2018-08-07T14:06:34","modified_gmt":"2018-08-07T21:06:34","slug":"creating-responsive-touch-friendly-carousels-with-flickity","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/creating-responsive-touch-friendly-carousels-with-flickity\/","title":{"rendered":"Creating responsive, touch-friendly carousels with Flickity"},"content":{"rendered":"

By now, any article about carousels should come with the disclaimer: You may not need a carousel.<\/em> Carousels are easily abused. Kyle Peatt has more details<\/a> on the carousel controversy.<\/p>\n

Part of the blame can be put on the user experience of carousel plugins themselves. Scrolling through a carousel is less satisfying and more awkward that simply scrolling down a page. Basically, you can’t flick through them. Third-party libraries should at least be as useful as native behavior.<\/p>\n

On top of user-unfriendliness, most carousels plugins have plenty of developer-unfriendly pain points. Because they are configured with JavaScript, it’s often difficult to change the configuration for other breakpoints. These carousel libraries can hinder developers to design responsively.<\/p>\n

<\/p>\n

I’ve created Flickity<\/a> to resolve both these issues. For your users, Flickity’s carousels are fun to flick. Flickity uses physics based animation so dragging and flicking feels natural. For you, Flickity’s carousels are easy to implement. Flickity is designed to be flexible, allowing you to leverage your own CSS to style your carousels responsively.<\/p>\n

Flickity animated example<\/figure>\n

Using Flickity<\/h3>\n

To use Flickity, first add its .css<\/code> and .js<\/code> files to your page or asset pipeline.<\/p>\n

<head>\r\n  <!-- other head stuff... -->\r\n  <link rel=\"stylesheet\" href=\"\/path\/to\/flickity.css\" media=\"screen\">\r\n<\/head>\r\n<body>\r\n  <!-- all your great html... -->\r\n  <script src=\"\/path\/to\/flickity.pkgd.min.js\"><\/script>\r\n<\/body><\/code><\/pre>\n
Flickity works on a container carousel or gallery element with a group of cell elements.<\/p>\n
<div class=\"main-gallery\">\r\n  <div class=\"gallery-cell\">...<\/div>\r\n  <div class=\"gallery-cell\">...<\/div>\r\n  <div class=\"gallery-cell\">...<\/div>\r\n  ...\r\n<\/div><\/code><\/pre>\n
You can initialize Flickity in several ways. You can use Flickity as a jQuery plugin: $('selector').flickity()<\/code>.<\/p>\n
$('.main-gallery').flickity({\r\n  \/\/ options\r\n  cellAlign: 'left',\r\n  contain: true\r\n});<\/code><\/pre>\n
You can use Flickity with vanilla JS:<\/p>\n
var flkty = new Flickity( '.main-gallery', {\r\n  \/\/ options\r\n  cellAlign: 'left',\r\n  contain: true\r\n});<\/code><\/pre>\n
You can conveniently initialize Flickity in HTML, without writing any JavaScript. Add js-flickity<\/code> to the class of the gallery element. Options can be set with a data-flickity-options<\/code> attribute in JSON. I recommending initializing with HTML if you’re not adding additional behavior with JS.<\/p>\n
<div class=\"main-gallery js-flickity\"\r\n  data-flickity-options='{ \"cellAlign\": \"left\", \"contain\": true }'><\/code><\/pre>\n
Styling Flickity<\/h3>\n
You can size and style cells however you like with your own CSS. Flickity provides a container element so that cell elements can be sized with percentage widths — no sizing configuration in JS, just normal %<\/code> values that you’re used to. The height of the gallery is set to the maximum height of the cells.<\/p>\n
See the Pen Flickity – full-width cells<\/a> by David DeSandro (@desandro<\/a>) on CodePen<\/a>.<\/p>\n
(Because the embedded Pens are in iframe<\/code>s, you won’t be able to drag outside of the demo window. But, it’s cool — dragging works on normal pages.)<\/p>\n
Because cells are sized and styled with CSS, you can use media queries to show different number of cells for different breakpoints. Try resizing this media query Pen<\/a> to see it in action.<\/p>\n
\/* full width cells by default *\/\r\n.gallery-cell {\r\n  width: 100%;\r\n}\r\n\r\n@media screen and ( min-width: 768px ) {\r\n  \/* half-width cells for larger devices *\/\r\n  .gallery-cell { width: 50%; }\r\n}<\/code><\/pre>\n
Even the previous & next buttons and the page dots are styleable.<\/p>\n
See the Pen Flickity – custom prev\/next button & page dot style<\/a> by David DeSandro (@desandro<\/a>) on CodePen<\/a>.<\/p>\n
Flickity adds a is-selected<\/code> class to the selected cell.<\/p>\n
See the Pen Flickity – is-selected class<\/a> by David DeSandro (@desandro<\/a>) on CodePen<\/a>.<\/p>\n
You can use the is-selected<\/code> class to make for some impressive transitions. This image gallery dims and blurs adjacent cells. Images are centered within cells with flexible-box CSS.<\/p>\n
See the Pen Flickity – image gallery with selected style<\/a> by David DeSandro (@desandro<\/a>) on CodePen<\/a>.<\/p>\n
That’s all there is to it. Flickity creates touch-friendly, flickable carousels that are easily styled with CSS. Everything else is fine-tuning your implementation to suit your vision..<\/p>\n
Flickity options<\/h3>\n
Flickity has a several more nice features enabled with its options<\/a>. Here’s a couple of my favorite.<\/p>\n
wrapAround: true<\/code> wraps cells around to the other end, so you can keep flicking without hitting an end.<\/p>\n
See the Pen Flickity – wrapAround<\/a> by David DeSandro (@desandro<\/a>) on CodePen<\/a>.<\/p>\n
freeScroll: true<\/code> enables cells to be freely scrolled and flicked without aligning cells to an end position. Give this one a good flick!<\/p>\n
See the Pen Flickity – freeScroll<\/a> by David DeSandro (@desandro<\/a>) on CodePen<\/a>.<\/p>\n
Combine enabling freeScroll<\/code> and wrapAround<\/code> and it feels like you can flick it forever man.<\/p>\n
See the Pen Flickity – freeScroll, wrapAround<\/a> by David DeSandro (@desandro<\/a>) on CodePen<\/a>.<\/p>\n
You can design layouts where Flickity is enabled for some breakpoints, but disabled for others. With watchCSS: true<\/code>, Flickity watches the content of :after<\/code> of the gallery element. Flickity is enabled if :after<\/code> content is ‘flickity<\/code>‘. <\/p>\n
\/* enable Flickity by default *\/\r\n.gallery:after {\r\n  content: 'flickity';\r\n  display: none; \/* hide :after *\/\r\n}\r\n\r\n@media screen and ( min-width: 768px ) {\r\n  \/* disable Flickity for large devices *\/\r\n  .gallery:after {\r\n    content: '';\r\n  }\r\n}<\/code><\/pre>\n
Try resizing the watchCSS<\/code> Pen<\/a> to see it in action.<\/p>\n
This is a pretty cool feature as it saves you from writing hacky JavaScript on window resize. As enabling is triggered with CSS, it keeps your media query logic all in one place.<\/p>\n
In addition to options, Flickity has a full-featured API<\/a>, with useful methods, properties and events. Flickity’s API allows you to build upon its base functionality so can be used in combination with other widgets and behaviors in your site.<\/p>\n
\n
True, you may not need not a carousel. But if you do, you should use one that both helps your users and helps yourself. Flickity is easy to implement and flexible to work with. Using Flickity allows you to create carousels, galleries, and sliders that fit in seamlessly with your designs. I hope Flickity empowers developers to utilize carousels to create compelling user experiences. If nothing else, flicking them is pretty fun.<\/p>\n","protected":false},"excerpt":{"rendered":"
By now, any article about carousels should come with the disclaimer: You may not need a carousel. Carousels are easily abused. Kyle Peatt has more details on the carousel controversy. Part of the blame can be put on the user experience of carousel plugins themselves. Scrolling through a carousel is less satisfying and more awkward […]<\/p>\n","protected":false},"author":248326,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":[]},"categories":[4],"tags":[930,1460],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":300964,"url":"https:\/\/css-tricks.com\/css-only-carousel\/","url_meta":{"origin":197316,"position":0},"title":"CSS-Only Carousel","date":"January 10, 2020","format":false,"excerpt":"It's kind of amazing how far HTML and CSS will take you when building a carousel\/slideshow. Setting some boxes in a horizontal row with CSS Flexbox is easy.Showing only one box at a time with overflow and making it swipable with overscroll-behavior\u00a0is easy.You can make the \"slides\" line up nicely\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/12\/carousel-slides.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":335385,"url":"https:\/\/css-tricks.com\/a-super-flexible-css-carousel-enhanced-with-javascript-navigation\/","url_meta":{"origin":197316,"position":1},"title":"A Super Flexible CSS Carousel, Enhanced With JavaScript Navigation","date":"March 5, 2021","format":false,"excerpt":"Not sure about you, but I often wonder how to build a carousel component in such a way that you can easily dump a bunch of items into the component and get a nice working carousel \u2014 one that allows you to scroll smoothly, navigate with the dynamic buttons, and\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/02\/scroll-snap-carousel.gif?fit=900%2C450&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":247145,"url":"https:\/\/css-tricks.com\/carousels-dont-complicated\/","url_meta":{"origin":197316,"position":2},"title":"Carousels Don\u2019t Have to be Complicated","date":"October 28, 2016","format":false,"excerpt":"Over on the MediaTemple blog, I show you how you can make a pretty decent little carousel with just a few lines of code. Here's the entire premise: Every time a carousel is mentioned in a blog post, it\u2019s a requirement to mention that\u2026 say it with me now: You\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":333276,"url":"https:\/\/css-tricks.com\/cancelable-smooth-scrolling\/","url_meta":{"origin":197316,"position":3},"title":"“Cancelable” Smooth Scrolling","date":"February 1, 2021","format":false,"excerpt":"Here's the situation: Your site offers a \"scroll back to top\" button, and you've implemented smooth scrolling. As the page scrolls back to the top, users see something that catches their eye and they want to stop the scrolling, so they do a smidge of a scroll on the mouse\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/09\/scroll-to-top.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":351987,"url":"https:\/\/css-tricks.com\/2021-scroll-survey-report\/","url_meta":{"origin":197316,"position":4},"title":"2021 Scroll Survey Report","date":"September 15, 2021","format":false,"excerpt":"Here's a common thought and question: how do browsers prioritize what they work on? We get little glimpses of it sometimes. We're told to \"star issues\" in bug trackers to signal interest. We're told to get involved in GitHub threads for spec issues. We're told they do read the blog\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/09\/Screen-Shot-2021-09-14-at-3.50.18-PM.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":304193,"url":"https:\/\/css-tricks.com\/creating-a-modal-image-gallery-with-bootstrap-components\/","url_meta":{"origin":197316,"position":5},"title":"Creating a Modal Image Gallery With Bootstrap Components","date":"March 6, 2020","format":false,"excerpt":"Have you ever clicked on an image on a webpage that opens up a larger version of the image with navigation to view other photos? Some folks call it a pop-up. Others call it a lightbox. Bootstrap calls it a modal. I mention Bootstrap because I want to use it\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/02\/bootstrap-modal-carousel.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/197316"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/248326"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=197316"}],"version-history":[{"count":5,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/197316\/revisions"}],"predecessor-version":[{"id":260807,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/197316\/revisions\/260807"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=197316"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=197316"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=197316"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}