Flickity is a JavaScript slider library, built by David DeSandro of Metafizzy fame. It’s optimized for touch gestures, performance, and includes things like physics-based animation. In this tutorial we’ll get it up and running, then examine some extra features it brings to the table. Let’s go!
The Task
Let’s imagine that we've been asked, by a fictitious online learning company, to implement a slider on their website. Currently, they only feature three popular courses on the homepage, but they want to add more to the list and have decided that a slider sounds like a great solution.
Step 1: Get Set
Setting up Flickity is straightforward. Download flickity.pkgd.min.js as well as flickity.min.css, save these files in appropriate folders in your project directory, and link both of them within the document's <head> tag. I prefer, however, to link them through the CDN for faster performance, as follows.
1 |
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/1.5.2/css/ionicons.min.css"> |
2 |
<script src="https://cdnjs.cloudflare.com/ajax/libs/flickity/1.1.0/flickity.pkgd.min.js"></script> |
Step 2: Go!
Flickity can be initialized in three ways. First, we can use jQuery. We’d link to jQuery, then, within <script> tags run:
1 |
$('#popular-courses').flickity(); |
This could be an appropriate way when we use Flickity in conjunction with other libraries; a framework like Bootstrap, or a platform like WordPress, which already heavily depend on jQuery. This would make the code more consistent and uniform.
If the website is fully customized, I’d recommend we go completely vanilla. So, again, within <script> tags at the bottom of the page (or in a separate, linked JS file):
1 |
var elem = document.getElementById('popular-courses'); |
2 |
var slider = new Flickity( elem ); |
Another way is by including js-flickity within the class attribute of the wrapping element. This is a slender method which I find preferable, especially when we plan to have multiple sliders, each with different options.
1 |
<div class="courses cf js-flickity" id="featured-courses" > |
2 |
<div class="course-item slide"> |
3 |
<div class="course-summary card"> |
4 |
<div class="course-thumbnail"> |
5 |
<img src="img/mspaint-course.jpg" height="277" width="400" alt="MSPaint Image"> |
6 |
</div>
|
7 |
<div class="course-info"> |
8 |
<div class="course-topic webdesign">Web Design</div> |
9 |
<h3 class="course-title">Rapid Prototyping with MSPaint</h3> |
10 |
<div class="course-meta"> |
11 |
<time class="course-date">10 Apr 2015</time> |
12 |
<span class="course-duration">2.3 hours</span> |
13 |
</div>
|
14 |
</div>
|
15 |
</div>
|
16 |
</div>
|
17 |
|
18 |
<div class="course-item slide"> |
19 |
... |
20 |
</div>
|
21 |
|
22 |
... |
23 |
</div>
|
Having followed those setup steps, whichever method you opted for, you should now find Flickity is immediately functioning with the defaults setup and properly laid out.
In our case, the defaults include arrows to navigate, dots which represent the number of items in the slider, and we can also flick through each slide with a swipe gesture. If you are using a laptop, you can drag the slide with three-finger gesture on the trackpad.
Nice!
Step 3: Customizing the Options
In our previous demo, you will see a wide empty space that spans from the left arrow to the first slide, as well as another at the end of the last slide.
This is Flickity default behaviour when the slides are not 100% the width of the parent container. This could look really weird on the website, therefore we want the slides to span across the empty space.
Additionally, I want to be able to slide the slider indefinitely. To do so, we need to enable the wrapAround option.
1 |
$("#featured-courses").flickity({ |
2 |
wrapAround: true, |
3 |
pageDots: false |
4 |
});
|
Tip: it is better not to use margin-right and margin-left to add spaces between each slide as the Flickity slide position could be inperfect, giving an undesirable result. Instead, use padding or add the margin to the child element to make up the space between the slide.
Going Dotty
I once saw a situation where someone had added 50 slides, along with the dots which were then stacked up to three rows. For this reason, these days I tend to hide dot navigation at the bottom of any slider. You might want to consider disabling the dot navigation as well, especially when you are going to hand over the website to clients. To hide the dots, set the pageDots to false.
1 |
$("#featured-courses").flickity({ |
2 |
wrapAround: true, |
3 |
pageDots: false |
4 |
});
|
Here’s what that gives us:
Flickity provides an abundance of Options. Find them in more details with examples on the Options page.
Step 4: Personalizing the UI
Our slider is looking very presentable, but the two arrows floating to the left and right are a little invasive. Let’s alter them and place them slightly differently:
1 |
.flickity-prev-next-button.previous { |
2 |
left: -30px; |
3 |
}
|
4 |
.flickity-prev-next-button.next { |
5 |
right: -30px; |
6 |
}
|
We can also customize the arrow by changing the color. Doing so is straightforward: as the arrow is inline SVG we are able to target the color through fill. For example:
1 |
.flickity-prev-next-button .arrow { |
2 |
fill: #F5F7FA; |
3 |
}
|
4 |
.flickity-prev-next-button { |
5 |
background-color: #434A54; |
6 |
width: 38px; |
7 |
height: 38px; |
8 |
}
|
9 |
.flickity-prev-next-button:hover { |
10 |
background-color: #656D78; |
11 |
}
|
As you can see, with these rules we’ve also made a change to the hover state.
Step 5: Adding a Flourish with VelocityJS
Though the slider is functioning, it looks pretty static. Let’s give it some flourish with an animation using VelocityJS and its UI Packs. Begin by linking both the Velocity.js and the UI Packs library:
1 |
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.2/velocity.min.js"></script> |
2 |
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.2/velocity.ui.min.js"></script> |
Then, paste the following script.
1 |
$(".slide").velocity("transition.expandIn", { |
2 |
stagger: 150 |
3 |
});
|
Now, as we load the page the slide will zoom in sequentially one after another. If the animation is not your thing, feel free to change the transition. There are loads of different animation in the UI Packs.
Hint: Rerun the demo:
Step 6: What if JavaScript is Disabled?
One last thing. We need a fallback, to make sure that the content is still well presented even if JavaScript is disabled. Fallbacks of this nature depend on the content. In our case, the content should be properly laid out in a grid...
...which is as easy as floating all the slides to the left.
1 |
.course-item { |
2 |
/* ensuring proper layout*/
|
3 |
float: left; |
4 |
}
|
Conclusion
Nowadays, you will find one or two sliders in the majority of websites. Their usefulness when it comes to driving conversion is up for debate, but many of your clients will still insist you add it to their website. When that’s case, consider using Flickity. It is fairly easy to use, fully customizable, performant, and responsive out-of-the-box.
