0

У меня есть слайдер для мобильного и dots выставленные через ablosute и все красиво, но при изменение контента ( количество текста в слайде ) все ломается. На скриншоте показана проблема ( https://i.sstatic.net/vtWRQ.jpg ).

Вот css точек:

.slick-dots{
        display: flex;
        position: absolute;
        align-items: flex-end;
        text-align: center;
        left: 0; right: 0;
        bottom: 46px;
    }

html:

<div class="reviews">
    <div class="container">
      <div class="reviews__bg-img"></div>
      <div class="reviews__line"></div>
      <div class="reviews__items">
        <div class="reviews__item">
          <img src="images/reviews-people.png" alt="img" class="reviews__img">
          <div class="reviews__box">
            <h4 class="reviews__title">I have invested in 15<br> companies, 9 of which have<br> since had follow-on
              rounds<br> at higher valuations, and 2<br> of which are nearing an exit.</h4>
            <div class="reviews__name-box">
              <p class="reviews__name">Rolf Garde</p>
              <p class="reviews__role">Investor</p>
            </div>
          </div>
          <p class="reviews__text">When I came to Israel, I venturedWhen I came to Israel, I venturedWhen I came to
            Israel, I venturedWhen I came to Israel, I ventured on a journey to learn more about Startup Nation and
            never intended to invest, but after 3 days in Tel Aviv and meeting iAngels, I couldn’t resist investing
            with them. Now I have invested in 15 companies, 9 of which have since had follow-on rounds at higher
            valuations, and 2 of which are nearing an exit so I can definitely recommend both Israel and iAngels.
          </p>
        </div>
        <div class="reviews__item">
          <img src="images/reviews-people.png" alt="img" class="reviews__img">
          <div class="reviews__box">
            <h4 class="reviews__title">I have invested in 15<br> companies, 9 of which have<br> since had follow-on
              rounds<br> at higher valuations, and 2<br> of which are nearing an exit.</h4>
            <div class="reviews__name-box">
              <p class="reviews__name">Rolf Garde</p>
              <p class="reviews__role">Investor</p>
            </div>
          </div>
          <p class="reviews__text">When I came to Israel, I ventured on a journey to learn more about Startup Nation
            and never intended to invest, but after 3 days in Tel Aviv and meeting iAngels, I couldn’t resist
            investing with them. Now I have invested in 15 companies, 9 of which have since had follow-on rounds at
            higher valuations, and 2 of which are nearing an exit so I can definitely recommend both Israel and
            iAngels.</p>
        </div>
      </div>
    </div>
  </div>

SCSS:

@media(max-width:768px){
.reviews{
    margin-top: 0;
    padding-bottom: 0;
    margin-bottom: 30px;
    &__item{
        max-width: 310px !important;
        display: block !important;
        margin: 15px auto;
        background: #FFFFFF;
        box-shadow: 0px 0px 14px 4px rgba(0, 0, 0, 0.12);
        border-radius: 4px;
        padding: 45px 29px 90px 29px;
        position: relative;
    }
    &__img{
        max-width: 128px;
        height: 128px;
        margin-bottom: 43px;
    }
    &__box{
        margin: 0;
    }
    &__title{
        margin: 0;
        max-width: 252px;
        width: 100%;
        text-align: center;
        font-size: 16px;
        line-height: 18px;
        padding-bottom: 35px;
        position: relative;
        &::before{
            position: absolute;
            content: '';
            max-width: 252px;
            width: 100%;
            height: 2px;
            background: #4CBCBF;
            bottom: 0;
            left: 0; right: 0;
            margin: 0 auto;
        }
    }
    &__text{
        text-align: justify;
        font-size: 16px;
        line-height: 20px;
        margin-top: 35px;
        z-index: 2;
    }
    &__name , &__role{
        font-size: 16px;
        line-height: 20px;
    }
    &__name-box{
        position: absolute;
        left: 173px;
        top: 80px;
        width: 120px;
    }
    &__line{
        display: none;
    }
    .slick-dots{
        display: flex;
        position: absolute;
        align-items: flex-end;
        text-align: center;
        left: 0; right: 0;
        bottom: 46px;
        z-index: 1;
    }
    .a-right{
        display: none;
    }
    .a-left{
        display: none;
    }
}

}

js :

 $('.reviews__items').slick({
    fade: true,
    autoplay:true,
    slidesToShow: 1,
    dots: true,
    arrows: true,
    prevArrow:"<img class='a-left control-c prev slick-prev' src='images/left.svg' id='prv'>",
    nextArrow:"<img class='a-right control-c next slick-next' src='images/right.svg' id='nxt'>",
    responsive: [
      {
        breakpoint: 768,
        settings: {
          fade: true,
          autoplay:true,
          slidesToShow: 1,
          dots: true,
          arrows: false,
        }
      }
    ]
  });
2
  • больше кода можно?
    – Miha
    Commented 26 июл. 2022 в 14:45
  • Сейчас добавлю html слайдера и стили под мобилку Commented 26 июл. 2022 в 14:47

1 ответ 1

0

В общем я понял , что написать оболочку ( белый контейнер ) в slider-item и поэтому она скакала в зависимости от слайда, что бы это исправить просто перенес оболочку белую с slider-item в slider-items , таким образом оболочка выставляется размером не зависимо от контента слайда ( ставится от самого большого контента ) и dots выравнивается по нем

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.