jean_gaben
@jean_gaben

Что творится с моим slick sliderom?

Есть слайдер, который должен выглядеть вот так:
O-AGB5y6OoQ.jpg
а выглядит он так:
yc84FTN6QoQ.jpg

Прилагаю HTML:

<div class="choose">
    <div class="choose__inner">
      <div class="slider">
        <div class="slider__item">
          <div class="slider__sup-title">
            <p>choose</p>
          </div>
          <div class="slider__title">
            These Best
            Treks For Spring
          </div>
          <div class="slider__text">
            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
              dolore magna aliqua. Quis ipsum su spendisse ultrices gravida. Risus commodo viverra maec enas
              accumsan lacus vel facilisis.
            </p>
          </div>
        </div>
        <div class="slider__item">
          <div class="slider__sup-title">
            <p>choose</p>
          </div>
          <div class="slider__title">
            These Best
            Treks For Spring
          </div>
          <div class="slider__text">
            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
              dolore magna aliqua. Quis ipsum su spendisse ultrices gravida. Risus commodo viverra maec enas
              accumsan lacus vel facilisis.
            </p>
          </div>
        </div>
        <div class="slider__item">
          <div class="slider__sup-title">
            <p>choose</p>
          </div>
          <div class="slider__title">
            These Best
            Treks For Spring
          </div>
          <div class="slider__text">
            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
              dolore magna aliqua. Quis ipsum su spendisse ultrices gravida. Risus commodo viverra maec enas
              accumsan lacus vel facilisis.
            </p>
          </div>
        </div>
        <div class="slider__item">
          <div class="slider__sup-title">
            <p>choose</p>
          </div>
          <div class="slider__title">
            These Best
            Treks For Spring
          </div>
          <div class="slider__text">
            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
              dolore magna aliqua. Quis ipsum su spendisse ultrices gravida. Risus commodo viverra maec enas
              accumsan lacus vel facilisis.
            </p>
          </div>
        </div>
        <div class="slider__item">
          <div class="slider__sup-title">
            <p>choose</p>
          </div>
          <div class="slider__title">
            These Best
            Treks For Spring
          </div>
          <div class="slider__text">
            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
              dolore magna aliqua. Quis ipsum su spendisse ultrices gravida. Risus commodo viverra maec enas
              accumsan lacus vel facilisis.
            </p>
          </div>
        </div>
        <div class="slider__item">
          <div class="slider__sup-title">
            <p>choose</p>
          </div>
          <div class="slider__title">
            These Best
            Treks For Spring
          </div>
          <div class="slider__text">
            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
              dolore magna aliqua. Quis ipsum su spendisse ultrices gravida. Risus commodo viverra maec enas
              accumsan lacus vel facilisis.
            </p>
          </div>
        </div>
      </div>
      <div class="slider-nav">
        <img src="images/bgirl.jpg" alt="girl with binoculars">
        <img src="images/bguy.jpg" alt="guy with binoculars">
        <img src="images/mapguys.jpg" alt="two guys with map">
        <img src="images/bgirl.jpg" alt="girl with binoculars">
        <img src="images/bguy.jpg" alt="guy with binoculars">
        <img src="images/mapguys.jpg" alt="two guys with map">
      </div>
    </div>
  </div>


Прилагаю CSS:

.choose__inner{
  display: flex;
  margin-left: 10%;
  justify-content: space-between;
}
.slider{
  min-width: 0;
  min-height: 0;
}
.slider__sup-title{
  font-size: 35px;
  text-transform: uppercase;
  letter-spacing: -4px;
  color: #a2a2a2;
}
.slider__title{
  font-size: 45px;
  font-weight: 700;
  letter-spacing: -2px;
}
.slider__text{
  font-size: 20px;
  font-weight: 400;
  line-height: 35px;
}
.slider-nav{
  min-width: 0;
  min-height: 0;
}


Я понимаю, что в CSS написано очень мало, но после присвоения контейнеру слайдера flexa у меня картинки были размером 1.4млн px на 1.9млн px, после присвоения элементу внтури контейнера и блоку slider-nav свойства min-width: 0 размеры стали 100к на 100к. Сейчас просто голова плавится - хз, что делать. Поскажите, поалуйста, как можно поправить ситуацию
  • Вопрос задан
  • 75 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы