featured slider

blocks/featured-slider/front.js

@@ -8,32 +8,30 @@ let i = 1;
 
 document.querySelectorAll( '.featured-slider .itens-wrapper' ).forEach( (element) => {
     let width = element.clientWidth;
-    
-    sliders[i] = tns({
-        container: element,
-        items: 1,
-        nav: false,
-        controlsText: ['<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" focusable="false" width="1em" height="1em" style="-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg);" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path fill="none" stroke="#626262" stroke-width="2" d="M15 6l-6 6l6 6"/></svg>', '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" focusable="false" width="1em" height="1em" style="-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg);" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path fill="none" stroke="#626262" stroke-width="2" d="M9 6l6 6l-6 6"/></svg>'],
-        slideBy: 'page',
-        mouseDrag: true,
-        fixedWidth: element.clientWidth
-        // gutter: 10,
-    
-        // responsive: {
-        //     "350": {
-        //       "items": 1,
-        //       "controls": true,
-        //     },
-        //     "900": {
-        //       "items": 4
-        //     }
-        // },
-    });
+    console.log( element.childElementCount )
+
     document.head.insertAdjacentHTML('beforeend', `<style>
-        #tns${i} > .tns-item {
-            width:${width}px !important;
-        }
+    #tns${i} > .tns-item {
+        width:${width}px !important;
+    }
     </style>` );
 
+    if( element.childElementCount >= 2 ) {
+
+        sliders[i] = tns({
+            container: element,
+            items: 1,
+            nav: true,
+            navPosition: 'bottom',
+            controlsText: ['<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" focusable="false" width="1em" height="1em" style="-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg);" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path fill="none" stroke="#626262" stroke-width="2" d="M15 6l-6 6l6 6"/></svg>', '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" focusable="false" width="1em" height="1em" style="-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg);" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path fill="none" stroke="#626262" stroke-width="2" d="M9 6l6 6l-6 6"/></svg>'],
+            slideBy: 'page',
+            mouseDrag: true,
+            fixedWidth: element.clientWidth,
+            mode:'gallery',
+            animateDelay: 800,
+            speed: 800,
+        });
+    
+    }
     i++;
 })
\ No newline at end of file

blocks/featured-slider/index.js

@@ -166,7 +166,13 @@ const ImageGallery = ({ images, imagesTitle, imagesDescriptions, imagesButtons,
         </div>
     );
 };
+const sliderNumberZero = ( number ) => {
+    if( number < 10 ) {
+        return '0' + number;
+    }
 
+    return number;
+}
 wp.blocks.registerBlockType('hacklab-blocks/featured-slider', {
     title: __('Featured Slider', 'jeo'),
     icon: 'format-gallery',
@@ -255,6 +261,7 @@ wp.blocks.registerBlockType('hacklab-blocks/featured-slider', {
         const { images = [], imagesDescriptions = [], imagesTitle = [], imagesButtons = [] } = attributes;
 
         const displayImages = (images) => {
+            let imagesMax = images.length;
             return (
                 images.map((image, index) => {
 
@@ -272,11 +279,19 @@ wp.blocks.registerBlockType('hacklab-blocks/featured-slider', {
                                         <div className="wrapper">
                                             <div className="wrapper-content">
                                                 <div class="image-meta">
-                                                    <div class="image-title"> <RichText.Content tagName="span" value={imagesTitle[index]} /></div>
-                                                    <div class="image-description"> <RichText.Content tagName="span" value={imagesDescriptions[index]} /></div>
-                                                    <div class="image-button"> <RichText.Content tagName="span" value={imagesButtons[index]} /></div>
+                                                    <div className="image-title"> <RichText.Content tagName="span" value={imagesTitle[index]} /></div>
+                                                    <div className="image-description"> <RichText.Content tagName="span" value={imagesDescriptions[index]} /></div>
+                                                    <div className="image-button"> <RichText.Content tagName="span" value={imagesButtons[index]} /></div>
                                                 </div>
                                             </div>
+                                            <div className="slider-index">
+                                                <span className="current">
+                                                    {sliderNumberZero(index + 1)}
+                                                </span>
+                                                <span className="max">
+                                                    {sliderNumberZero(imagesMax)}
+                                                </span>
+                                            </div>
                                         </div>
                                     </div>
                                 </div>