Slider
project-netashop/src/components/Slider.vue
<template> <div :id="id" class="carousel slide" data-ride="carousel"> <ol class="carousel-indicators"> <li :data-target="'#' + id" v-for="(slide, index) in this.sliders" :key="slide.id" :class="{ 'active': index === 0 }" :data-slide-to="index"> </li> </ol> <div class="carousel-inner"> <div class="carousel-item" v-for="(slide, index) in this.sliders" :key="slide.id" :class="{ 'active': index === 0 }"> <img :src="slide.url" class="d-block w-100 slider-img" :alt="slide.alt" /> <div class="carousel-caption d-none d-md-block"> <h3>{{ slide.caption }}</h3> <p>{{ slide.description }}</p> </div> </div> </div> <a class="carousel-control-prev" :href="'#' + id" role="button" data-slide="prev" > <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" :href="'#' + id" role="button" data-slide="next" > <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> </template> <script> export default { props: { id: { type: String, required: true }, sliders: { type: Array, required: true, default () { return [ { id: 1, url: require('@/assets/img/slider/slider-1.jpg'), alt: 'Alt slider 1', caption: 'Slider 1', description: 'Descriptio slider 1' }, { id: 2, url: require('@/assets/img/slider/slider-2.jpg'), alt: 'Alt slider 2', caption: 'Slider 2', description: 'Descriptio slider 2' }, { id: 3, url: require('@/assets/img/slider/slider-3.jpg'), alt: 'Alt slider 3', caption: 'Slider 3', description: 'Descriptio slider 3' } ] } } }, data () { return { } } } </script> <style scoped> .slider-img { height: 250px; object-fit: cover; } .carousel-caption { bottom: 3rem; z-index: 10; color: white; text-shadow: 2px 2px 5px black; } </style>
Home
project-netashop/src/pages/Home.vue
<template> <div id="home-page"> <section> <div class="row"> <div class="col"> <slider id="home-page-slider" v-bind:sliders="this.homeSliders" /> </div> </div> </section> </div> </template> <script> import Slider from '@/components/Slider' export default { components: { Slider }, data () { return { homeSliders: [ { id: 1, url: require('@/assets/img/slider/slider-1.jpg'), alt: 'Nền tảng - Nơi mua sắm tuyệt vời', caption: 'Nền tảng - Nơi mua sắm tuyệt vời', description: 'Địa điểm tin cậy, chất lượng và uy tín' }, { id: 2, url: require('@/assets/img/slider/slider-2.jpg'), alt: 'Hàng triệu sản phẩm - Lựa chọn mỏi tay', caption: 'Hàng triệu sản phẩm - Lựa chọn mỏi tay', description: 'Hàng hóa đa dạng, lựa chọn thoải mái' } ] } } } </script> <style> </style>
Cùng nhau học tập, khám phá các kiến thức nền tảng về Lập trình web, mobile, database nhé.
Nền tảng kiến thức - Hành trang tới tương lai hân hạnh phục vụ Quý khách!
Khám phá, trải nghiệm ngay
Vui lòng đăng nhập để gởi bình luận!
Đăng nhậpChưa có bình luận nào!