Question

我有一个光滑的滑块。每张幻灯片中都应包含随幻灯片而变化的文本。

<section class="block block__center-slick">
<div class="wrapper block__center-slick__wrapper">
  <h1 class="block__title">And they lived Halcyon ever after</h1>
  <div class="block__center-slick__slider">
    <div class="slide" style="background-image: url(images/center1.png);">
      <p class="block__center-slick__txt block__center-slick__txt--show">
        11111The smallest detail really makes the biggest impact. Months ago, as I was moving in, I casually
        remarked
        about the chemicals used for lawn care. Yesterday I got a notice from management saying they’ve moved to
        organic
        lawn products. It was my first #HalcyonMoment, but from what my fellow tenants say, I should get used to it.
      </p>
    </div>
    <div class="slide" style="background-image: url(images/center2.png);">
      <p class="block__center-slick__txt">
        222222The smallest detail really makes the biggest impact. Months ago, as I was moving in, I casually
        remarked
        about the chemicals used for lawn care. Yesterday I got a notice from management saying they’ve moved to
        organic
        lawn products. It was my first #HalcyonMoment, but from what my fellow tenants say, I should get used to it.
      </p>
    </div>
    <div class="slide" style="background-image: url(images/center3.png);">
      <p class="block__center-slick__txt">
        33333The smallest detail really makes the biggest impact. Months ago, as I was moving in, I casually
        remarked
        about the chemicals used for lawn care. Yesterday I got a notice from management saying they’ve moved to
        organic
        lawn products. It was my first #HalcyonMoment, but from what my fellow tenants say, I should get used to it.
      </p>
    </div>
  </div>
</div>

    .block__center-slick {
  padding-top: 153px;
  padding-bottom: 200px;



.block__title {
    border-bottom: 2px solid $black;
    margin-bottom: 62px;

&:before {
  content: '';
  border-bottom: 7px solid $black;
  position: absolute;
  bottom: -8px;
  left: 0px;


    width: 10%;
    }
  }



.block__center-slick__txt {
    display: none;
  }

  .block__center-slick__slider {
    position: relative;



    .slide {
      height: 521px;
      width: 383px;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
    }

.slick-arrow {
  position: absolute;
}

.slick-current {
  height: 572px;
  width: 420px;
  margin: 0 91px;
}

.slick-track {
  display: flex;
  align-items: center;


  }
  }
}


.block__center-slick__wrapper {
  padding: 0 277px;
}

.block__center-slick__txt--show {
  display: block !important;
}



     //slider in section block__center-slick
  $('.block__center-slick__slider').slick({
    centerMode: true,
    centerPadding: '10px',
    slidesToShow: 2,
    slidesToScroll: 1,
    infinite: true,
    variableWidth: true,
    variableHeight: true
  });

  let centerSlide = $('.block__center-slick__slider').find('.slide');
  let prev = $('.block__center-slick__slider').find('.slick-prev');
  let next = $('.block__center-slick__slider').find('.slick-next');

  next.on('click', () => {


    let txt = $('.block__center-slick__txt');
    txt.removeClass('block__center-slick__txt--show');

    let current = centerSlide.find('.slick-center');
    console.log(current);

    let curTxt = current.find('.block__center-slick__txt');
    curTxt.addClass('block__center-slick__txt--show');

  });

现在，我设法使滑块起作用。另外，对于js，当我单击下一步按钮时，文本消失，并且在滑块更改后，将显示其文本。这行不通。有什么想法吗？如您所见，我打印了当前项目，并在控制台中显示了当前项目。我猜问题出在应该在下一个滑块的文本上添加类的部分中。我无法使它正常工作。

滑动更改当前滑块以更改文本

0 个答案: