3D-Flip-Slider是一款纯JS和CSS3超酷3D翻转式幻灯片插件。该幻灯片在点击前后按钮时，图片或幻灯片内容以3D翻转的方式进行切换。该3D翻转幻灯片的特点还有：

• 纯JavaScript，不依赖jQuery库。
• 轻量级，压缩版本只有2.5kb。
• 支持图片和任何HTML内容。
• 性能优化，支持IE10+浏览器。
• 可通过外部元素来触发前后导航事件。

使用方法

在页面中引入flipslide.js和flipslide.css文件。

HTML结构

该3D翻转幻灯片的基本HTML结构如下：

  

    

      

      

      

      

      

      

        
Slide Title
        HTML Page Content
      
    
  
  

    Previous
    Next
  

                

初始化插件

可以通过new FlipSlider()来实例化幻灯片对象。

var flip1 = new FlipSlider({
    startIndex: 3,
    container: document.querySelector(".flip-slider")
});
//或者
var flip2 = new FlipSlider({
    container: document.getElementById("#flipSlider2")
});
                

绑定触发事件

方法一：在元素上绑定事件。

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

方法二：通过JS来触发事件。

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

方法三：在标签上通过内联的方式来绑定事件：

Click here to flip Previous the slider
Click here to flip next the slider
            
                

3D-Flip-Slider幻灯片插件的github地址为：https://github.com/ashishkumar-ui/3D-Flip-Slider