File tree Expand file tree Collapse file tree 2 files changed +27
-93
lines changed Expand file tree Collapse file tree 2 files changed +27
-93
lines changed Original file line number Diff line number Diff line change 11<template >
2- <div >
3- <swiper id =" hero" ref =" mySwiper" :options =" swiperOption" >
4- <swiper-slide
5- ><img alt =" Image slider slide #1" src =" ~assets/images/Hero.jpg" />
6- <div
7- class ="
8- flex flex-col
9- items-start
10- justify-center
11- w-full
12- mx-auto
13- tracking-wide
14- lg:w-1/2
15- "
16- >
17- <span
18- class ="
19- w-full
20- p-4
21- mt-4
22- text-center text-white
23- bg-black
24- text-md
25- lg:text-2xl lg:-mt-64
26- "
27- >
28- Modern Pillow Sample Set
29- </span >
30- </div >
31- </swiper-slide >
32- <swiper-slide
33- ><img alt =" Image slider slide #2" src =" ~assets/images/Hero2.jpg" />
34- <div
35- class ="
36- flex flex-col
37- items-start
38- justify-center
39- w-full
40- mx-auto
41- tracking-wide
42- lg:w-1/2
43- "
44- >
45- <span
46- class ="
47- w-full
48- p-4
49- mt-4
50- text-center text-white
51- bg-black
52- text-md
53- lg:text-2xl lg:-mt-64
54- "
55- >
56- Modern Interior Sample
57- </span >
58- </div >
59- </swiper-slide >
60- <div
61- slot =" button-prev"
62- class =" swiper-button-prev"
63- @click =" swiper.slidePrev(1000, false)"
64- ></div >
65- <div
66- slot =" button-next"
67- class =" swiper-button-next"
68- @click =" swiper.slideNext(1000, false)"
69- ></div >
70- </swiper >
2+ <div id =" hero" >
3+ <img alt =" Image slider slide #1" src =" ~assets/images/Hero.jpg" />
4+ <div
5+ class ="
6+ flex flex-col
7+ items-start
8+ justify-center
9+ w-full
10+ mx-auto
11+ tracking-wide
12+ lg:w-1/2
13+ "
14+ >
15+ <span
16+ class ="
17+ w-full
18+ p-4
19+ mt-4
20+ text-center text-white
21+ bg-black
22+ text-md
23+ lg:text-2xl lg:-mt-64
24+ "
25+ >
26+ Modern Interior Sample
27+ </span >
28+ </div >
7129 </div >
7230</template >
7331
7432<script >
75- import { Swiper , SwiperSlide } from ' vue-awesome-swiper'
76-
7733export default {
7834 name: ' Hero' ,
79- components: {
80- Swiper,
81- SwiperSlide,
82- },
83- data () {
84- return {
85- swiperOption: {
86- navigation: {
87- nextEl: ' .swiper-button-next' ,
88- prevEl: ' .swiper-button-prev' ,
89- },
90- },
91- }
92- },
93- computed: {
94- swiper () {
95- return this .$refs .mySwiper .$swiper
96- },
97- },
98- mounted () {
99- this .swiper .slideTo (2 , 2000 , false )
100- },
10135}
10236 </script >
10337
You can’t perform that action at this time.
0 commit comments