[BEAM-14418] added arrows to slider

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: {

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%;
+  }
+}

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>