Implement the swipe carousel component instance code based on vue, vueswipe

Implement the swipe carousel component instance code based on vue, vueswipe

Project Background

Image carousel is a must-have for front-end projects. Currently there are many cool-performing carousel plug-ins, such as Swiper.

However, only a simple carousel style is required for image Carousel in a project, such

We reference such a large k plug-in, and it will be useless. Amway, swiper2.x and swiper3.x support for mobile and PC terminals as shown in

Dangdang ~~~

Today, thebird/Swipe, the main character of this plug-in, has completed the basic functions required for image carousel, only 14.2 k, really lightweight. And

Translation, that is, our support, whether you are a PC (IE7 +) or mobile browser. There should be applause here, haha ~

In short, thebird/Swipe can be used to write a component when a simple carousel is required.

For example, this is what I implemented. Based on vue, the swipe paging component is applicable to both mobile and PC terminals.

Result

Usage

Generally, carousel images are customized in the background because they need to be changed frequently. The custom content is as follows:

<div><a href=""></a></div><div><a href=""></a></div><div><a href=""></a></div>

No customization. If it must be written in the code, it is also possible to create a data array swipeInfo

<!--js-->data：{  swipeInfo:[{    href:"http://www.baidu.com",    imgSrc:""  },{    href:"http://www.baidu.com",    imgSrc:""  },{    href:"http://www.baidu.com",    imgSrc:""  }]},components: {  'swipe-module': require('pagination-swipe'),},

Bind the data in html

<!--html--><swipe-module :swipeinfo="swipeInfo"></swipe-module>

Pagination-swipe component content

Construct the html framework according to swipe and add the pagination block.

<! --Template.html --> <div v-el: swipe class = 'swipe bar-slider'> <div class = 'swipe-wrap '> <div v-for = "item in swipeinfo"> <a: href = item. href>  </a> </div> <! -- Pagination --> <div class = "pagination"> <span class = "swipe-pagination-switch swipe-active-switch" @ click = "slideToCur (0) "> </span> <span class =" swipe-pagination-switch "@ click =" slideToCur ($ index + 1) "v-for =" item in slideNum "> </span> </div>

Vue Constructor

// Index. jsrequire ('. /style. less '); var Swipe = require ('swip'); Vue. component ('pagination-swip', {props: ['swipinfo'], template: require ('raw !. /Template.html '), data: function () {return {mySwipe :{}, slideNum :{},}}, ready: function () {var self = this; // obtain the var slides = self. $ els. swipe. getElementsByClassName ('swipe-pagination-switch'); self. mySwipe = new Swipe (self. $ els. swipe, {startSlide: 0, continuous: true, speed: 1000, auto: 4000, stopPropagation: false, callback: function (index, elem) {// render small paging circles for (var I = 0; I <s Lides. length; I ++) {if (I! = Index) {slides [I]. style. opacity = "0.2"; slides [I]. style. background = "#000";} else {slides [index]. style. opacity = "1"; slides [index]. style. background = "# ee3a4a" ;}}},}); self. slideNum = self. mySwipe. getNumSlides ()-1 ;}, methods: {// click the small circle at the bottom of the page to jump to its corresponding page. ssf-etocur: function (index) {var self = this; self. mySwipe. slide (index, 300 );},}});

<!--style.less-->.swipe {  overflow: hidden;  visibility: hidden;  position: relative;  height: 200/@rem;  .swipe-wrap {    position: relative;    overflow: hidden;    height: 100%;    div {      float: left;      width: 100%;      position: relative;      margin: 0;      a {        width: 100%;        height: 100%;        background-position: center 0;        background-repeat: no-repeat;        background-color: transparent;        display: block;        img {          width: 100%;          height: 100%;        }      }    }  }  .pagination {    text-align: center;    position: relative;    bottom: 40/@rem;    cursor: pointer;  }  .swipe-pagination-switch {    content: "";    display: inline-block;    width: 8px;    height: 8px;    border-radius: 100%;    background: #000;    opacity: 0.2;    margin: 0 8px;    z-index: 10;    &:first-child {      background: #ee3a4a;    }  }  .swipe-active-switch {    opacity: 1;  }}

Related Recommendations

Currently, there is a vue-swipe component based on vue, which is simple and easy to use in the test. It has complete basic functions and is a good choice for swipe carousel images.

But there are some problems,

1. If the style is placed in scoped, the small circle at the bottom will disappear ~ Therefore, you need to pay attention to style contamination when using this style.
2. IE9 has no sliding effect, mainly because ie9 is incompatible with css3 animation.
   

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.