[Update] adaptive slidesPerView for swiper

JunyaoHu · Aug 7, 2023 · 725ee29 · 725ee29
1 parent 5c48486
commit 725ee29
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 9 deletions.
diff --git a/src/components/sections/BibTeX.vue b/src/components/sections/BibTeX.vue
@@ -39,7 +39,7 @@ export default {
     <el-row>
       <el-col class='bibtex' :xs="20" :sm="20" :md="14" :lg="12" :xl="12">
         <el-scrollbar style="margin: 10px 20px 5px 20px;" @click="copyVal()">
-          <div style="text-align: center; color: #c4c4c4;">Click in this area to copy BibTex.</div> 
+          <div style="text-align: center; color: #c4c4c4;">Click here to copy BibTex.</div> 
           <pre><code v-for="b in bibtex" class="code">{{ b }}<br/></code></pre>
         </el-scrollbar>
       </el-col>

diff --git a/src/components/sections/Carousel.vue b/src/components/sections/Carousel.vue
@@ -18,7 +18,7 @@ export default {
           Pagination,
           Autoplay,
         ],
-        source_paths: [
+        image_paths: [
         "./carousel/1.jpg",
         "./carousel/2.jpg",
         "./carousel/3.jpg",
@@ -33,16 +33,19 @@ export default {
 
 <template>
   <div>
-    <!-- <el-carousel height="540px" trigger="click" type="card" style="text-align: center">
-      <el-carousel-item v-for="path in source_paths">
-        <el-image :src="path"/>
-      </el-carousel-item>
-    </el-carousel> -->
 
     <swiper
       :loop="true"
+      :slidesPerView="1"
+      :breakpoints="{
+        600: {
+          slidesPerView: 2,
+        },
+        800: {
+          slidesPerView: 3,
+        },
+      }"
       :modules="modules"
-      :slides-per-view="3"
       :navigation="{ }"
       :pagination="{ 
         clickable:true, 
@@ -54,7 +57,7 @@ export default {
         pauseOnMouseEnter:true,
       }"
       >
-      <swiper-slide v-for="path in source_paths">
+      <swiper-slide v-for="path in image_paths">
         <el-image :src="path"/>
       </swiper-slide>
     </swiper>