Question

我正在使用Ken Wheeler的slickslider并使用滑块同步。我实际上是在尝试复制他们在此处使用的slack.com的轮播：https://slack.com/solutions/engineering

我遇到的问题是，当我的高度可变时，滑块同步轮播不喜欢它。当我所有幻灯片的高度都一致时（例如仅300x300的图像），但是一旦我在幻灯片中添加了可能是多个高度的文本（例如两行，三行等）时，它的效果很好。文字会泄漏到另一张幻灯片上。

我已经尝试在活动幻灯片上设置最小高度，以便无论哪个幻灯片都可以解决多余的文字，但似乎无法解决问题。有人对如何解决此问题有一些建议吗？

HTML

<section class="services-slider">
  <div class="nav-container">
    <div class="slider-nav">
      <div>
       <span class="slick-heading">A</span>
      </div>
      <div>
        <span class="slick-heading">B</span>
      </div>
      <div>
        <span class="slick-heading">C</span>
      </div>
      <div>
        <span class="slick-heading">D</span>
      </div>
      <div>
        <span class="slick-heading">E</span>
      </div>
      <div>
        <span class="slick-heading">F</span>
      </div>
    </div>
  </div>  


<div class="main-container">
    <div class="slider slider-main">
      <div>
        <img src="https://i.imgur.com/n2aoTvJ.png"><span class="slick-message">Expt or sdfgt cost or sdfgt cost or or sdfgt cost or sdfgt cost or sdfgt cost or sdfg o.</span>
      </div>
      <div>
        <img src="https://i.imgur.com/n2aoTvJ.png"><span class="slick-message">Expt or sdfgt  cost or sdfgt cost or sdfgt cost or sdfgt cost or sdlore your business your cost or sdfgt cost or sdfgt cost orst or sdfgt cost or sdfgt cost or sdfg o.</span>
      </div>
      <div>
        <img src="https://i.imgur.com/n2aoTvJ.png"><span class="slick-message">Expt or sdfgt cost or sdfgt cost or sdfgt cost or sdfgt cost or sdlore your business your coddst or sdfgt cost or sdfgt cost or sdfgt cost or sdfgt cost or sdfg o..</span>
      </div>
      <div>
        <img src="https://i.imgur.com/n2aoTvJ.png"><span class="slick-message"> sdfgt cost or sdfgt cost or sdfg or obligation.</span>
      </div>
      <div>
        <img src="https://i.imgur.com/n2aoTvJ.png"><span class="slick-message">Exsdfgt cost or sdfgt cost or sdfgt cost or sdfgor obligation.</span>
      </div>
      <div>
        <img src="https://i.imgur.com/n2aoTvJ.png"><span class="slick-message">Explons wit cost or sdfgthout cost or obligation.</span>
      </div>
    </div>
  </div>
</section>

JAVASCRIPT

    $(document).ready(function(){
 $('.slider-main').slick({
  slidesToShow: 1,
  arrows: false,
  asNavFor: '.slider-nav',
  vertical: true,
  autoplay: false,
  verticalSwiping: true,
  centerMode: false
});

$('.slider-nav').slick({
  slidesToShow: 6, 
  arrows:false, 
  asNavFor: '.slider-main',
  vertical: true,
  focusOnSelect: true,
  centerMode: true,
  focusOnSelect: true
});
});

CSS

.slick-slide.slick-current.slick-active { min-height: 400px!important; } 

.slick-slide img { display:inline!important;  margin: 0 auto!important; float:left!important; margin-top:80px!important; margin-left:50px!important;} 
span.slick-message { display: inline-block; color:#ffffff!important; } 

.bold-text { max-width:50px; } 

.main-container { min-width:120%; } 


.slick-slide.slick-current.slick-center:before  {
  background-color:white!important; 
  bottom: 0;
  content: '';
  display: block;
  height: 92%;
  top: 45%;
  left: 92%;
  position: absolute;
  width:32px;
  transform: skewY(-48.5deg);
  transform-origin: 84%;
  z-index: 1;
     transition: all .5s linear;
}


.slick-slide.slick-current.slick-center:after  {
  background-color:white!important; 
  bottom: 0;
  content: '';
  display: block;
  height: 92%;
  top: -45%;
  left: 92%;
  position: absolute;
  width:32px;
  transform: skewY(48.5deg);
  transform-origin: 84%;
  z-index: 1;
     transition: all .5s linear;
}



.slick-slide.slick-current.slick-center .slick-heading { color:#495863!important; } 
.slick-heading { white-space:nowrap; font-size:24px!important; font-weight:normal!important; color:#78B625!important; padding-bottom:0px!important;  } 
.slick-slide.slick-current.slick-center { background-color:#F5F8F8!important; padding-top:15px; padding-bottom:15px!important; padding-left:20px!important; margin-left: -20px!important; } 
.nav-container .slick-slide { padding-top: 24px; padding-bottom: 24px; } 

body {
  background-color: black;
}


.services-slider {
  display: flex;
  max-width: 500px;
}

slider-main {
  width: 100%;
}

.main-container {
  width: 100%;
}


.nav-container .slick-slide {
  max-height: 200px;
}

.services-slider .slick-track {
  margin-left: 50px;
}

滑动滑块传送带与滑块高度冲突

0 个答案: