Question

我正在使用react slick滑块。问题按项目顺序排列：第一个项目渲染为最后一个。但是，如果infinite为false，则第一个项目丢失，最后一个项目为空白。

import React from 'react';
import Slider from "react-slick";

class Slideshow extends React.Component {
    constructor(props) {
        super(props);
        this.state = {}
    }

    render() {
        const { config } = this.props;
        const slideItems = config.items;

        const data = slideItems.map((item,index) => {
            let textStyle = config.textStyle;
            let titleSize = config.titleSize;
            let urlType = config.urlType;
            let showContent = config.showContent;
            let slideItemStyle = {
                "max-height": config.sliderHeight.indexOf("px")==-1?(config.sliderHeight+"px"):config.sliderHeight
            }
            let style = {
                "background-color": config.backgroundColor
            }
            let actionTarget = item.actionTarget ? "_blank" : "_parent";
            return <div className="slide-item">
                <img src={item.imageUrl} style={slideItemStyle}/>
                {showContent &&
                    <div className={`slide-content slide-content-${index} ${textStyle}`} style={style}>

                        <div className="title">
                            {titleSize == "h1" && <h1>{item.title}</h1>}
                            {titleSize == "h2" && <h2>{item.title}</h2>}
                            {titleSize == "h3" && <h3>{item.title}</h3>}
                            {titleSize == "h4" && <h4>{item.title}</h4>}
                        </div>
                        <div className="description">{item.description}</div>
                        {item.url && item.url != "" &&
                            <a
                                href={item.url}
                                className={`action-url ${urlType == "button" ? "more" : ""}`}
                                target={actionTarget}
                            >{item.urlLabel}</a>
                        }
                    </div>
                }
            </div>;
        });

        const settings = {
            dots: (config.navigationState != "none"),
            dotsClass: (config.navigationState == "thumbnails" ? "slick-dots slick-thumb" : "slick-dots"),
            infinite: config.infinite,
            speed: config.speed,
            arrows: config.arrows,
            slidesToShow: 1,
            slidesToScroll: 1,
            autoplay: config.autoplay,
            autoplaySpeed: config.autoplaySpeed,
            fade: (config.animationType == "fade"),
            vertical: false
        };

        if (config.navigationState == "thumbnails") {
            settings.customPaging = function (i) {
                let style = {"background-image":`url(${slideItems[i].imageUrl})`}
                return (
                    <a className="slide-thumbnail-item" style={style}>
                        <img />
                    </a>
                );
            }
        }

        return (
            <Slider {...settings} className={`${config.navigationState} ${config.showNavigationOnSlider?"navigation-on-slide":""} thumbnail-ailgn-${config.thumbnailAnimationAlignment} slidenav-position-${config.slideNavPosition} ${config.animationType=="fade" ? 'carousel slick-slider-fade' : 'carousel'}`}>
                {data}
            </Slider>
        );
    }
}

export default Slideshow;

我进行了搜索，但找不到此类问题。没有任何错误。我正在使用缩略图模式，示例代码在这里： https://react-slick.neostack.com/docs/example/custom-paging/

Answer 1

我也遇到了这个问题。一旦激活无限滚动，将首先渲染最后一个项目。

仅当我动态创建幻灯片时才发生这种情况。（我尝试对幻灯片进行硬编码，并且按预期工作）

我添加了一个条件，仅在创建幻灯片时才渲染滑块：

const {elements} = this.props;

const slides = elements.map((item, i) => (
  <SliderItem  className="sliderItem" key={i} item={item} />
))

var settings = {
  dots: true,
  infinite: true,
  speed: 500,
  slidesToShow: 1,
  slidesToScroll: 1

};
return (
  elements != null && elements.length > 0 && 
  <Slider className="slider" {...settings}>
    {slides}
  </Slider>
);

React-slick滑块项目未按顺序排列-第一个项目显示为最后一个项目

1 个答案: