Fixed #2076 click issue in Fade mode

akiran · Feb 8, 2024 · ec32089 · ec32089
1 parent 1a3f604
commit ec32089
Showing 1 changed file with 22 additions and 23 deletions.
diff --git a/src/track.js b/src/track.js
@@ -67,6 +67,7 @@ const getSlideStyle = spec => {
       style.left = -spec.index * parseInt(spec.slideWidth);
     }
     style.opacity = spec.currentSlide === spec.index ? 1 : 0;
+    style.zIndex = spec.currentSlide === spec.index ? 999 : 998;
     if (spec.useCSS) {
       style.transition =
         "opacity " +
@@ -137,9 +138,7 @@ const renderSlides = spec => {
     // if slide needs to be precloned or postcloned
     if (spec.infinite && spec.fade === false) {
       let preCloneNo = childrenCount - index;
-      if (
-        preCloneNo <= getPreClones(spec) 
-      ) {
+      if (preCloneNo <= getPreClones(spec)) {
         key = -preCloneNo;
         if (key >= startIndex) {
           child = elem;
@@ -163,27 +162,27 @@ const renderSlides = spec => {
         );
       }
 
-        key = childrenCount + index;
-        if (key < endIndex) {
-          child = elem;
-        }
-        slideClasses = getSlideClasses({ ...spec, index: key });
-        postCloneSlides.push(
-          React.cloneElement(child, {
-            key: "postcloned" + getKey(child, key),
-            "data-index": key,
-            tabIndex: "-1",
-            className: classnames(slideClasses, slideClass),
-            "aria-hidden": !slideClasses["slick-active"],
-            style: { ...(child.props.style || {}), ...childStyle },
-            onClick: e => {
-              child.props && child.props.onClick && child.props.onClick(e);
-              if (spec.focusOnSelect) {
-                spec.focusOnSelect(childOnClickOptions);
-              }
+      key = childrenCount + index;
+      if (key < endIndex) {
+        child = elem;
+      }
+      slideClasses = getSlideClasses({ ...spec, index: key });
+      postCloneSlides.push(
+        React.cloneElement(child, {
+          key: "postcloned" + getKey(child, key),
+          "data-index": key,
+          tabIndex: "-1",
+          className: classnames(slideClasses, slideClass),
+          "aria-hidden": !slideClasses["slick-active"],
+          style: { ...(child.props.style || {}), ...childStyle },
+          onClick: e => {
+            child.props && child.props.onClick && child.props.onClick(e);
+            if (spec.focusOnSelect) {
+              spec.focusOnSelect(childOnClickOptions);
             }
-          })
-        );
+          }
+        })
+      );
     }
   });