title: Can't fix carousel algorithm in react
body: <p>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</p>
  <pre><code>import React from 'react';
  import Slide from './Slide';
  
  import img1 from &quot;../assets/img1.jpg&quot;;
  import img2 from &quot;../assets/img2.jpg&quot;;
  import img3 from &quot;../assets/img3.jpg&quot;;
  import img4 from &quot;../assets/img4.jpg&quot;;
  import img5 from &quot;../assets/img5.jpg&quot;;
  import img6 from &quot;../assets/img6.jpg&quot;;
  
  
  
  class Test extends React.Component {
          state = {
          currentIndex: 0,
          images: [img1, img2, img3, img4, img5, img6]
          }
  
          prevSlide = () =&gt; {
          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 = () =&gt; {
          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 &lt; 6) {
            newImagesArray = newImagesArray.concat(
              this.state.images.slice(0, 6 - newImagesArray.length)
            );
          }
          return (
            &lt;div className=&quot;paint__container&quot;&gt;
              {newImagesArray.map((image, i) =&gt;
                this.state.currentIndex === i ? (
                  &lt;Slide key={i} url={image} alt=&quot;&quot; /&gt;
                ) : null
              )}
                  &lt;div className=&quot;left__arrow&quot; onClick={this.prevSlide}&gt;&lt;/div&gt;
                  &lt;div className=&quot;right__arrow&quot; onClick={this.nextSlide}&gt;&lt;/div&gt;
            &lt;/div&gt;
          );
      }
  }
  
  export default Test;
  
  </code></pre>