_includes/infographics/infographics.html in appscms-tools-theme-3.4.3 vs _includes/infographics/infographics.html in appscms-tools-theme-3.4.4

@@ -1,22 +1,71 @@
-<style>
-     .infographics_section {
-        width: 100%;
-        padding: 50px 0px 50px 0px;
-        border-top: 1px solid rgb(224, 224, 224);
-    }
-</style>
 <div class="infographics_section">
-    <div class="row">
-        <div class="col-md-9 mx-auto">
-            <div id="carousel">
-                <ul class="flip-items">
+    <h3 class="text-center w-100 mb-3"><b>Infographics Section</b></h3>
+    <div class="slider">
+        <div class="row">
+            <div class="col-md-12 mx-auto">
+                <div id="carousel">
                     {%- for item in featureData.infographics -%}
-                    <li data-flip-title="Red">
-                        <img width="300" height="300" src="{{item.image}}">
-                    </li>
+                    <div class="slide">
+                        <img src="{{item.image}}" alt="Photo1" />
+                        <p class="infographics-desc">{{item.description | capitalize }}</p>
+                    </div>
                     {%- endfor -%}
-                </ul>
+                </div>
             </div>
         </div>
+        <button class="btn-slide prev"><i class="fas fa-3x fa-chevron-circle-left"></i></button>
+        <button class="btn-slide next"><i class="fas fa-3x fa-chevron-circle-right"></i></button>
     </div>
-</div>
+    <div class=" dots-container">
+        {%- for item in featureData.infographics -%}
+        <span class="dot active" data-slide="{{ forloop.index0 }}"></span>
+        {%- endfor -%}
+    </div>
+</div>
+
+<script>
+    function Slider() {
+        const carouselSlides = document.querySelectorAll('.slide');
+        const btnPrev = document.querySelector('.prev');
+        const btnNext = document.querySelector('.next');
+        const dotsSlide = document.querySelector('.dots-container');
+        let currentSlide = 0;
+
+        const activeDot = function (slide) {
+            document.querySelectorAll('.dot').forEach(dot => dot.classList.remove('active'));
+            document.querySelector(`.dot[data-slide="${slide}"]`).classList.add('active');
+        };
+        activeDot(currentSlide);
+
+        const changeSlide = function (slides) {
+            carouselSlides.forEach((slide, index) => (slide.style.transform = `translateX(${100 * (index - slides)}%)`));
+        };
+        changeSlide(currentSlide);
+
+        btnNext.addEventListener('click', function () {
+            currentSlide++;
+            if (carouselSlides.length - 1 < currentSlide) {
+                currentSlide = 0;
+            };
+            changeSlide(currentSlide);
+            activeDot(currentSlide);
+        });
+        btnPrev.addEventListener('click', function () {
+            currentSlide--;
+            if (0 >= currentSlide) {
+                currentSlide = 0;
+            };
+            changeSlide(currentSlide);
+            activeDot(currentSlide);
+        });
+
+        dotsSlide.addEventListener('click', function (e) {
+            if (e.target.classList.contains('dot')) {
+                const slide = e.target.dataset.slide;
+                changeSlide(slide);
+                activeDot(slide);
+            }
+        });
+    };
+    Slider();
+</script>
\ No newline at end of file