Can't fix carousel algorithm in react

Question

I have a carousel of slides in my react.js project without using any libraries. When I use an odd amount of images everything works. But when I use even amount, although currentIndex is changing properly only odd images are displayed like 1,3,5 in this example with six images. Can anyone spot what is wrong with my code so it would work with ane amount of images not only with odd ones? Thanks very much

import React from 'react';
import Slide from './Slide';

import img1 from "../assets/img1.jpg";
import img2 from "../assets/img2.jpg";
import img3 from "../assets/img3.jpg";
import img4 from "../assets/img4.jpg";
import img5 from "../assets/img5.jpg";
import img6 from "../assets/img6.jpg";



class Test extends React.Component {
        state = {
        currentIndex: 0,
        images: [img1, img2, img3, img4, img5, img6]
        }

        prevSlide = () => {
        const lastIndex = this.state.images.length - 1;
        const resetIndex = this.state.currentIndex === 0;
        const index = resetIndex ? lastIndex : this.state.currentIndex - 1;
        this.setState({
          currentIndex: index
        });
      };

      nextSlide = () => {
        const lastIndex = this.state.images.length - 1;
        const resetIndex = this.state.currentIndex === lastIndex;
        const index = resetIndex ? 0 : this.state.currentIndex + 1;
        this.setState({
          currentIndex: index
        });
      };
    
      render() {
        const index = this.state.currentIndex;
        let newImagesArray = this.state.images.slice(index, index + 6);
        if (newImagesArray.length < 6) {
          newImagesArray = newImagesArray.concat(
            this.state.images.slice(0, 6 - newImagesArray.length)
          );
        }
        return (
          <div className="paint__container">
            {newImagesArray.map((image, i) =>
              this.state.currentIndex === i ? (
                <Slide key={i} url={image} alt="" />
              ) : null
            )}
                <div className="left__arrow" onClick={this.prevSlide}></div>
                <div className="right__arrow" onClick={this.nextSlide}></div>
          </div>
        );
    }
}

export default Test;

So far I didn't spot any bug, but can you post the full code with how images are rendered, and if there is a place where the state could be changing from? — Louay Al-osh
– Louay Al-osh, Commented Jan 7, 2021 at 19:01
Maybe because of my English I am not sure what You need but here is a link to github and it is component Emotes.js in components folder: github.com/Pietrzi/strona-piotrb — Pietrzi
– Pietrzi, Commented Jan 7, 2021 at 19:24

Louay Al-osh · Accepted Answer · 2021-01-08 09:17:46Z

1

okay, thank you for providing the full code, looking at the component on github

we can find

you have nextSlide defined twice, where the second I guess will overwrite the first declaration
while you have the currentIndex in state why you are searching for the target slide in your render function? you don't have to do this my friend, while currentIndex correctly calculate the index then you just render the slide at that index, that's why we are using react after all

render() {
    const index = this.state.currentIndex;
    const images = this.state.images;

    return (
        <div className="paint__container">
            <Slide url={images[index]} alt="" />
            <div className="left__arrow" onClick={this.prevSlide}></div>
            <div className="right__arrow" onClick={this.nextSlide}></div>
        </div>
    );
}

edited Jan 8, 2021 at 9:17

answered Jan 7, 2021 at 19:37

Louay Al-osh

3,43721 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Louay Al-osh Over a year ago

Okay, I updated the answer, my mistake, i was the key passed to Slide component, but because we are not using Slide from an array anymore, we can remove it.

Collectives™ on Stack Overflow

Can't fix carousel algorithm in react

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related