slideshow - added to demo, added root classes, switched "kromaSlideshow" to "kroma-slideshow"

Author: crikfilippo

demo.html

@@ -1293,6 +1293,22 @@ <h2 class="text-lg text-primary mb-4">Codeblock Component Showcase</h2>
     </div>
   </div>
 </section>
+<section class="p-6 bg-neutral-50 shadow-md rounded my-6" style="height:clamp(300px,35vw,600px);">
+  <div class="kroma-slideshow rounded"
+    data-autoscroll="false"
+    data-waitime="3000"
+    data-hoverpause="true"
+    data-scrollingpausetime="2000"
+    data-enablearrows="true"
+    data-enablebullets="true"
+    data-inheritsize="true"
+  >
+    <img src="https://t3.ftcdn.net/jpg/05/24/43/88/360_F_524438877_PZFzwc5OWJ3MTWQVFfHKwu1DRVMaSgPx.jpg">
+    <img src="https://t3.ftcdn.net/jpg/05/85/86/44/360_F_585864419_kgIYUcDQ0yiLOCo1aRjeu7kRxndcoitz.jpg">
+    <img src="https://t3.ftcdn.net/jpg/05/64/82/08/360_F_564820811_n9WP1mM43pLiQwLkIA07KF9Hat5vkX2v.jpg">
+    <img src="https://t4.ftcdn.net/jpg/05/21/18/03/360_F_521180384_837ZQVtGdBocnKQr5prxWzpjIa64wtgO.jpg">
+  </div>  
+</section>
 </body>
 <script type="module" src="src/js/main.js"></script>
 <script>

src/css/components/slideshow.css

@@ -1,11 +1,11 @@
 
 @media (pointer:coarse) {
-    .arrow {display:none !important;}
+    .kroma-slideshow .arrow {display:none !important;}
 }
 
-.kromaSlideshow .hidden {display:none !important;}
+.kroma-slideshow .hidden {display:none !important;}
 
-.kromaSlideshow .arrow {
+.kroma-slideshow .arrow {
     opacity:0;
     position: sticky;
     top: 0;
@@ -29,56 +29,56 @@
     text-align: center;
 }
 
-.kromaSlideshow .arrow:before{
+.kroma-slideshow .arrow:before{
     content:"";
     position:absolute;
     top:0;
     left:-28px;
     width:55px;
     height:100%;
-    background: #e2e2e28f;
+    background: var(--neutral-200);
     z-index:-1;
     border-radius:100%;
     transition: 50ms;
 }
 
-.kromaSlideshow .arrow.arrowLeft {
+.kroma-slideshow .arrow.arrowLeft {
     left: 40px;
 }
 
-.kromaSlideshow .arrow.arrowRight {
+.kroma-slideshow .arrow.arrowRight {
     left: calc(100% - 40px );
 }
 
-.kromaSlideshow .arrow:hover {
+.kroma-slideshow .arrow:hover {
     /* transform: scale(1.05) !important; */
     color: #626262;
     opacity: 1 !important;
 }
 
-.kromaSlideshow .arrow:hover:before {
+.kroma-slideshow .arrow:hover:before {
     -webkit-backdrop-filter: blur(4px);
     backdrop-filter: blur(4px);
 }
 
-.kromaSlideshow:has(.arrow):hover > .arrow {
+.kroma-slideshow:has(.arrow):hover > .arrow {
     opacity: 0.8;
     display: flex;
     align-content: center;
     justify-content: center;
     align-items: center;
 }
 
-.kromaSlideshow:has(.arrow)::-webkit-scrollbar,.kromaSlideshow::-webkit-scrollbar {
+.kroma-slideshow:has(.arrow)::-webkit-scrollbar,.kroma-slideshow::-webkit-scrollbar {
   display: none;
 }
 
-.kromaSlideshow:has(.arrow),.kromaSlideshow {
+.kroma-slideshow:has(.arrow),.kroma-slideshow {
   -ms-overflow-style: none;  /* IE and Edge */
   scrollbar-width: none;  /* Firefox */
 }
 
-.kromaSlideshow {
+.kroma-slideshow {
     width: 75vw;
     height: 35vw;
     display: flex;
@@ -90,12 +90,12 @@
     scroll-behavior: smooth;
 }
 
-.kromaSlideshow.inheritsize{
+.kroma-slideshow.inheritsize{
     width:100% !important;
     height:100% !important;
 }
 
-.kromaSlideshow .slide {
+.kroma-slideshow .slide {
     width: 100%;
     height: 100%;
     background-size: cover !important;
@@ -105,21 +105,21 @@
     scroll-snap-align: center;
 }
 
-.kromaSlideshow .slide.first {
+.kroma-slideshow .slide.first {
     border-top-left-radius: inherit;
     border-bottom-left-radius: inherit;
 }
 
-.kromaSlideshow .slide.last {
+.kroma-slideshow .slide.last {
     border-top-right-radius: inherit;
     border-bottom-right-radius: inherit;
 }
 
-.kromaSlideshow .bullets {
+.kroma-slideshow .bullets {
     position: sticky;
     margin-bottom: 7px;
     margin-top: auto;
-    background: #2f2f2fbd;
+    background: var(--neutral-100);
     width: max-content;
     height: max-content;
     display: flex;
@@ -131,14 +131,20 @@
     opacity: 0.8;
 }
 
-.kromaSlideshow .bullet {
+.kroma-slideshow .bullet {
     width: 15px;
     height: 15px;
-    background: #ffffff69;
+    background: var(--neutral-600);
     border-radius: 51px;
     cursor:pointer;
 }
 
-.kromaSlideshow .bullet.current {
-    background: white;
+.kroma-slideshow .bullet.current {
+    background: var(--neutral-900);
 }
+
+
+.kroma-slideshow .arrow i {
+    font-size: 25px;
+    color: var(--neutral-800);
+}

src/js/components/slideshow.js

@@ -13,7 +13,15 @@ export class KromaSlideshow {
 
     requires basic preexisting html structure with desired data, such as:
 
-    <div class="kromaSlideshow">
+    <div class="kroma-slideshow rounded"
+        data-autoscroll="fase"
+        data-waitime="3000"
+        data-hoverpause="true"
+        data-scrollingpausetime="2000"
+        data-enablearrows="true"
+        data-enablebullets="true"
+        data-inheritsize="true"
+    >
 
       <img src="https://t3.ftcdn.net/jpg/05/24/43/88/360_F_524438877_PZFzwc5OWJ3MTWQVFfHKwu1DRVMaSgPx.jpg">
       <img src="https://t3.ftcdn.net/jpg/05/85/86/44/360_F_585864419_kgIYUcDQ0yiLOCo1aRjeu7kRxndcoitz.jpg">
@@ -32,9 +40,8 @@ export class KromaSlideshow {
         this.id = id;
         this.cnt_sld = document.getElementById(id);
         if(!this.cnt_sld){ throw new Error(`element "${id}" not found`); }
-        //if(this.cnt_sld.classList.contains('kromaSlideshow')){ throw new Error(`slideshow already set.`); }
-        //this.cnt_sld.classList.add('slideshow');
-        //this.cnt_sld.classList.add('kromaSlideshow');
+        if(this.cnt_sld.classList.contains('kroma-slideshow-set')){ throw new Error(`slideshow already set.`); }
+        this.cnt_sld.classList.add('kroma-slideshow-set');
 
 
         //get parameters from call if passed else from element dataset if available else default
@@ -56,16 +63,22 @@ export class KromaSlideshow {
         if(this.enableArrows && prvSlds.length>1){
 
             var arrowLeft = document.createElement('div');
+            var arrowLeftIcon = document.createElement('i');
             arrowLeft.classList.add('arrow');
             arrowLeft.classList.add('arrowLeft');
             arrowLeft.classList.add('hidden');
-            arrowLeft.innerHTML = '<';
+            arrowLeftIcon.classList.add('fa-solid');
+            arrowLeftIcon.classList.add('fa-chevron-left');
+            arrowLeft.appendChild(arrowLeftIcon);
 
             var arrowRight = document.createElement('div');
+            var arrowRightIcon = document.createElement('i');
             arrowRight.classList.add('arrow');
             arrowRight.classList.add('arrowRight');
             arrowRight.classList.add('hidden');
-            arrowRight.innerHTML = '>';
+            arrowRightIcon.classList.add('fa-solid');
+            arrowRightIcon.classList.add('fa-chevron-right');
+            arrowRight.appendChild(arrowRightIcon);
 
             this.cnt_sld.appendChild(arrowRight);
             this.cnt_sld.appendChild(arrowLeft);
@@ -220,7 +233,6 @@ export class KromaSlideshow {
         });
 
         //start automatic scroll
-        console.log(this.autoScroll);
         if(this.autoScroll){this.slideAuto();}
 
 
@@ -274,10 +286,10 @@ document.addEventListener("DOMContentLoaded", () => {
 
     window.kromaSlideshow = KromaSlideshow;
     if(!window.kromaSlideshows){ window.kromaSlideshows = []; }
-    var domSlideshows = document.querySelectorAll('.kromaSlideshow');
+    var domSlideshows = document.querySelectorAll('.kroma-slideshow');
     if(domSlideshows && domSlideshows[0]){  
 
-        domSlideshows[0].id = (domSlideshows[0].id ?? '').length > 0 ? domSlideshows[0].id : ( 'kromaSlideshow_' + window.kromaSlideshow.length );
+        domSlideshows[0].id = (domSlideshows[0].id ?? '').length > 0 ? domSlideshows[0].id : ( 'kroma-slideshow-' + window.kromaSlideshow.length );
         window.kromaSlideshow[window.kromaSlideshow.length] = new KromaSlideshow( domSlideshows[0].id );
 
     }