BananaSlider logo BananaSlider text

Banana Slider©

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

FULL SCREEN DEMO Banana Slider WP 24$ JS ver. 14$
Note: videos that used in the preview DEMO are NOT included in the download.

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

VariableDefaultTypeDescription
data-heightautointHeight of the slider in pixels, auto height when set "auto"
data-angle80intItem's skew angle in deg.
data-border0intItem's border width in px.
data-accordion-speed0.35intAccordion's hover delay in milliseconds.

Slide's properties

VariableDefaultTypeDescription
data-imgpathurlItem's background image
data-iconpathurlItem's icon image.
data-bghexcolorItem's background color.
data-labelbghexcolorItem's label background color.
data-labeltop50%valueItem's label top position (integer value with % or px).
data-labelleft50%valueItem's label left position (integer value with % or px).

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:

    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

Author

BananaSlider created by TEONA, Tatiana Sologub
You can write me: teona dot sologub at gmail dot com

Thanks to Alex Golovin for making this slider possible!

Banana Slider WP Plugin 24$ JS version 14$