We use cookies to ensure you have the best browsing experience on our website. Please read our cookie policy for more information about how we use cookies.
  1. Prepare
  2. React
  3. Components
  4. Slideshow
  5. Discussions

Slideshow

Sort by

recency

|

34 Discussions

|

  • Thakshila
     + 0 comments

    my solution

    function Slides({ slides }) {
  const [currentSlideIndex, SetReset] = React.useState(0);

  function handleReset(){
      SetReset(0);
  }

  function handleNext(){
    SetReset(currentSlideIndex => ++currentSlideIndex);
  }

  function handlePrevious(){
    SetReset(currentSlideIndex => --currentSlideIndex);

  }

  return (
    <div>
      <div id="navigation" className="text-center">
        <button data-testid="button-restart" className="small outlined" disabled = {currentSlideIndex === 0}
          onClick={() => handleReset()} >
          Restart
        </button>
        <button data-testid="button-prev" className="small" disabled = {currentSlideIndex === 0} onClick={() => handlePrevious()}>
          Prev
        </button>
        <button data-testid="button-next" className="small" disabled = {currentSlideIndex ===  slides.length - 1} onClick={() => handleNext()}>
          Next
        </button>
      </div>
      <div id="slide" className="card text-center">
        <h1 data-testid="title">{slides[currentSlideIndex].title}</h1>
        <p data-testid="text">{slides[currentSlideIndex].text}</p>
      </div>
    </div>
  );
}

export default Slides;

  • prajwallokhande3
     + 0 comments

    Simple Solution:

    import React, { useState } from "react";

function Slides({ slides }) {

  const[index,setIndex] = useState(0)
  
  return (
    <div>
      <div id="navigation" className="text-center">
        <button data-testid="button-restart" className="small outlined" onClick={()=>{setIndex(0)}}
        disabled={index==0?true:false}>
          Restart
        </button>
        <button data-testid="button-prev" className="small"
        onClick={()=>{setIndex((pre)=>pre-1)}}
        disabled={index==0?true:false}>
          Prev
        </button>
        <button data-testid="button-next" className="small"
        onClick={()=>{setIndex((pre)=>pre+1)}}
        disabled={index==slides.length-1?true:false}>
          Next
        </button>
      </div>
      <div id="slide" className="card text-center">
        <h1 data-testid="title">{slides[index].title}</h1>
        <p data-testid="text">{slides[index].text}</p>
      </div>
    </div>
  );
}

export default Slides;
****

  • mohamedhosamabd1
     + 1 comment

    here is my answer 

    function Slides({ slides }) {

  const [firstSlide, setFirstSlide] = useState(0)

  const nextSlide = () => {
    let silde = firstSlide ;
    silde++;
    setFirstSlide(silde)
  }
  const prevSlide = () => {
    let silde = firstSlide ;
    silde--;
    setFirstSlide(silde)
  }

  return (
    <div>
      <div id="navigation" className="text-center">
        <button disabled={firstSlide === 0} 
                onClick={() => setFirstSlide(0)}
         data-testid="button-restart" className="small outlined">
          Restart
        </button>
        <button disabled={firstSlide === 0} onClick={prevSlide}  data-testid="button-prev" className="small">
          Prev
        </button>
        <button disabled={firstSlide === (slides.length - 1)} onClick={nextSlide}  data-testid="button-next" className="small">
          Next
        </button>
      </div>
      <div id="slide" className="card text-center">
        <h1 data-testid="title"> {slides[firstSlide].title} </h1>
        <p data-testid="text">{slides[firstSlide].text}</p>
      </div>
    </div>
  );
}

  • poonamdeorasurp1
     + 0 comments

    Here is a basic Javascript project for practice Stopwatch code in Javascript

  • 36_akashroy
     + 1 comment

    Here is the cleaned up solution:

    import React, { useEffect, useState } from "react";

function Slides({ slides }) {
  const [index, setIndex] = useState(0);
  const [disableRestart, setDisableRestart] = useState(true);
  const [disableNext, setDisableNext] = useState(false);
  const [disablePrev, setDisablePrev] = useState(true);

  const slidesLength = slides?.length - 1;

  const slideTitle = slides?.[index]?.title;
  const slideText = slides?.[index]?.text;

 useEffect(() => {
  setDisableRestart(index === 0);
  setDisablePrev(index === 0);
  setDisableNext(index === slidesLength);
}, [index, slidesLength]);


  const handleRestart = () => {
    if (index > 0) {
      setIndex(0)
    }
  }

  const handleNextSlide = () => {
    if (index < slidesLength) {
      setIndex(prev => prev + 1)
    }
  }

  const handlePrevSlide = () => {
    if (index <= slidesLength && index !== 0) {
      setIndex(prev => prev - 1)
    }
  }

  return (
    <div>
      <div id="navigation" className="text-center">
        <button data-testid="button-restart" className="small outlined" onClick={() => handleRestart()} disabled={disableRestart}>
          Restart
        </button>
        <button data-testid="button-prev" className="small" onClick={() => handlePrevSlide()} disabled={disablePrev}>
          Prev
        </button>
        <button data-testid="button-next" className="small" onClick={() => handleNextSlide()} disabled={disableNext}>
          Next
        </button>
      </div>
      <div id="slide" className="card text-center">
        <h1 data-testid="title">{slideTitle}</h1>
        <p data-testid="text">{slideText}</p>
      </div>
    </div>
  );
}

export default Slides;