Стиль реагировать-slick.neostack - PullRequest
Новая
       23

Стиль реагировать-slick.neostack

0 голосов
/ 19 марта 2020

slick.neostack к ползунку, и ползунок импортирует, но я ничего не вижу, и это появляется, поскольку стилизация вызывает это. Но когда я пытаюсь стилизовать свою страницу, я не могу "нацелить" классы, которые я хочу использовать. Я попытался взглянуть на этот пример: act-slick: Импорт CSS из slick-carousel завершился неудачей , и мне удалось получить файлы в моем проекте, но я все еще не могу выбрать нужный класс для создания стиля.

У кого-нибудь есть идеи?

Это мой код карусели: 

const settings = {
    arrows: true,
    infinite: false, // Stannar på sista
    slidesToShow: 1, // visa en åt gången
    slidesToScroll: 1, // scrolla en framåt
    autoplay: false,
    speed: 1000, // speed i själva scrollen
    autoplaySpeed: 7000, // hur länge varje bild visas
  } 
  return (
    <div className="carouselContainer">
      <Slider {...settings}>
        <div className="sliderContainer">   
        <div className="poses"> 
          <span className="poseTitle">
            <h3>{startPoseImage.name}</h3>
            <h4>{startPoseImage.sanskritname}</h4>
          </span>
          <span className="imageContainer">
            <img src={startPoseImage.image} alt={startPoseImage.name}/>
          </span>
          <p>{startPoseImage.description}</p>
        </div>
        </div>
      <div className="sliderContainer"> 
        {finalPoses.map((image) => {
          return (
          <div className="poses" key={image.id}>
            <span className="poseTitle">
              <h3>{image.name}</h3>
              <h4>{image.sanskritname}</h4>
            </span>
            <span className="imageContainer">
              <img src={image.image} alt={image.name} />
            </span>
              <p>{image.description}</p>
              <p>{image.extraMessage}</p> 
            </div>   
            )  
          })}
          </div>
        <div className="sliderContainer"> 
          <div className="poses"> 
          <span className="poseTitle">
            <h3>{finishPoseImage.name}</h3>
            <h4>{finishPoseImage.sanskritname}</h4>
          </span>  
          <span className="imageContainer">   
            <img src={finishPoseImage.image} alt={finishPoseImage.name} />
          </span>
          <p>{finishPoseImage.description}</p>
          </div>
          </div>
        </Slider>
        <button onClick={() => history.goBack()} className="backLink">
          Back
        </button>
      </div>
    )
  }

1 Ответ

0 голосов
/ 21 марта 2020

Я мог бы решить мою проблему с помощью добавления стилей к ползунку прямо в настройках. Например: 

const settings = {
    arrows: true,
    infinite: false, // Stannar på sista
    slidesToShow: 1, // visa en åt gången
    slidesToScroll: 1, // scrolla en framåt
    autoplay: true,
    speed: 1000, // speed i själva scrollen
    autoplaySpeed: 7000, // hur länge varje bild visas
    adaptiveHeight: true,
    className: "center",
    centerMode: true,
    centerPadding: "60px",
  }
...