Кнопка nextArrow и prevArrow не работают в ответной реакции - PullRequest
Новая
       10

Кнопка nextArrow и prevArrow не работают в ответной реакции

0 голосов
/ 22 мая 2018

Я использую реагирующее пятно в моем приложении activjs.Я пытаюсь внедрить стрелки следующего и предыдущего в слайдер.Но это не работает.Вот мой код

Вот моя переменная "settingss", которая применяется к 

var settingss ={
    infinite: false,
    slidesToScroll: 1,
    slidesToShow: 3,
    arrows:true,
    prevArrow: document.getElementsByClassName("a-left"),
    nextArrow: document.getElementsByClassName("a-right"),
    variableWidth: false,
    responsive: [{
        breakpoint: 920,
        settings: {
            slidesToShow: 1,
            slidesToScroll: 1,
            // arrows: true,

        }
    }]
}

, а вот мой код слайдера.

return  <div className={`card-item ${container_class}`}>
    <div className="bg">
        <div className="arrows">
            <div className="a-left">
                <span className="fa fa-chevron-left"></span>
            </div>
            <div className="a-right">
                <span className="fa fa-chevron-right"></span>
            </div>
        </div>
        <div className="dp-circle"></div>
        <div className="dp-name">John
            <div className="dp-location">NYC</div>
        </div>
    </div>
    <Slider {...settingss} className="fg-items">
        {item.activities.map((item1,i)=>{
            return <div className="react-inter">
                <div className="img"></div>
                <div className="info">
                    <div className="caption">
                        This is for test
                    </div>
                    <div className="tags">
                        <div className="visual">Visual</div>
                        <div className="visual">Text</div>
                        <div className="visual">Edited</div>
                    </div>
                    <div className="buttons">
                        <div className="tick">
                            <span className="fa fa-check"></span>
                        </div>
                        <div className="cross">
                            <span className="fa fa-times"></span>
                        </div>
                    </div>
                </div>
            </div>
        })}
    </Slider>
</div>

Я пользуюсь инструкциями согласно документации.Что я делаю неправильно?

1 Ответ

0 голосов
/ 22 мая 2018

Из документации здесь: https://react -slick.neostack.com / docs / example / custom-arrow похоже, что вы должны просто поместить стрелки внутрь компонента без состояния и ссылаться на них в своемнастройки.В документации не объясняется, что они должны быть компонентами, а не узлами DOM, и не применяются какие-либо типы проп.

...