Flexslider

1. Place a html element on your page.

Place a HTML element on your page and paste this code into the head of the page by clicking on settings then ctrl + v in the head box.

<link rel="stylesheet" href="flexslider/flexslider.css" type="text/css" media="screen"/>

2. Paste this code into the footer box.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="flexslider/jquery.flexslider.js"></script>
<script type="text/javascript"> $(window).load(function() { $('.flexslider').flexslider({ animation: 'fade', }); }); </script>

3. Click on the Design tab of the same HTML element above and paste the following code into the HTML box

<div class="flexslider">
<ul class="slides">
<li><img src="flexslider/images/001.jpg" /></li>
<li> <img src="flexslider/images/002.jpg" /></li>
<li> <img src="flexslider/images/003.jpg" /></li>
<li> <img src="flexslider/images/004.jpg" /></li>
</ul>
</div>

Now download this file and unzip it then add it to your resources using the add folder tool.