Есть готовый слайдер Slick slider меняется только изображение, нужно что б в блоке поверх слайдера менялся текст «для кухни», «для спальни» и цена?

Question

[Andreyweb30]

Нужно чтобы при клике на следующий слайд, менялся слайд и текст "для кухни", "для спальни" и цена?

<!-- slider -->
          <div class="header_slider">
            <div class="slider_bg">
              <img src="img/header-bg.png" alt="">
            </div>
            <div class="slider_bg">
              <img src="img/header-bg-2.png" alt="">
            </div>
            <div class="slider_bg">
              <img src="img/header-bg-3.png" alt="">
            </div>
            <div class="slider_bg">
              <img src="img/header-bg-4.png" alt="">
            </div>
          </div>
  <!-- slider--end -->  
<!-- header product--title -->
      <div class="product">
        <div class="product__item">
          ФОТООБОИ
        </div>
        <div class="product__item-wrapper">
          <div class="product__item">
            Для зала
          </div>
          <div class="product__item">
            от <span>50</span> $/м<sup>2</sup>
          </div>
      </div>
        <div class="product__item-subtitle">
          Более 6000 идей фотообоев <br> для ГОСТИНОЙ
          <button class="btn_product">Смотреть идеи</button>
        </div>
       </div>
    <!-- header product--title end-->  
--------js--------

$(document).ready(function(){
  $('.header_slider').slick({
    dots:true,
  });
});

Comments

[WapSter]

Разделом ошибся тебе вот сюда

[Антон]

переверстать и засунуть все в слайд

[Andreyweb30]

Антон, Спасибо, просто думал есть другие варианты .

[Антон]

Andreyweb30, есть, но это самое правильное

Answer 1

[Евгений]

убираем отдельный блок header product--title и добавляем в слайдер блок с заголовками

Answer 2

[Andreyweb30]

Всем спасибо переверстал , все закинул в слайдер , стили поправил все получилось.