I have a question about the slide.

I want to dim the "prev" button if i am on the first item, and dim the "next" if i am on the last item. for being last.

my idea:

but my task:

here is my code template:

Next and Prev Button components:

export default function BtnSlider({ direction, moveSlide }) {
  return (
    <button
      onClick={moveSlide}
      className={direction === 'next' ? 'btn-slide next' : 'btn-slide prev'}
    >
      <img src={direction === 'next' ? leftArrow : rightArrow} alt="sa" />
    </button>
  )
}

and here is Slider component:

export default function Slider() {
  const [slideIndex, setSlideIndex] = useState(1)

const dataSlider=[
{
id:0,
title:"First item"
},
{
id:1,
title:"Second item"
},
{
id:2,
title:"Thr item"
},

  const nextSlide = () => {
    if (slideIndex !== dataSlider.length) {
      setSlideIndex(slideIndex   1)
    } else if (slideIndex === dataSlider.length) {
      setSlideIndex(1)
    }
  }

  const prevSlide = () => {
    if (slideIndex !== 1) {
      setSlideIndex(slideIndex - 1)
    } else if (slideIndex === 1) {
      setSlideIndex(dataSlider.length)
    }
  }

  const moveDot = (index) => {
    setSlideIndex(index)
  }


return (
    <>
      <div className="container-slider">
        {dataSlider.map((obj, index) => {
          return (
            <>
              <div
                key={obj.id}
                className={
                  slideIndex === index   1 ? 'slide active-anim' : 'slide'
                }
              >
                <p>{obj.title}</p>         
                  <div className="container-dots">
                    <BtnSlider moveSlide={nextSlide} direction={'next'} />
                    <BtnSlider moveSlide={prevSlide} direction={'prev'} />
                  </div>
              </div>
            </>
          )
        })}
      </div>
    </>
  )
}

and here is css codes:

.container-slider {
  width: 100%;
  height: 650px;
  position: relative;
  overflow: hidden;
  /* padding-top: 60px; */
  /* margin-left: auto;
  margin-right: auto; */
}


.slide {
  width: 100%;
  height: 100%;
  position: absolute;
  display: flex;
  align-items: center;
  opacity: 0;
  transition: opacity ease-in-out 0.4s;
}

.container-dots {
    padding: 10px;
  }
  .btn-slide img {
    width: 30px;
    pointer-events: none;
    padding: 5px;
  }
  .prev {
    width: 30px;
    background-color: transparent;
    border: 1px solid white;
    color: white;
  }
  .next {
    width: 30px;
    background-color: transparent;
    border: 1px solid white;
  }

  .dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 3px solid #f1f1f1;
    margin: 0 5px;
    background: #f1f1f1;
  }
  .dot.active {
    background: rgb(32, 32, 32);
  }
}

thanks for your time!

CodePudding user response：

You'll need a few things.

Functions to determine first and last

Something like this...

const isFirst = () => {
  return slideIndex === 0;
}

const isFirst = () => {
  return slideIndex === dataSlider.length;
}

Another className ternary on each button

Maybe this...

{isFirst() ? 'disabled' : ''}

And...

{isLast() ? 'disabled' : ''}

You may want to pass a property into the button component to indicate whether it's first or last.

CodePudding user response：

1st question: You can change your functions to this

  const nextSlide = () => {
    if (slideIndex !== dataSlider.length) {
      setSlideIndex(slideIndex   1)
    }
  }

  const prevSlide = () => {
    if (slideIndex !== 1) {
      setSlideIndex(slideIndex - 1)
    }
  }

So your slider will not move further when you will reach limits of your dataSlider.

2nd question You can try to add this prop to the props of BtnSlider component

<div className="container-dots">
  <BtnSlider 
    moveSlide={nextSlide} 
    direction={'next'} 
    disable={slideIndex === dataSlider.length}
  />
  <BtnSlider 
    moveSlide={prevSlide} 
    direction={'prev'} 
    disable={slideIndex === 1}
  />
</div>

And then add this parameter to the button

export default function BtnSlider({ direction, moveSlide, disable }) {
  return (
    <button
      onClick={moveSlide}
      disabled={disable}
      className={direction === 'next' ? 'btn-slide next' : 'btn-slide prev'}
    >
      <img src={direction === 'next' ? leftArrow : rightArrow} alt="sa" />
    </button>
  )
}

and you can add this to your css

.button {
        &:disabled {
            color: grey;
        }
}