File tree 2 files changed +27
-93
lines changed
2 files changed +27
-93
lines changed Original file line number Diff line number Diff line change 1
1
<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 >
71
29
</div >
72
30
</template >
73
31
74
32
<script >
75
- import { Swiper , SwiperSlide } from ' vue-awesome-swiper'
76
-
77
33
export default {
78
34
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
- },
101
35
}
102
36
</script >
103
37
You can’t perform that action at this time.
0 commit comments