Элементы слайдера React-Slick упорядочены - первый элемент отображается как последний. - PullRequest
Новая
       28

Элементы слайдера React-Slick упорядочены - первый элемент отображается как последний.

1 голос
/ 04 июня 2019

Я использую скользящий слайдерПроблема в порядке элементов: первый элемент отображается как последний.Но если бесконечное значение ложно, первый элемент отсутствует, а последний элемент - пробел. 

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 /

1 Ответ

0 голосов
/ 05 июня 2019

У меня тоже была эта проблема. Как только была активирована бесконечная прокрутка, последний элемент отображался первым.

Это произошло только тогда, когда я создал слайды динамически. (Я попытался жестко запрограммировать слайды, и все заработало как положено)

Я добавил условие для отображения ползунка только тогда, когда слайды были созданы: 

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>
);
...