Как правильно позиционировать жатку на карусельной загрузке в реакции JS - PullRequest
Новая
       15

Как правильно позиционировать жатку на карусельной загрузке в реакции JS

0 голосов
/ 01 ноября 2019

Я использую реагирующий загрузчик Carousal в качестве моего слайдера, и я хочу, чтобы мой заголовок был над моим слайдером, но когда я делаю свой заголовок поверх своего слайдера и фиксирую его, тогда карусель рассматривает его как свой элемент, и он делает мой заголовоквести себя как новое изображение в слайдере

Для этого я создал отдельный компонент для carousal и импортирую свой заголовок в carousal. 

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
import React from 'react'

import imageOne from '../../assets/images/b4.jpg'
import imageTwo from '../../assets/images/b3headerslider.jpg'
import Header from '../header/header'

import Carousel from 'react-bootstrap/Carousel'


export default ()=>{

    return(
        <>

<Carousel>
  
  <Carousel.Item>
    <img
      className="d-block w-100 "
      src={imageOne}
    />
    
    <Carousel.Caption>
      <h3>First slide label</h3>
      <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
    </Carousel.Caption>
    
  </Carousel.Item>
 
  <Carousel.Item>
    <img
      className="d-block w-100 "
     src={imageTwo}
    />

    <Carousel.Caption>
      <h3>Second slide label</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </Carousel.Caption>
  </Carousel.Item>
 
  
<Header/>
</Carousel>

        </>

    );

}

Я хочу, чтобы мой заголовок был зафиксирован поверх ползунка, и не хочу, чтобы карусель считала его своим элементом и заставляла мой заголовок вести себя как новое скользящее изображение enterописание изображения здесь

введите описание изображения здесь

введите описание изображения здесь

...