【Vue-Element】最美轮播图Empile

这是一款JS插件 Empile.js

官网及Demo： Empile

源码：Empile

1、展示

太美了，迫不及待先展示了，DEMO演示地址

2、使用

2.1 引入Empile文件

将源码 Empile下载后，即可引入 js/empile.js ,也可以将同目录的index.js文件下载，index中都是demo的内容，可以参考实现自己的需求。

2.2 实例化

      var demo6Container = $(".demo6 > .container");
      var demo6FirstSlideW = demo6Container.children[0].offsetWidth;
      console.log('demo6FirstSlideW = demo6Container.children[0]:', demo6FirstSlideW = demo6Container.children[0])
      console.log('demo6FirstSlideW111:', demo6Container.children[0].offsetWidth)
      var empile6 = new Empile(demo6Container, {
        autoplay: {
          delay: 6000
        },
        waitForTransition: true,
        isClickSlide: true,
        navigation: {
          nextEl: $(".btn-right"),
          prevEl: $(".btn-left")
        },
        pagination: {
            el: document.querySelector('.navigation'),
            clickable: true,
            bulletClass: 'dot',
            bulletActiveClass: 'active',
        },
        css: function(coord, absCoord) {
          var zIndex = 100 - absCoord,
          translateX ="translateX(" + (demo6FirstSlideW +45) * coord + "px)";
          var transform = translateX;
          return {
            "z-index": zIndex,
            transform: transform
          };
        },
        on:{
            clickSlide: function (ev) {
              // click 事件
              console.info(ev);
            }
        }
      });

2.3 参数使用

参考详解：堆叠式幻灯片插件——Empile使用介绍