Meet Banana Slider^© - fast accordion slider with HTML5 video support created by TEONA! There is JS and WordPress Plugin versions would work out of the box - there is no need for additional efforts from your side.

DEMO example 1 | example 2 | example 3 | example 4

demo by meow

• Available as Wordpress Plugin
• Written from zero on pure JavaScript - NO jQuery required!
• Touch-Enabled slider
• Support any background color or background image
• Support any image as item's icon
• Crazy fast because of GSAP
• HTML5 video support (*.mp4, *.ogv, *.webm files)
• Any number of items
• Skew angle correction
• Skew labels, circular or triange-shaped buttons
• Easy shortcode (as WP Plugin version)
• Clear documentation
• Easy installation

How To Use Banana Slider

1. Load TweenMax library and include BananaSlider files

To use BananaSlider, you’ll need to make sure both the BananaSlider and GSAP scripts are included.

<!-- BananaSlider stylesheet -->
<link rel="stylesheet" href="css/banana.css">

<!-- CDN link for the latest TweenMax -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>	

<!-- Include BananaSlider JS -->
<script src="js/banana-slider.js"></script>	

2. Set up your HTML

All you need is to wrap your "banana-slide" items inside the div container with "banana-slider" id. Add any external or local link instead of LINK.

<div id="banana-slider" data-height="auto" data-angle="80" data-accordion-speed="0.35">

<!-- Item -->
<div class="banana-slide">		
<div class="content" data-img="images/slide_01.png" data-icon="images/slide_icon_1.png" data-bg="#5a4594">
  <video loop>
   <source src="video/video.mp4" type="video/mp4">
   <source src="video/video.ogv" type="video/ogg">
  </video>		
  <a class="click_triangle" href="LINK"><span><span></span></span></a>
 </div>
</div>	
<!-- /Item -->	

...

</div>		

Triangle button used in example upper. For using labels or circle button just change the class of the <a> element - see code below:

<!-- for skew labels -->	
	
<a class="label skew" href="LINK">
 <span><span>LABEL TEXT</span></span>
</a>

<!-- for round labels -->	

<a class="label round" href="LINK">
 <span><span>LABEL TEXT</span></span>
</a>

<!-- for sicrcle buttons -->	

<a class="click_circle" href="LINK">
 <span><span></span></span>
</a>

3. Parameters of the slider

Slide's properties

Banana Slider WP Plugin Documentation

A plugin create slides from images, videos, links, and titles and present them as a fast accordion slider at a chosen location within your theme, page, or post. You can control the slide's colors, button's type, order and item's skew angle via Settings page.

Installation

1. Download and unzip the plugin package.
2. Upload the folder 'banana-slider' to '/wp-content/plugins/'.
3. Navigate to the "Plugins" page in your WordPress admin panel and Activate the BananaSlider plugin. A new item "Slides" would appear in your admin menu.

Usage

1. Go to Slides → Settings and configure the slider options.
2. Go to Slides → Add New Slide and create some slides.
3. Place:

   <?php echo do_shortcode( '[banana_slider]' ); ?>

   in your template file (header.php, index.php, etc.) - where you want it displayed. Alternatively you can use [banana_slider] into a post or a page - just like any other shortcode.

Credits

GSAP (GreenSock Animation Platform): greensock.com
Sample free videos:
- Video 1 (movietools.info)
- Video 2 (movietools.info)
- Video 3 (xstockvideo.com)
- Video 4 (youtube.com)
Icons: flaticon.com