add conditionals

kitconcept · Dec 20, 2023 · efce58c · efce58c
1 parent ea0271f
commit efce58c
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 7 deletions.
diff --git a/news/40.feature b/news/40.feature
@@ -1 +1 @@
-Add `single-slide` classname to improve styling @danalvrz
+Add conditionals around arrow and dot buttons, and hide them, if there is only one slide @danalvrz
diff --git a/src/components/View.jsx b/src/components/View.jsx
@@ -96,9 +96,7 @@ const SliderView = (props) => {
   return (
     <>
       <div
-        className={cx('block slider', className, {
-          'single-slide': data.slides?.length === 1,
-        })}
+        className={cx('block slider', className)}
         style={{ '--slider-container-width': `${sliderContainerWidth}px` }}
       >
         {(data.slides?.length === 0 || !data.slides) && isEditMode && (
@@ -112,7 +110,7 @@ const SliderView = (props) => {
         {data.slides?.length > 0 && (
           <>
             <div className="slider-wrapper">
-              {!data.hideArrows && (
+              {!data.hideArrows && data.slides?.length > 1 && (
                 <>
                   <PrevButton onClick={scrollPrev} disabled={prevBtnDisabled} />
                   <NextButton onClick={scrollNext} disabled={nextBtnDisabled} />
@@ -143,7 +141,7 @@ const SliderView = (props) => {
                 </div>
               </div>
             </div>
-
+            {data.slides?.length > 1 && (
             <div className="slider-dots">
               {scrollSnaps.map((_, index) => (
                 <DotButton
@@ -155,7 +153,7 @@ const SliderView = (props) => {
                   )}
                 />
               ))}
-            </div>
+            </div>)}
           </>
         )}
       </div>
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		Add `single-slide` classname to improve styling @danalvrz
		Add conditionals around arrow and dot buttons, and hide them, if there is only one slide @danalvrz