add carousel

api/static/index2.html

@@ -15,6 +15,8 @@
     <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap" rel="stylesheet"> 
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11.0.18/dist/sweetalert2.min.css">
+  <link rel="stylesheet" href="static/owl.carousel.min.css">
+  <link rel="stylesheet" href="static/owl.theme.default.min.css">
   <link rel="stylesheet" href="static/style.css">
   <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
   <style>
@@ -96,44 +98,44 @@
             <option value="11">Summer韓小夏</option>
             <option value="12">Jocelyn</option>
           </select>
-          <div class="d-flex">
-            <div class="card" style="width:25%;" data-avatar="Angus" data-img="angus">
+          <div class="owl-carousel owl-theme">
+            <div class="card item" data-avatar="Angus" data-img="angus">
               <div class="imgfr"><img src="static/img/angus.webp" class="card-img-top" alt="..."></div>
               <div class="card-body">
                 <h5 class="card-title">Angus</h5>
               </div>
             </div>
-            <div class="card" style="width:25%;" data-avatar="Peggy" data-img="peggy">
+            <div class="card item" data-avatar="Peggy" data-img="peggy">
               <div class="imgfr"><img src="static/img/peggy.webp" class="card-img-top" alt="..."></div>
               <div class="card-body">
                 <h5 class="card-title">Peggy</h5>
               </div>
             </div>
-            <div class="card" style="width:25%;" data-avatar="Stacy" data-img="stacy">
+            <div class="card item" data-avatar="Stacy" data-img="stacy">
               <div class="imgfr"><img src="static/img/stacy.webp" class="card-img-top" alt="..."></div>
               <div class="card-body">
                 <h5 class="card-title">Stacy</h5>
               </div>
             </div>
-            <div class="card" style="width:25%;" data-avatar="Nina黑" data-img="ninablack">
+            <div class="card item" data-avatar="Nina黑" data-img="ninablack">
               <div class="imgfr"><img src="static/img/ninablack.webp" class="card-img-top" alt="..."></div>
               <div class="card-body">
                 <h5 class="card-title">Nina黑</h5>
               </div>
             </div>
-            <div class="card" style="width:25%;" data-avatar="Nina灰" data-img="ninawhite">
+            <div class="card item" data-avatar="Nina灰" data-img="ninawhite">
               <div class="imgfr"><img src="static/img/ninawhite.webp" class="card-img-top" alt="..."></div>
               <div class="card-body">
                 <h5 class="card-title">Nina灰</h5>
               </div>
             </div>
-            <div class="card" style="width:25%;" data-avatar="Summer韓小夏" data-img="summer">
+            <div class="card item" data-avatar="Summer韓小夏" data-img="summer">
               <div class="imgfr"><img src="static/img/summer.webp" class="card-img-top" alt="..."></div>
               <div class="card-body">
                 <h5 class="card-title">Summer韓小夏</h5>
               </div>
             </div>
-            <div class="card" style="width:25%;" data-avatar="Jocelyn" data-img="Jocelyn">
+            <div class="card item" data-avatar="Jocelyn" data-img="Jocelyn">
               <div class="imgfr"><img src="static/img/Jocelyn.webp" class="card-img-top" alt="..."></div>
               <div class="card-body">
                 <h5 class="card-title">Jocelyn</h5>
@@ -233,6 +235,7 @@
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script> 
   <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.0.18/dist/sweetalert2.all.min.js"></script>
   <script src="//cdnjs.cloudflare.com/ajax/libs/validate.js/0.13.1/validate.min.js"></script>
+  <script src="static/owl.carousel.min.js"></script>
   <script src="static/script_msg.js"></script>
 
   <body>

api/static/owl.theme.default.min.css

@@ -0,0 +1,6 @@
+/**
+ * Owl Carousel v2.3.4
+ * Copyright 2013-2018 David Deutsch
+ * Licensed under: SEE LICENSE IN https://github.com/OwlCarousel2/OwlCarousel2/blob/master/LICENSE
+ */
+.owl-theme .owl-dots,.owl-theme .owl-nav{text-align:center;-webkit-tap-highlight-color:transparent}.owl-theme .owl-nav{margin-top:10px}.owl-theme .owl-nav [class*=owl-]{color:#FFF;font-size:14px;margin:5px;padding:4px 7px;background:#D6D6D6;display:inline-block;cursor:pointer;border-radius:3px}.owl-theme .owl-nav [class*=owl-]:hover{background:#869791;color:#FFF;text-decoration:none}.owl-theme .owl-nav .disabled{opacity:.5;cursor:default}.owl-theme .owl-nav.disabled+.owl-dots{margin-top:10px}.owl-theme .owl-dots .owl-dot{display:inline-block;zoom:1}.owl-theme .owl-dots .owl-dot span{width:10px;height:10px;margin:5px 7px;background:#D6D6D6;display:block;-webkit-backface-visibility:visible;transition:opacity .2s ease;border-radius:30px}.owl-theme .owl-dots .owl-dot.active span,.owl-theme .owl-dots .owl-dot:hover span{background:#869791}

api/static/script_msg.js

@@ -27,6 +27,7 @@ addCardListener();
 
 function avatarChange() {
   var value = avatarSelector.options[avatarSelector.selectedIndex].text;
+  $('.owl-carousel').trigger('to.owl.carousel', avatarSelector.selectedIndex);
   console.log(value);
   for(let i = 0;i < card.length; i++) {
     if(card[i].dataset.avatar == value) {
@@ -232,3 +233,26 @@ function load_data() {
   }
 
 }
+
+$('.owl-carousel').owlCarousel({
+  loop:true,
+  margin:10,
+  nav: false,
+  mouseDrag: true,
+  touchDrag: true,
+  smartSpeed: 1000,
+  autoplay: true,
+  autoplayTimeout: 8000,
+  autoplayHoverPause: false,
+  responsive:{
+      0:{
+          items:1
+      },
+      600:{
+          items:2
+      },
+      1000:{
+          items:4
+      }
+  }
+})