Creació d'un control lliscant d'imatges amb Vue.js

Bloc

Creació d'un control lliscant d'imatges amb Vue.js

Creació d'un control lliscant d'imatges amb Vue.js

Configuració del projecte

Si encara no ho heu fet, en cas de crear un nou projecte Vue.js, haureu d'instal·lar Vue CLI globalment a la vostra màquina fent el següent:

$ npm install -g @vue/cli # OR $ yarn global add @vue/cli

Creeu un projecte nou amb Vue CLI:

$ vue create vue-image-slider $ cd vue-image-slider

A continuació, executeu el serve script per iniciar un servidor local:

La finestra d'error de referència no està definida nextjs
$ npm run serve

El nostre projecte Vue.js s’està executant correctament.

Creació del component lliscant

És possible que noteu que hi ha un HelloWorld component generat automàticament. Podeu canviar el nom d'aquest component a Slider i feu canvis al seu interior o traieu-lo i creeu un nou Slider component. Tanmateix, en ambdós casos assegureu-vos d'importar el component adequat a App.vue.

Creem un nou Slider component i afegiu les funcions següents:

export default { name: 'Slider', data() { return { images: [ 'https://cdn.pixabay.com/photo/2015/12/12/15/24/amsterdam-1089646_1280.jpg'>Pixabay .
  • Set timer

    Aquí aprofitem el currentIndex incorporat component que ve amb Vue.js, a continuació, itereu les imatges i afegiu les funcions que hem creat anteriorment.

    Perquè aquest component tingui un aspecte fantàstic, hem d'afegir-hi una mica d'estil CSS:

    startSlide

    Com es va esmentar anteriorment, vam utilitzar el next incorporat component de Vue.js que té noms de classe ja fets com prev, currentImg, entre d'altres.

    Fent canvis a App.vue

    No oblidem comprovar ❮ Previous ❯ Next i importeu el nostre transtion-group component:

    .fade-enter-active, .fade-leave-active { transition: all 0.9s ease; overflow: hidden; visibility: visible; position: absolute; width:100%; opacity: 1; } .fade-enter, .fade-leave-to { visibility: hidden; width:100%; opacity: 0; } img { height:600px; width:100% } .prev, .next { cursor: pointer; position: absolute; top: 40%; width: auto; padding: 16px; color: white; font-weight: bold; font-size: 18px; transition: 0.7s ease; border-radius: 0 4px 4px 0; text-decoration: none; user-select: none; } .next { right: 0; } .prev { left: 0; } .prev:hover, .next:hover { background-color: rgba(0,0,0,0.9); }

    Això és! El nostre control lliscant d'imatges està a punt per utilitzar-se. Podeu trobar el codi font complet a Github aquí .

    # vue-js #javascript #imatge # desenvolupament web