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:
càrrega d'imatges d'interfície d'usuari de material
$ 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 timerAquí 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:
startSlideCom 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