Carousel customizable. (#300)

Co-authored-by: Guillermo Guerrero Ibarra <guillermo.guerrero@deliveroo.co.uk>

6 files changed, 48 insertions, 27 deletions

diff --git a/README.md b/README.md
index e619cdf..d0d0959 100644
--- a/README.md
+++ b/README.md
@@ -260,11 +260,14 @@ image: "img/carousel/template-easy-code.png"
 
 The `weight` field determines the position of the entry. `title` is a text-only field. The `description` field accepts HTML code. And the `image` must contain the relative path to the image inside the `static` directory.
 
-Once the carousel is configured, it must be explicitly enabled in the `config.toml` file.
+Once the carousel is configured, some options can be defined like: auto play, speed, etc. in the `config.toml` file.
 
 ```toml
-[params.carousel]
+[params.carouselHomepage]
     enable = true
+    auto_play = true
+    slide_speed = 2000
+    pagination_speed = 1000
 ```
 
 #### Features
diff --git a/exampleSite/config.toml b/exampleSite/config.toml
index 9108211..34ca6cb 100644
--- a/exampleSite/config.toml
+++ b/exampleSite/config.toml
@@ -143,11 +143,26 @@ paginate = 10
     tags = true
     search = true
 
-[params.carousel]
-    enable = true
+[params.carouselCustomers]
+    items = 6
+    auto_play = false
+    slide_speed = 2000
+    pagination_speed = 1000
+
+[params.carouselTestimonals]
+    items = 4
+    auto_play = false
+    slide_speed = 2000
+    pagination_speed = 1000
+
+[params.carouselHomepage]
     # All carousel items are defined in their own files. You can find example items
     # at 'exampleSite/data/carousel'.
     # For more informtion take a look at the README.
+    enable = true
+    auto_play = true
+    slide_speed = 2000
+    pagination_speed = 1000
 
 [params.features]
     enable = true
diff --git a/layouts/partials/carousel.html b/layouts/partials/carousel.html
index e614773..be6c6f0 100644
--- a/layouts/partials/carousel.html
+++ b/layouts/partials/carousel.html
@@ -1,11 +1,13 @@
-{{ if isset .Site.Params "carousel" }}
-{{ if .Site.Params.carousel.enable }}
+{{ if default true .Site.Params.CarouselHomepage.enable }}
 {{ if gt (len .Site.Data.carousel) 0 }}
 <section>
     <div class="home-carousel">
         <div class="dark-mask"></div>
         <div class="container">
-            <div class="homepage owl-carousel">
+            <div class="homepage owl-carousel"
+                data-autoplay="{{ default true .Site.Params.CarouselHomepage.auto_play }}"
+                data-slide-speed="{{ default 2000 .Site.Params.CarouselHomepage.slide_speed }}"
+                data-pagination-speed="{{ default 1000 .Site.Params.CarouselHomepage.pagination_speed }}">
                 {{ range sort .Site.Data.carousel "weight" }}
                 <div class="item">
                     <div class="row">
@@ -26,4 +28,3 @@
 </section>
 {{ end }}
 {{ end }}
-{{ end }}
diff --git a/layouts/partials/clients.html b/layouts/partials/clients.html
index fd68aeb..00583f3 100644
--- a/layouts/partials/clients.html
+++ b/layouts/partials/clients.html
@@ -13,7 +13,11 @@
                   {{ .Site.Params.clients.subtitle | markdownify }}
                 </p>
 
-                <ul class="owl-carousel customers">
+                <ul class="owl-carousel customers"
+                    data-items="{{ default 6 .Site.Params.CarouselCustomers.items }}"
+                    data-autoplay="{{ default false .Site.Params.CarouselCustomers.auto_play }}"
+                    data-slide-speed="{{ default 2000 .Site.Params.CarouselCustomers.slide_speed }}"
+                    data-pagination-speed="{{ default 1000 .Site.Params.CarouselCustomers.pagination_speed }}">
                     {{ range .Site.Data.clients }}
                     <li class="item" title="{{ .name }}">
                         {{ if .url }}
diff --git a/layouts/partials/testimonials.html b/layouts/partials/testimonials.html
index bdcae34..e206217 100644
--- a/layouts/partials/testimonials.html
+++ b/layouts/partials/testimonials.html
@@ -15,7 +15,11 @@
 
                 <!-- *** TESTIMONIALS CAROUSEL *** -->
 
-                <ul class="owl-carousel testimonials same-height-row">
+                <ul class="owl-carousel testimonials same-height-row"
+                    data-items="{{ default 4 .Site.Params.CarouselTestimonals.items }}"
+                    data-autoplay="{{ default false .Site.Params.CarouselTestimonals.auto_play }}"
+                    data-slide-speed="{{ default 2000 .Site.Params.CarouselTestimonals.slide_speed }}"
+                    data-pagination-speed="{{ default 1000 .Site.Params.CarouselTestimonals.pagination_speed }}">
                     {{ range .Site.Data.testimonials }}
                     <li class="item">
                         <div class="testimonial same-height-always">
diff --git a/static/js/front.js b/static/js/front.js
index 7944bd0..c9f073a 100644
--- a/static/js/front.js
+++ b/static/js/front.js
@@ -95,37 +95,31 @@ function sliderHomepage () {
 function sliders () {

   if ($('.owl-carousel').length) {

     $('.customers').owlCarousel({

-      items: 6,

+      items: ($('.customers').attr('data-items') || 6),

+      slideSpeed: ($('.customers').attr('data-slide-speed') || 2000),

+      paginationSpeed: ($('.customers').attr('data-pagination-speed') || 1000),

+      autoPlay: $('.customers').attr('data-autoplay') === 'true',

       itemsDesktopSmall: [990, 4],

       itemsTablet: [768, 2],

       itemsMobile: [480, 1]

     })

 

     $('.testimonials').owlCarousel({

-      items: 4,

+      items: ($('.testimonials').attr('data-items') || 4),

+      slideSpeed: ($('.testimonials').attr('data-slide-speed') || 2000),

+      paginationSpeed: ($('.testimonials').attr('data-pagination-speed') || 1000),

+      autoPlay: $('.testimonials').attr('data-autoplay') === 'true',

       itemsDesktopSmall: [990, 3],

       itemsTablet: [768, 2],

       itemsMobile: [480, 1]

     })

 

-    $('.project').owlCarousel({

-      navigation: true, // Show next and prev buttons

-      navigationText: ['<i class="fas fa-angle-left"></i>', '<i class="fas fa-angle-right"></i>'],

-      slideSpeed: 300,

-      paginationSpeed: 400,

-      autoPlay: true,

-      stopOnHover: true,

-      singleItem: true,

-      afterInit: '',

-      lazyLoad: true

-    })

-

     $('.homepage').owlCarousel({

       navigation: false, // Show next and prev buttons

       navigationText: ['<i class="fas fa-angle-left"></i>', '<i class="fas fa-angle-right"></i>'],

-      slideSpeed: 2000,

-      paginationSpeed: 1000,

-      autoPlay: true,

+      slideSpeed: ($('.homepage').attr('data-slide-speed') || 2000),

+      paginationSpeed: ($('.homepage').attr('data-pagination-speed') || 1000),

+      autoPlay: ($('.homepage').attr('data-autoplay') || 'true') === 'true',

       stopOnHover: true,

       singleItem: true,

       lazyLoad: false,