vtube template

layouts/partials/vtuber.html

@@ -23,21 +23,22 @@
                 <div class="col-md-6">
                     <div class="txt-block">
                         <h2>Top Vtuber</h2>
-                        <div class="owl-carousel owl-carousel-topvtuber">
-                            <ul class="item">
-                                <li>No1. Kizuna AI</li>
-                                <li>No2. Gawr Gura </li>
-                                <li>No3. Inugami Korone </li>
+                        <div class="owl-carousel project">
+                            <ul class="item rankblock">
+                                <li><span>No1.</span> Kizuna AI</li>
+                                <li><span>No2.</span> Gawr Gura </li>
+                                <li><span>No3.</span> Inugami Korone </li>
                             </ul>
-                            <ul class="item">
-                                <li>No1. Kizuna AI</li>
-                                <li>No2. Gawr Gura </li>
-                                <li>No3. Inugami Korone </li>
+                            <ul class="item rankblock">
+                                <li>No4. Kizuna AI</li>
+                                <li>No5. Gawr Gura </li>
+                                <li>No6. Inugami Korone </li>
                             </ul>
-                            <ul class="item">
-                                <li>No1. Kizuna AI</li>
-                                <li>No2. Gawr Gura </li>
-                                <li>No3. Inugami Korone </li>
+                            <ul class="item rankblock">
+                                <li>No7. Kizuna AI</li>
+                                <li>No8. Gawr Gura </li>
+                                <li>No9. Inugami Korone </li>
+                                <li>No10. Inugami Korone </li>
                             </ul>
                         </div>
                     </div>

static/css/custom.css

@@ -429,6 +429,49 @@
   /* clip-path: polygon(0% -10%, 100% 0%, 110% 100%, 0% 100%); */
 }
 
+.project {
+  max-height: 15rem;
+}
+
+.project .owl-pagination {
+  display: none;
+}
+
+.owl-carousel.project .owl-buttons {
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.owl-carousel.project .owl-buttons div {
+  box-shadow: 3px 3px 16px 0 rgb(98 125 152 / 8%), 0 -1px 8px 0 rgb(0 0 0 / 4%);
+  padding: 1rem;
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+}
+
+.txt-block .rankblock {
+  list-style: none;
+}
+
+.txt-block .rankblock li {
+  font-size: 2.2rem;
+  margin-bottom: 1rem;
+}
+
+.txt-block .rankblock span {
+  display: inline-block;
+  width: 35px;
+  height: 35px;
+  border-radius: 50%;
+  background-color: #23408c;
+  color: white;
+  line-height: 35px;
+  margin-right: 1rem;
+  font-size: 1.6rem;
+}
+
 
 
 

static/js/front.js

@@ -95,6 +95,7 @@ function sliderHomepage () {
 function sliders () {
 
   if ($('.owl-carousel').length) {
+    console.log("pass");
     $('.customers').owlCarousel({
       items: 6,
       itemsDesktopSmall: [990, 4],
@@ -112,6 +113,7 @@ function sliders () {
     $('.project').owlCarousel({
       navigation: true, // Show next and prev buttons
       navigationText: ['<i class="fas fa-angle-left"></i>', '<i class="fas fa-angle-right"></i>'],
+      dots: false,
       slideSpeed: 300,
       paginationSpeed: 400,
       autoPlay: true,
@@ -138,12 +140,6 @@ function sliders () {
         // animationsSlider()
       }
     })
-    $(".owl-carousel-topvtuber").owlCarousel({
-      items: 1,
-      loop:true,
-      margin:10,
-      nav:true,
-    });
   }
 }