Carousel of the first speakers

alpescraft · Feb 6, 2024 · 97e64ba · 97e64ba
1 parent 6d7069c
commit 97e64ba
Show file tree

Hide file tree

Showing 8 changed files with 533 additions and 602 deletions.
diff --git a/assets/js/alpescraft.js b/assets/js/alpescraft.js
@@ -63,55 +63,20 @@ const breakpoint = {
   xl: 1200
 };
 
-// bootstrap 4 responsive multi column slick carousel
-var slickParams = {
-                    autoplay: true,
-                    autoplaySpeed: 5000,
-                    draggable: false,
-                    pauseOnHover: true,
-                    infinite: true,
-                    dots: false,
-                    arrows: true,
-                    speed: 1000,
-                    variableWidth: false,
+$('.carousel .carousel-item').each(function() {
+    var minPerSlide = 4;
+    var next = $(this).next();
+    if (!next.length) {
+        next = $(this).siblings(':first');
+    }
+    next.children(':first-child').clone().appendTo($(this));
 
-                    mobileFirst: true,
+    for (var i = 0; i < minPerSlide; i++) {
+        next = next.next();
+        if (!next.length) {
+            next = $(this).siblings(':first');
+        }
 
-                    slidesToShow: 1,
-                    slidesToScroll: 1,
-
-                    responsive: [{
-                        breakpoint: breakpoint.sm,
-                        settings: {
-                          slidesToShow: 2,
-                          slidesToScroll: 2,
-                          variableWidth: false
-                        }
-                      },
-                      {
-                        breakpoint: breakpoint.md,
-                        settings: {
-                          slidesToShow: 3,
-                          slidesToScroll: 3,
-                          variableWidth: false
-                        }
-                      },
-                      {
-                        breakpoint: breakpoint.lg,
-                        settings: {
-                          slidesToShow: 5,
-                          slidesToScroll: 5,
-                          variableWidth: false
-                        }
-                      },
-                      {
-                        breakpoint: breakpoint.xl,
-                        settings: {
-                          slidesToShow: 6,
-                          slidesToScroll: 6,
-                          variableWidth: false
-                        }
-                      }
-                    ]
-                  }
-$('#slick').slick(slickParams);
+        next.children(':first-child').clone().appendTo($(this));
+    }
+});
diff --git a/assets/scss/_schedule.scss b/assets/scss/_schedule.scss
@@ -2,74 +2,63 @@
 
   padding: 2rem 1rem;
 
-/* bootstrap 4 multi-col carousel */
-  #slick {
-
-      display: none;
-
-      &.slick-initialized {
-        display: block;
+  /*********************************************************************/
+  /* Bootstrap 4 Multiple Item Carousel */
+  /*********************************************************************/
+  /* medium - display 2  */
+  @media (min-width: 768px) {
+
+      .carousel-inner .carousel-item-right.active,
+      .carousel-inner .carousel-item-next {
+          transform: translateX(50%);
       }
 
-      /* .slick-list emulates .row */
-      .slick-list {
-        margin-left: -15px;
-        margin-right: -15px;
+      .carousel-inner .carousel-item-left.active,
+      .carousel-inner .carousel-item-prev {
+          transform: translateX(-50%);
       }
+  }
 
-      /* .slick-slide emulates .col- */
-      .slick-slide {
-        padding-right: 15px;
-        padding-left: 15px;
-        cursor: initial;
-
-        &:focus {
-          outline: none;
-        }
+  /* large - display 3 */
+  @media (min-width: 992px) {
 
+      .carousel-inner .carousel-item-right.active,
+      .carousel-inner .carousel-item-next {
+          transform: translateX(33%);
       }
 
-    .slick-arrow {
-        position: absolute;
-        top: 50%;
-        z-index: 1;
-        width: 20px;
-        height: 20px;
-        background: no-repeat 50%/100% 100%;
-        text-indent: -999px;
-        overflow: hidden;
-        margin: 0;
-        padding: 0;
-        border: 0;
-        opacity: .5;
-        transition: opacity .5s ease;
-
-        &:hover {
-          opacity: 1;
-        }
+      .carousel-inner .carousel-item-left.active,
+      .carousel-inner .carousel-item-prev {
+          transform: translateX(-33%);
+      }
+  }
 
-        &.slick-prev {
-          left: 0;
-          transform: translate(calc(-100% - 15px),-50%);
-          background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23212529' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5L4.25 4l2.5-2.5L5.25 0z'/%3e%3c/svg%3e");
-        }
+  @media (max-width: 768px) {
+      .carousel-inner .carousel-item>div {
+          display: none;
+      }
 
-        &.slick-next {
-          right: 0;
-          transform: translate(calc(100% + 15px),-50%);
-          background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23212529' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5L3.75 4l-2.5 2.5L2.75 8l4-4-4-4z'/%3e%3c/svg%3e");
-        }
+      .carousel-inner .carousel-item>div:first-child {
+          display: block;
       }
+  }
 
-        .slick-track {
-            display: flex;
+  .carousel-inner .carousel-item.active,
+  .carousel-inner .carousel-item-next,
+  .carousel-inner .carousel-item-prev {
+      display: flex;
+  }
 
-            .slick-slide {
-              display: flex;
-              height: auto;
-            }
-        }
-}
+  .carousel-inner .carousel-item-right,
+  .carousel-inner .carousel-item-left {
+      transform: translateX(0);
+  }
+
+  .card {
+    .card-img-top {
+        max-width: 35%;
+    }
+  }
 
   .subtitle::before {
     display: inline-block;