Переопределить ответную загрузочную карусель - PullRequest
Новая
       30

Переопределить ответную загрузочную карусель

0 голосов
/ 24 октября 2019

Мне нужно настроить карусель, изменив значки «Следующая / Предыдущая» и индикаторы. Я должен скрыть следующий значок, когда я второй элемент, и скрыть предыдущий значок, когда я в первом. При смене предметов мне также нужно вызвать функцию, которая отображает jsx. Это мой код: 

render() {
    return(

myfunction(){
    console.log('test')
}
myfunction2(){
    console.log('test2')
}

<Col className="comumn-my-info">                    
                <Carousel style={{textAlign: "center"}}>
                    <Carousel.Item onSelect={this.myfunction()}>
                    <Row>
                        <Col className={"title-my-info"}>
                            Name
                        </Col>
                    </Row>
                    <Row>
                        <Col>
                            <img
                            className="image-my-info"
                            src={profile}
                            alt="Profile"
                            />
                            <Row style={{height: "20em"}}>
                            </Row>
                        </Col>
                    </Row>
                    </Carousel.Item>
                    <Carousel.Item onSelect={this.myfunction2()}>
                        <Row>
                            <Col className={"title-app"} style={{left: "1.5em"}}>
                                Piggie Bank
                            </Col>
                        </Row>
                        <Row>
                            <Col>
                                <img
                                className="image-my-info"
                                src={piggie}
                                alt="Piggie Bank"
                                />
                                <Row style={{height: "20em"}}>
                                </Row>
                            </Col>
                        </Row>
                        <Row>
                            <Carousel.Caption>
                                <Row>
                                    <h3>Other content</h3>
                                    <p>My description.</p>
                                </Row>
                            </Carousel.Caption>
                        </Row>
                    </Carousel.Item>
                </Carousel>
            </Col>

            )
           }
          }

, и это мой css: 

 .column-my-info{
     overflow-x: hidden;
     overflow-y: hidden;
     display: flex;
     align-items: center;
     justify-content: center;
     height: 100vh;
 }

 .title-my-info {
     color: black;
     font-size: 50px;
     font-weight: bold;
     opacity: 0.75;
     text-align: center;
     height: 160px;
     top: 30px;
 }

 .image-my-info {
     width: 45%;
 }

 .carousel-indicators li{
     background-color:black !important;
     position: relative !important;
     bottom: 1em !important;
     width: 10px !important;
     height: 10px !important;
     border-radius: 100% !important;
 }

 .carousel-control-prev-icon{
     background-image: url("../../../../assets/arrow-1.png") !important;
     border-image: none !important;
     position: relative;
     top: -4em;
 }

 .carousel-control-next-icon{
     background-image: url("../../../../assets/arrow-2.png") !important;
     border-image: none !important;
     position: relative;
     top: -4em;
 }

Проблема в том, что я переопределяю классы реагировать на загрузку во внешнем файле css, и теперь я нене знаю, как изменить это динамически. Например, мне нужно скрыть значок carousel-control-next-icon, когда я нахожусь во втором пункте. Я даже не знаю, как отобразить другой контент при смене элемента. Любой совет приветствуется.

...