Slick Slider картинка слева и текст справа?

Question

[by_ultra]

Всем доброго дня.
Большая просьба помочь в решении не сложного вопроса, над которым бьюсь несколько часов(

<div class="container">
         <div class="banner-section__inner">
            <div class="banner-section__slider">
               <div class="banner-section__slider-item">
                  <div class="banner-section__slider-left">
                     <img class="banner-section__slider-img" src="images/content/2385930 1.png" alt="banner">
                  </div>
                  <div class="banner-section__slider-right">
                     <h1 class="banner-section__slider-title">
                        Unleash your child’s creativity
                     </h1>
                     <p class="banner-section__slider-text">
                        Verta Creative Academy offers interactive learning opportunities for kids.
                     </p>
                     <p class="banner-section__slider-text">
                        We bring out the fun in art and education, allowing students to make the most of their screen
                        time.
                     </p>
                  </div>
               </div>

               <div class="banner-section__slider-item">
                  <div class="banner-section__slider-left">
                     <img class="banner-section__slider-img" src="images/content/2385930 1.png" alt="banner">
                  </div>
                  <div class="banner-section__slider-right">
                     <h1 class="banner-section__slider-title">
                        Unleash your child’s creativity
                     </h1>
                     <p class="banner-section__slider-text">
                        Verta Creative Academy offers interactive learning opportunities for kids.
                     </p>
                     <p class="banner-section__slider-text">
                        We bring out the fun in art and education, allowing students to make the most of their screen
                        time.
                     </p>
                  </div>
               </div>
            </div>
         </div>
      </div>

.banner-section__slider-img {
   border-radius: 23px;
}

.banner-section__slider-title {
   color: $title-color;
   @include Gae700;
   font-size: 64px;
   line-height: 64px;
   letter-spacing: -0.06em;
   width: 450px;
}

.banner-section__slider-text {
   font-size: 17px;
   line-height: 26px;
   color: #4f4f4f;
   @include Got400;
   width: 450px;
}

Никак не могу перебросить текст справа от картинки и чтобы картинка и текст переключались вместе, пробовал через flex и прочее в чем накосячил ?

Большое Вам Спасибо.

Comments

[Ankhena]

В приложенном вами коде вообще нет стилей banner-section__slider-item, поэтому сложно сказать что не получается.

Единственное предположение, помнится, слик перебивал display у слайдов.
Если это так, то просто сделать ещё одну обертку и флекс/грид задавать уже ей.

p.s. ну и слик малось устарел.

[by_ultra]

Ankhena,
Могу узнать, какой сейчас slider более актуален ?

Спасибо.

[Ankhena]

by_ultra, swiper.js

[by_ultra]

Ankhena,
Благодарю :)