Implement flickity

_includes/home/our_supporters.html

@@ -1,10 +1,10 @@
 <div class="container">
   <div class="row">
-    <div class="clients-active owl-carousel">
+    <div class="clients-active">
       {% assign supporters = site.data.supporters | sort_natural: "name" %}
       <!-- prettier-ignore -->
       {%for supporter in supporters %}
-      <div class="col-12">
+      <div class="col-12 container-single-clients" >
         <div class="single-clients">
           <a href="{{ supporter.link_to }}">
             <img

_includes/home/slider.html

@@ -3,6 +3,7 @@
     <div
       class="single-slider slider-bg d-flex align-items-center"
       style="background-image:url(assets/img/stock/hero11.jpg)"
+      slide-index="0"
     >
       <div class="container">
         <div class="row">
@@ -36,6 +37,7 @@ <h1 data-animation="fadeInDown" data-delay=".2s">
     <div
       class="single-slider slider-bg d-flex align-items-center"
       style="background-image:url(assets/img/stock/hero22.jpg)"
+      slide-index="1"
     >
       <div class="container">
         <div class="row">
@@ -68,6 +70,7 @@ <h1 data-animation="fadeInUp" data-delay=".2s">
     <div
       class="single-slider slider-bg d-flex align-items-center"
       style="background-image:url(assets/img/stock/hero33.jpg)"
+      slide-index="2"
     >
       <div class="container">
         <div class="row">

_includes/join_us/testimonial_slider.html

@@ -1,6 +1,6 @@
 <section class="testimonial-area pt-20">
   <div class="container">
-    <div class="testimonial-active owl-carousel">
+    <div class="testimonial-active">
       {% assign testimonials = site.data.join_us.testimonials %}
       <!-- prettier-ignore -->
       {% for testimonial in testimonials %}

_includes/our_work/project_slider.html

@@ -1,6 +1,6 @@
 <div class="row">
   <div class="col">
-    <div class="project-slider-active owl-carousel">
+    <div class="project-slider-active">
       {% for slide in page.slider %}
       <div class="single-item project-slider-items text-center">
         <img

_layouts/default.html

@@ -53,17 +53,10 @@
   <!-- https://linearicons.com/ -->
   <link rel="stylesheet" href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css">
 
-  <!-- slick -- CSS CDN Script Tag -->
-  <!-- The last carousel you'll ever need -->
-  <!-- https://github.com/kenwheeler/slick -->
-  <!-- TODO: Switch to Flickity (https://flickity.metafizzy.co/) -->
-  <link rel="stylesheet" href="/assets/css/slick.css">
-
-  <!-- OwlCarousel2 (DEPRECATED) -- CSS CDN Script Tag -->
-  <!-- Touch enabled jQuery plugin that lets you create beautiful responsive carousel slider -->
-  <!-- https://github.com/OwlCarousel2/OwlCarousel2 -->
-  <!-- TODO: Switch to Flickity (https://flickity.metafizzy.co/) -->
-  <link rel="stylesheet" href="/assets/css/owl.carousel.min.css">
+  <!-- Flickity -- CSS CDN Script Tag -->
+  <!-- Touch, responsive, flickable carousels -->
+  <!-- https://flickity.metafizzy.co/ -->
+  <link rel="stylesheet" href="/assets/css/flickity.min.css">
 
   <!-- Animate.css -- CSS CDN Script Tag -->
   <!-- Plug and play, app-like animations for your websites and web apps -->
@@ -106,10 +99,6 @@
   <script src="/assets/js/popper.min.js"></script>
   <script src="/assets/js/bootstrap.min.js"></script>
 
-  <!-- slick -- JS CDN Script Tag -->
-  <!-- The last carousel you'll ever need -->
-  <!-- https://github.com/kenwheeler/slick -->
-  <script src="/assets/js/slick.min.js"></script>
 
   <!-- Isotope -- JS CDN Script Tag -->
   <!-- Filter and sort magical layouts -->
@@ -131,11 +120,10 @@
   <!-- https://github.com/bfintal/Counter-Up -->
   <script src="/assets/js/jquery.counterup.min.js"></script>
 
-  <!-- OwlCarousel2 (DEPRECATED) -- JS CDN Script Tag -->
-  <!-- Touch enabled jQuery plugin that lets you create beautiful responsive carousel slider -->
-  <!-- https://github.com/OwlCarousel2/OwlCarousel2 -->
-  <!-- TODO: Switch to Flickity (https://flickity.metafizzy.co/) -->
-  <script src="/assets/js/owl.carousel.min.js"></script>
+  <!-- Flickity -- JS CDN Script Tag -->
+  <!-- Touch, responsive, flickable carousels -->
+  <!-- https://flickity.metafizzy.co/ -->
+  <script src="/assets/js/flickity.pkgd.min.js"></script>
 
   <!-- MeanMenu -- Local JS Asset File -->
   <!-- A responsive menu plug-in -->
@@ -163,4 +151,4 @@
   <script src="/assets/js/main.js"></script>
 </body>
 
-</html>
+</html>

assets/css/responsive.scss

@@ -173,6 +173,11 @@
   .sticky {
     position: static;
   }
+
+  .flickity-prev-next-button.next,
+  .flickity-prev-next-button.previous {
+    display: none;
+  }
 }
 
 /* Extra small Device. */
@@ -349,6 +354,15 @@
   .title-header > h2 {
     font-size: 3.8rem;
   }
+
+  .clients-active {
+    padding: 2rem;
+  }
+
+  .flickity-prev-next-button.next,
+  .flickity-prev-next-button.previous {
+    display: none;
+  }
 }
 
 /* SM Small Device :550px. */