光滑的旋转木马 - 显示旋转木马盒内的盒子

我使用的是slick carousel，我认为这是一个非常好的图书馆。光滑的旋转木马 - 显示旋转木马盒内的盒子

但是，我面临的问题与我需要实现的模板。

基本上，我需要的光滑转盘，显示部分next和prev幻灯片（这是可以做到增加一些属性时华而不实被初始化），但问题是，我需要我的旋转木马是与具体尺寸。

所以，旋转木马需要放在一个1200像素的盒子里面（主滑片需要1200宽度并保持高度为自动，这样我才不会变形），部分幻灯片可以扩展到屏幕边缘。

这里有代码笔一个简单的例子（2种方法，所以检查的意见，看他们俩）：https://codepen.io/nickimola/pen/xrRraW

标记：

HTML

<div class="carousel-container"> 
    <img src="https://unsplash.it/960/442/?image=0" /> 
    <img src="https://unsplash.it/960/442/?image=10" /> 
    <img src="https://unsplash.it/960/442/?image=11" /> 
</div>

减CSS

.carousel-container { 
    width: 100%; 
    margin: 0 auto; 
    height: 442px; 
    img { 
    max-width:1200px; 
    } 
}

CoffeeScript的

$(document).ready -> 
    $('.carousel-container').slick({ 
    infinite: true, 
    centerPadding: '60px', 
    slidesToShow: 1, 
    slidesToScroll: 3, 
    centerMode: true, 
    autoplay: true, 
    autoplaySpeed: 5000 
    })

显然，解决方案必须干净，没有什么哈克（修改库文件不是的解决方案。

我也使用引导，如果它可以帮助一下。

感谢您的任何帮助或建议

来源

2017-06-15 Nick

好吧伙计我想我明白了。

下面是更新后的代码：

HTML

<div class="carousel-container"> 
    <img src="https://unsplash.it/1200/442/?image=0" /> 
    <img src="https://unsplash.it/1200/442/?image=10" /> 
    <img src="https://unsplash.it/1200/442/?image=11" /> 
</div>

LESS

img{ 
    max-width:1200px; 
    width:1200px; 
} 

.slick-slide{ 
    opacity: 0.6; 
    &.slick-current{ 
     opacity: 1; 
    } 
}

CoffeeScript的

$(document).ready -> 
    $('.carousel-container').slick({ 
    infinite: true, 
    centerPadding: '60px', 
    slidesToShow: 1, 
    slidesToScroll: 1, 
    centerMode: true, 
    autoplay: true, 
    autoplaySpeed: 5000, 
    variableWidth: true // This one did the trick! 
    })

所以很明显，事实证明，如果我允许光滑的属性有一个可变的宽度，宽度可以使用CSS正确指定。

如果您现在查看示例，您可以看到我的意思：https://codepen.io/nickimola/pen/xrRraW

来源

2017-06-16 15:52:35 Nick

光滑的旋转木马 - 显示旋转木马盒内的盒子

回答

相关问题