Create Animated Arrow Navigations With FlexSlider And CSS3

As usual, first thing in the morning, I'd read up all kind of news. From world news to the world of web development and I discovered a recently published CSS3 tutorial article titled "Arrow Navigation Styles" by Codrops. That's how I started this tutorial.

All of you should be quite familiar with Codrop's tutorials. They are really inspiring and creative. I played with the Arrow Navigation styles demo, I'm impressed. And I wondered how hard would it be to really implement it on Slider without actually create a slider that does that. First slider that immediately came into my mind is FlexSlider.

I love FlexSlider. It's easy to implement and play really well with responsive layout and all browsers. Apart of that, it has many options and most importantly a few handy callback events. With countless time of FlexSlider implementation in my client projects, I know I can integrate Mary Lou's arrow navigation styles into FlexSlider.

Here is the preview:

I will try to implement 4 styles with my own code, you will need CSS3 and jQuery for this tutorial.

Setup FlexSlider

First thing first, you need to know how to setup Flexslider. We won't cover it in this tutorial, you can read it from its documentation.

Once we get it running, we need to configure and add some scripts to populate some markup to FlexSlider's directional navigation so we can style it up later. By default, this is the HTML markup you'll get once the slider is running (I got it with Web Inspector).

CSS3 Animation

For the animation we will heavily depend on CSS3. As a result, please note that this tutorial will only work in modern browsers. I tested it on Chrome, Safari, Firefox and IE10. Also, responsive layout will require additional styling. Lastly, similar with Codrop tutorial, it's not a solution for touch devices.

Below is the styling for Slide Out. We add transition to .preview and by change left and right properties, we will able to slide the content in and out easily.

And below is CSS for simple Flip Out animation. Flip Out will be more complicated because it involves 3D transform. We need to set a few properties such as perspective-origin, perspective, transform-origin etc, to ensure it has nice 3D flipping effect.

Conclusion

Codrops surely inspired me in a few ways. Sometimes I wonder how on earth you can come out with such creative solution for a simple thing! Here you go, creative Arrow Navigation styles being implemented in actual working sliders. I'm sure you can do more than these and more crazy transition. I hope this tutorial will able to help you understand it's possible to create custom slider with its callback events.

Make sure to follow us and tweet about this if you like it. Stay tuning in for more tutorials.

Kevin Liew is a web designer and developer and keen on contributing to the web development industry. He loves frontend development and absolutely amazed by jQuery. Feel free to say hi to me, or follow @quenesswebblog on twitter.