Mobile terminal & PC vue-concise-slider end carousel assembly

vue-concise-slider, a simple slide assembly configuration is simple, supports adaptive / fullscreen + + paging button, the mobile terminal and PC compatible ends

 

 

 

 

 

 

 

 

 

Feature

• Simple Configuration
• Lightweight (~ 35kB gzipped)
• Various slide styles

Has been achieved

•  Full screen adaptation
•  Compatible mobile end
•  Vertical scroll
•  Timing automatic switching
•  Variable width rolling
•  Scroll seamless loop
•  Multi-level scrolling
•  Gradient rolling
•  Rotating scroll
•  adding custom components page
•  Alternative page using slot
•  Custom Paging
•  Sliding center
•  New coverflow
•  Level nested slider

The future will achieve

•  Virtual slider

installation

npm install vue-concise-slider --save

how to use

< Template > 
<-! Produce a framework package slider -> 
 < div style = "width: 70%; margin: Auto 20px; height: 400px" > 
      <-! Configuration slider assembly -> 
      < slider : Pages = "Pages" : sliderinit = "sliderinit" @slide = 'Slide' @tap = 'onTap in' @Init = 'the onInit' > 
          <-! set loading, customizable -> 
          < div slot = "loading" > loading ... </ div > 
      </slider>
 </div>
</template>
<script>
import slider from 'vue-concise-slider'// import slider components
export default {
   el: '#app',
   data () {
      return {
        //Image list
        pages:[
          {
          html: '<div class="slider1">slider1</div>',
          style: {
            'background': '#1bbc9b'
            }
          },
          {
            html: '<div class="slider2">slider2</div>',
            style: {
              'background': '#4bbfc3'
            }
          },
          {
            html: '<div class="slider3">slider3</div>',
            style: {
              'background': '#7baabe'
            }
          }
        ],
        //Sliding configuration [obj]
        sliderinit: {
          currentPage: 0,
          thresholdDistance: 500,
          thresholdTime: 100,
          autoplay:1000,
          loop:true,
          direction:'vertical',
          infinite:1,
          slidesToScroll:1,
          timingFunction: 'ease',
          duration: 300
        }
      }
    },
    components: {
        slider
    },
    methods: {
      // Listener event
      slide (data) {
        console.log(data)
      },
      onTap (data) {
        console.log(data)
      },
      onInit (data) {
        console.log(data)
      }
    }
}
</script>

 

Related

1.  pagination: true, // 底部小圆点是否隐藏（true显示，false隐藏） 2. currentPage: 0, // 当前页码 3. thresholdDistance:500, // 滑动判定距离 4. thresholdTime:100, // 滑动判定时间 5. autoplay:2000, // 自动滚动[ms] 6. loop:true, // 是否循环滚动 7. direction:'vertical', // 滚动方向 8. infinite:1, // 无限滚动前后遍历数 9. slidesToScroll:1, // 滚动行数

Demo Institute Add  https://warpcgd.github.io/vue-concise-slider/demos/

Documents address  https://warpcgd.github.io/vue-concise-slider/docs.html