Merge pull request apache#17722: [BEAM-14418] added arrows to slider

jto · May 20, 2022 · 301acc8 · 301acc8
2 parents cf83f0b + ace81bf
commit 301acc8
Show file tree

Hide file tree

Showing 5 changed files with 36 additions and 9 deletions.
diff --git a/website/www/site/assets/js/quotes-slider.js b/website/www/site/assets/js/quotes-slider.js
@@ -20,6 +20,10 @@ new Swiper('.swiper', {
     bulletClass: "bullet-class-custom",
     bulletActiveClass: "bullet-active-class-custom",
   },
+  navigation: {
+    nextEl: ".swiper-button-next-custom",
+    prevEl: ".swiper-button-prev-custom",
+  },
   breakpoints: {
     // switches from mobile to desktop when window width is > 1024px
     1025: {

diff --git a/website/www/site/assets/scss/_quotes.scss b/website/www/site/assets/scss/_quotes.scss
@@ -119,7 +119,6 @@
   }
 }
 
-
 .bullet-class-custom {
   display: inline-block;
   border: none;
@@ -169,3 +168,19 @@
     }
   }
 }
+
+.swiper-container {
+  display: flex;
+  align-items: center;
+}
+
+.swiper-button-next-custom,
+.swiper-button-prev-custom {
+  @media (max-width: $mobile) {
+    display: none;
+  }
+  img {
+    display: block;
+    width: 100%;
+  }
+}
diff --git a/website/www/site/layouts/index.html b/website/www/site/layouts/index.html
@@ -164,16 +164,24 @@ <h2 class="calendar-title">
       {{ T "home-quotes-title" }}
     </div>
 
-    <div class="quotes-desktop swiper">
-      <div class="swiper-wrapper">
-        {{ $data := index $.Site.Data .Site.Language.Lang }}
-        {{ range $quote := $data.quotes }}
-        <div class="swiper-slide">
-          {{ partial "quotes/quote.html" (dict "icon" $quote.icon "text" $quote.text  "logoUrl" $quote.logoUrl "linkUrl" $quote.linkUrl "linkText" $quote.linkText) }}
+    <div class="swiper-container">
+      <div class="swiper-button-prev-custom">
+        <img src="/images/swiper-button-prev.png" alt="previous button">
+      </div>
+      <div class="quotes-desktop swiper">
+        <div class="swiper-wrapper">
+          {{ $data := index $.Site.Data .Site.Language.Lang }}
+          {{ range $quote := $data.quotes }}
+            <div class="swiper-slide">
+              {{ partial "quotes/quote.html" (dict "icon" $quote.icon "text" $quote.text  "logoUrl" $quote.logoUrl "linkUrl" $quote.linkUrl "linkText" $quote.linkText) }}
+            </div>
+          {{ end }}
         </div>
-        {{ end }}
+        <div id="swiper-pagination-id" class="swiper-pagination"></div>
+      </div>
+      <div class="swiper-button-next-custom">
+        <img src="/images/swiper-button-next.png" alt="next button">
       </div>
-      <div id="swiper-pagination-id" class="swiper-pagination"></div>
     </div>
 
   </div>

diff --git a/website/www/site/static/images/swiper-button-next.png b/website/www/site/static/images/swiper-button-next.png
diff --git a/website/www/site/static/images/swiper-button-prev.png b/website/www/site/static/images/swiper-button-prev.png