Слайдер слайдер рендерит слайд несколько раз в reactjs - PullRequest
Новая
       74

Слайдер слайдер рендерит слайд несколько раз в reactjs

0 голосов
/ 25 января 2020

Я создаю скользкий слайдер, используя reactjs. Слайдер работает нормально, но он делает слайд несколько раз. Я зацикливаю слайд с помощью функции карты.

снимки экрана:

enter image description here

мои сценарии: 

import React, {Component} from 'react';
import Slider from "react-slick";
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";
import '../css/Header.css';
//import SlideItem from './SlideItem';
class SliderSlick extends Component{

    shouldComponentUpdate () {
      // TODO: add proper implementation that compares objects
      return false;
    }

    render() {

       //Slide Items
        var sliderItem = ['slider1.jpg','slider2.jpg','slider3.jpg'];

        var settings = {
          autoplay: false,
          dots: true,
          infinite: true,
          slidesToShow: 1,
          slidesToScroll: 1,
          speed: 1000,

        };


        return (
          <div className="container">
          <Slider {...settings}>
            {
              sliderItem.map((item,index) => {
                return (
                    <div data-index={index} key={index}>
                        <img src={process.env.PUBLIC_URL + '/images/'+item} alt="Continental GT 650" />
                    </div>
                )
              })
            }
          </Slider>
          </div> 
        );
      }
}

export default SliderSlick;

что я делаю не так?

1 Ответ

1 голос
/ 25 января 2020

Это не ошибка, это функция для лучшей производительности с анимацией в последнем элементе и следующем первом! Вот как работает скользкий слайдер Infinite-L oop. Если слайдер будет только клонировать изображения / div, это приведет к проблемам с производительностью. Теперь, если вы действительно не хотите клонировать изображения / div, вам нужно установить 

infinite: false

или 

infinite: sliderItem.length > 3 // may be best solution
...