在引导布局定制光滑滑块

我已经在第一列设置它在一个相当简单的引导布局

<section id="inside" class="section"> 
    <div class="container"> 
    <div class="row"> 
     <div class="col-md-4"> 
     <h3>Some title</h3> 
     <p class="section-subtitle"> 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
     </p> 
     </div> 
     <div class="col-md-8"> 
     <div class="slider center"> 
      <div class="preview-carousel"> 
      <div class="item"> <img src="http://www.al-akaria.com/wp-content/uploads/2016/02/Placeholder-Vertical.jpg" class="img-fluid"></div> 
      <div class="item"> <img src="http://www.al-akaria.com/wp-content/uploads/2016/02/Placeholder-Vertical.jpg" class="img-fluid"></div> 
      <div class="item"> <img src="http://www.al-akaria.com/wp-content/uploads/2016/02/Placeholder-Vertical.jpg" class="img-fluid"></div> 
      <div class="item"> <img src="http://www.al-akaria.com/wp-content/uploads/2016/02/Placeholder-Vertical.jpg" class="img-fluid"></div> 
      <div class="item"> <img src="http://www.al-akaria.com/wp-content/uploads/2016/02/Placeholder-Vertical.jpg" class="img-fluid"></div> 
      <div class="item"> <img src="http://www.al-akaria.com/wp-content/uploads/2016/02/Placeholder-Vertical.jpg" class="img-fluid"></div> 
      </div> 
     </div> 
     </div> 
    </div> 
    </div> 
</section>

所以有点文字，然后滑块在第二栏。我已经设置了滑块向上，像这样，使用中心模式

$('.preview-carousel').slick({ 
    arrows: true, 
    variableWidth: true, 
    centerMode: true, 
    centerPadding: '60px', 
    slidesToShow: 3 
});

我已经在JSFiddle设置的东西，来证明。

有几件事情我正在努力。我在他们的网站上使用他们的中心模式示例，但我正在使用图片而不是文字。所以中心图像上的不透明度比其他图像高，就像他们的例子。但是，一旦您滚动浏览图片并再次点击第一张图片，在将不透明度再次应用于第一张图片之前会有一些暂停。如果你点击右键六次，你可以在我的例子中看到这个。在他们的例子中，他们没有这种延迟。我怎样才能阻止这种延迟发生？

我想知道的第二件事是这样的。我只想在任何时候显示三个图像;中心一侧和任一侧。但是，我希望左边的那个流血到另一列中的文本中，所以基本上文本位于淡出图像的一部分之上。

这将是可能的吗？

任何意见赞赏

感谢

来源

2017-10-15 kate_hudson

使这个slidesToShow值5而不是3 喜欢 -

$('.preview-carousel').slick({ 
arrows: true, 
variableWidth: true, 
centerMode: true, 
centerPadding: '60px', 
slidesToShow: 5 
});

这将正常工作。例如： - https://jsfiddle.net/z69w9u4g/40/

来源

2017-10-16 10:47:12 Rupal

虽然这并没有解决我的问题。我只想要3显示，我需要它渗透到文本 –

我更新了你的小提琴。

https://jsfiddle.net/z69w9u4g/42/

要解决的不透明度设置 “slidesToShow：5” 和 “无限：真正” 作为解决办法。

.slick-slide { 
    opacity:0.6; 
    transition:opacity 300ms ease-out; 
} 
.slick-center { 
    opacity:1!important; 
    transition:opacity 300ms ease-in; 
}

要显示3张图像就需要容器宽度设定为600像素（或取决于IMG大小）。

.container { 
    width: 600px; 
}

无论你想“流血到文本”我不明白。

来源

2017-10-19 14:31:37 grusl83

在引导布局定制光滑滑块

回答

相关问题