Style react-slick.neostack

Question

slick.neostack to a slider, and the slider imports but I cant see anything and it appears as the styling is causing that. But when I am trying to style my page I cant "target" the classes that I want to use. I tried to look at this example: react-slick: Import CSS from slick-carousel fails and managed to get the files into my project but I still cant target the right class to make the styling work.

Does anyone have any ideas?

This is my carousel code:

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>
    )
  }

score 0 · Answer 1 · answered Mar 21 '20 at 13:39

I could solve my problem with adding styling to the slider directly in the settings. For example:

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",
  }

Style react-slick.neostack

1 Answers1