Submit your widget

Create Animated Arrow Navigations With FlexSlider And CSS3

Created 2 years ago   Views 21150   downloads 5955    Author queness
Create Animated Arrow Navigations With FlexSlider And CSS3
View DemoDownload 1.0 MB
23
Share |

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:

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

This is the default Slider HTML markup:

<div class="flexslider">
  <ul class="slides">
    <li>
      <img src="slide1.jpg" />
    </li>
    <li>
      <img src="slide2.jpg" />
    </li>
    <li>
      <img src="slide3.jpg" />
    </li>
    <li>
      <img src="slide4.jpg" />
    </li>
  </ul>
</div>	

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

<ul class="flex-direction-nav">
	<li><a class="flex-prev" href="#">Previous</a></li>
	<li><a class="flex-next" href="#">Next</a></li>
</ul>	

 

<div class="flexslider">
  <ul class="slides">
    <li>
			<img src="img/full/5.jpg" alt="icy Mountain" data-thumbnail="img/thumbnail/5.jpg" />	
		</li>		
 		<li>
			<img src="img/full/3.jpg" alt="Stoney Creek" data-thumbnail="img/thumbnail/3.jpg" />	
		</li>
    <li>
			<img src="img/full/2.jpg" alt="Narrow Road" data-thumbnail="img/thumbnail/2.jpg" />	
		</li>						 		
    <li>
			<img src="img/full/1.jpg" alt="Grey Sky" data-thumbnail="img/thumbnail/1.jpg"/>	
		</li>		
    <li>
			<img src="img/full/4.jpg" alt="Wood Pattern" data-thumbnail="img/thumbnail/4.jpg" />	
		</li>
	</ul>
</div>	

We need to add alt and also data-thumbnail for caption and thumbnail path.
Finally, we use callback events to append markup to the nav. Pretty much self-explanatory.

Read more:http://www.queness.com/post/16977/create-animated-arrow-navigations-with-css3

 

Tag: slideshow