up

assets/css/product.css

@@ -438,6 +438,35 @@
     display: flex;
 }
 
+.cases-slider {
+    margin-top: 30px;
+}
+
+.cases-slider .owl-stage-outer {
+    padding: 4px 0 12px;
+}
+
+.cases-slider .owl-stage {
+    display: flex;
+}
+
+.cases-slider .owl-item {
+    display: flex;
+    float: none;
+}
+
+.cases-slider .case-slide {
+    display: flex;
+    width: 100%;
+    height: 100%;
+}
+
+.cases-slider .case-card-link {
+    display: flex;
+    width: 100%;
+    height: 100%;
+}
+
 .case-card {
     background: #fff;
     border-radius: 16px;
@@ -454,9 +483,7 @@
     position: relative;
     padding: 28px;
     display: flex;
-    align-items: center;
-    justify-content: center;
-    text-align: center;
+    align-items: flex-end;
     overflow: hidden;
 }
 
@@ -497,15 +524,11 @@
     font-weight: 700;
     color: #fff;
     margin: 0;
-    width: 100%;
-    text-align: center;
 }
 
 .case-card-body {
     padding: 28px;
     flex: 1;
-    display: flex;
-    align-items: flex-start;
 }
 
 .case-project {
@@ -526,6 +549,24 @@
     -webkit-line-clamp: 5;
 }
 
+.cases-slider .owl-controls {
+    margin-top: 22px;
+    text-align: center;
+}
+
+.cases-slider .owl-dots .owl-dot span {
+    width: 12px;
+    height: 12px;
+    margin: 5px 6px;
+    background: rgba(20, 129, 255, 0.18);
+    transition: all 0.2s ease;
+}
+
+.cases-slider .owl-dots .owl-dot.active span,
+.cases-slider .owl-dots .owl-dot:hover span {
+    background: rgba(20, 129, 255, 1);
+}
+
 @media (max-width: 767px) {
     .cases-section .row + .row {
         margin-top: 24px;

assets/js/script.js

@@ -479,8 +479,8 @@
     if ($(".services-slider").length) {
         $(".services-slider").owlCarousel({
             loop:true,
-            margin: 30,
-            smartSpeed: 500,
+            margin: 30,
+            smartSpeed: 500,
             responsive:{
                 0 : {
                     items: 1,
@@ -501,43 +501,89 @@
                 1400:{
                     items:3
                 }
-            }
+            }
         });
     }
 
 
+    /*------------------------------------------
+        = PRODUCT CASES TO SLIDER
+    -------------------------------------------*/
+    function buildProductCasesSlider() {
+        $(".cases-section").each(function() {
+            var $section = $(this);
+            var $caseLinks;
+            var $rows;
+            var $headerRow;
+            var $slider;
+
+            if ($section.find(".cases-slider").length || !$section.find(".product-advantages-header").length) {
+                return;
+            }
+
+            $caseLinks = $section.find(".col-md-4 > .case-card-link");
+
+            if (!$caseLinks.length) {
+                return;
+            }
+
+            $rows = $section.find(".container > .row");
+            $headerRow = $rows.first();
+            $slider = $('<div class="cases-slider"></div>');
+
+            $caseLinks.each(function() {
+                var $slide = $('<div class="case-slide"></div>');
+                $slide.append($(this));
+                $slider.append($slide);
+            });
+
+            $rows.slice(1).remove();
+            $headerRow.after($slider);
+        });
+    }
+
+    buildProductCasesSlider();
+
+
     /*------------------------------------------
         = CASES SLIDER
     -------------------------------------------*/
     if ($(".cases-slider").length) {
-        $(".cases-slider").owlCarousel({
-            loop:true,
-            margin: 30,
-            smartSpeed: 500,
-            nav: false,
-            dots: true,
-            autoplay: false,
-            responsive:{
-                0 : {
-                    items: 1,
-                },
+        $(".cases-slider").each(function() {
+            var $slider = $(this);
+            var itemCount = $slider.children().length;
 
-                550 : {
-                    items: 2,
-                    center: false,
-                    margin: 10
-                },
+            $slider.owlCarousel({
+                loop: itemCount > 1,
+                margin: 30,
+                smartSpeed: 500,
+                nav: false,
+                dots: true,
+                autoplay: itemCount > 1,
+                autoplayTimeout: 4000,
+                autoplayHoverPause: true,
+                responsive:{
+                    0 : {
+                        items: 1,
+                    },
 
-                992 : {
-                    items: 3,
-                    center: false,
-                    margin: 10
-                },
+                    550 : {
+                        items: Math.min(2, itemCount),
+                        center: false,
+                        margin: 10
+                    },
 
-                1400:{
-                    items:3
+                    992 : {
+                        items: Math.min(3, itemCount),
+                        center: false,
+                        margin: 10
+                    },
+
+                    1400:{
+                        items: Math.min(3, itemCount)
+                    }
                 }
-            }
+            });
         });
     }