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

|

14 Discussions

|

  • work_soumyas
     + 0 comments
    import React, { useEffect, useMemo, useState } from "react";

function Slides({ slides }) {
  const [isRestartButton, setIsRestartButton] = useState(false);
  const [isPrevButton, setIsPrevButton] = useState(false);
  const [isNextButton, setIsNextButton] = useState(false);
  const [currentIdx, setCurrentIdx] = useState(0);
  const lastIdx = slides.length - 1;
  const data = useMemo(()=> slides[currentIdx],[currentIdx]);

  useEffect(() => {
    if (slides.length > 1) {
      setIsNextButton(true);
    }
  }, []);

  useEffect(() => {
    setIsRestartButton(currentIdx !== 0);
    setIsPrevButton(currentIdx !== 0);
    setIsNextButton(currentIdx !== lastIdx);
  }, [currentIdx]);

  const handleRestartButton = () => {
    setCurrentIdx(0);
  };

  const handlePrevButton = () => {
    setCurrentIdx(currentIdx - 1);
  };

  const handleNextButton = () => {
    setCurrentIdx(currentIdx + 1);
  };

  return (
    <div>
      <div id="navigation" className="text-center">

        <button 
        data-testid="button-restart" 
        className="small outlined" 
        disabled={!isRestartButton} 
        onClick={handleRestartButton} 
        >
          Restart
        </button>

        <button 
        data-testid="button-prev" 
        className="small" 
        disabled={!isPrevButton} 
        onClick={handlePrevButton}
        >
          Prev
        </button>

        <button 
        data-testid="button-next" 
        className="small" 
        disabled={!isNextButton} 
        onClick={handleNextButton}
        >
          Next
        </button>

      </div>
      
      <div id="slide" className="card text-center">
        <h1 data-testid="title">{data.title}</h1>
        <p data-testid="text">{data.text}</p>
      </div>
    </div>
  );
}

export default Slides;

  • monu844115
     + 0 comments
    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)}>
          Restart
        </button>
        <button data-testid="button-prev" className="small" onClick={()=> setIndex(index > 0 && index-1)} disabled={index == 0}>
          Prev
        </button>
        <button data-testid="button-next" className="small"  onClick={()=> setIndex(index+1)} disabled={index == slides.length-1}>
          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;

  • workwithtss789
     + 0 comments

    I successfully built this React-based slideshow for HackerRank, but I now want to integrate it into my WordPress photography website. Should I use a plugin like WP Reactivate or manually insert it using a shortcode?

  • hyein9007
     + 0 comments
    import React, { useEffect, useMemo, useState } from "react";

function Slides({ slides }) {
  const [isRestartButton, setIsRestartButton] = useState(false);
  const [isPrevButton, setIsPrevButton] = useState(false);
  const [isNextButton, setIsNextButton] = useState(false);
  const [currentIdx, setCurrentIdx] = useState(0);
  const lastIdx = slides.length - 1;
  const data = useMemo(()=> slides[currentIdx],[currentIdx]);

  useEffect(() => {
    if (slides.length > 1) {
      setIsNextButton(true);
    }
  }, []);

  useEffect(() => {
    setIsRestartButton(currentIdx !== 0);
    setIsPrevButton(currentIdx !== 0);
    setIsNextButton(currentIdx !== lastIdx);
  }, [currentIdx]);

  const handleRestartButton = () => {
    setCurrentIdx(0);
  };

  const handlePrevButton = () => {
    setCurrentIdx(currentIdx - 1);
  };

  const handleNextButton = () => {
    setCurrentIdx(currentIdx + 1);
  };

  return (
    <div>
      <div id="navigation" className="text-center">
        <button data-testid="button-restart" className="small outlined" disabled={!isRestartButton} onClick={handleRestartButton}>
          Restart
        </button>
        <button data-testid="button-prev" className="small" disabled={!isPrevButton} onClick={handlePrevButton}>
          Prev
        </button>
        <button data-testid="button-next" className="small" disabled={!isNextButton} onClick={handleNextButton}>
          Next
        </button>
      </div>
      <div id="slide" className="card text-center">
        <h1 data-testid="title">{data.title}</h1>
        <p data-testid="text">{data.text}</p>
      </div>
    </div>
  );
}

export default Slides;

  • BingoBeast
     + 0 comments

    import React, { useState } from 'react';

    function Slides({ slides }) { const [currentSlide, setCurrentSlide] = useState(0);

    const handleNext = () => { if (currentSlide < slides.length - 1) { setCurrentSlide(currentSlide + 1); } };

    const handlePrev = () => { if (currentSlide > 0) { setCurrentSlide(currentSlide - 1); } };

    const handleRestart = () => { setCurrentSlide(0); };

    return ( Restart Prev Next {slides[currentSlide].title} {slides[currentSlide].text}

    ); }

    export default Slides;