Skip to content

chain0414/3D-Flip-Slider

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

39 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

3D Flip Slider

Alt text

Features

  • Stylish 3D Flip Animation
  • Pure JavaScript, no jQuery or any other JS library used
  • Very light file size. (2.5 kb uncompressed version JS)
  • Supports Images as well as HTML contents
  • Highly Customizable
  • Readable CSS and JS, well commented so that you can make your changes as per your requirements
  • Easy to trigger Events from outside elements
  • Set start slide index as per your choice

####Version 1.0.2 https://github.com/ashishanexpert/Flip-Slider/

####How to Create Instances of the 3D Slider

var flip1 = new FlipSlider({
	startIndex: 3,
    container: document.querySelector(".flip-slider")
});

var flip2 = new FlipSlider({
    container: document.getElementById("#flipSlider2")
});

####How to trigger Events from Outside Elements ######Method 1: Bind Event on Elements

// Binding Previous Event
document.querySelector("#flipPrevious").onclick = flip1.prevFlip;

// Binding Next Event
document.querySelector("#flipNext").onclick = flip1.nextFlip;

######Method 2: Trigger somewhere from script

flip1.prevFlip(); // Trigger Previous Event
flip1.nextFlip(); // Trigger Next Event

######Method 3: Bind Events inline to the elements

<p><b onclick="flip1.prevFlip();">Click here</b> to flip Previous the slider</p>
<p><b onclick="flip1.nextFlip();">Click here</b> to flip next the slider</p>

About

Flip Slider Plugin with CSS 3, Pure JavaScript

Resources

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 52.6%
  • CSS 31.2%
  • HTML 16.2%