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