在bxSlider中将第一张卡片显示为第二张幻灯片的一半

Question

我正在使用bxSlider来显示卡片转盘。我的设置-

var carousel = {
minSlides: 4.5,
maxSlides: 4.5,
slideWidth: 250,
pager: false,
moveSlides: 4,
speed:2000,
hideControlOnEnd:true
}

有没有办法在点击"下一张"时也可以将第一张卡显示为一半？(不改变滑块的宽度(

我正试图更改x轴上的值，如下所示，但滑块停止工作。

.slider{
transform: translate3d(-900px, 0px, 0px) !important;
}

我怎样才能做到这一点？

编辑："Karan"提供了一种更简单、直接的方法，效果非常好。然而，我希望这种效果应该只在用户点击"下一步"后才适用，而不是在第一次显示卡片时。

我下面的代码-

function translate(){
var current = carousel.getCurrentSlide();
if(current>=1){
$('div.slider')
.css({'margin-left': '5.56%','margin-right': '5.56%' } );

}


}

点击下一步调用此函数为-

onSlideAfter: function() {
translate();

这很好，只是当我单击上一个并返回到初始显示时，它再次显示为一半。

我在这里错过了什么？

Answer 1

您可以在代码中添加以下css。当您显示4.5幻灯片时，每张幻灯片都将从div中获得22.22%宽度。并且您希望从first和last幻灯片中显示half，因此您需要从first和last幻灯片中选择0.25%和width。因此，您可以划分22.22/4并设置margin-left和margin-right。

div.bxslider {
margin-left: 5.56%;
margin-right: 5.56%;
}

请在下面试试。

$(document).ready(function() {
$('.bxslider').bxSlider({
minSlides: 4.5,
maxSlides: 4.5,
slideWidth: 250,
pager: false,
moveSlides: 4,
speed:2000,
hideControlOnEnd:true
});
});

div.bxslider {
margin-left: 5.56%;
margin-right: 5.56%;
}

<script type="text/javascript" src="//code.jquery.com/jquery-2.1.0.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://bxslider.com/lib/jquery.bxslider.css">
<div class="bxslider">
<div class="slide"><img src="http://placehold.it/1000x680/112233/ffffff?text=FooBar1" /></div>
<div class="slide"><img src="http://placehold.it/1000x680/ee5678/ffffff?text=FooBar2" /></div>
<div class="slide"><img src="http://placehold.it/1000x680/435ab6/ffffff?text=FooBar3" /></div>
<div class="slide"><img src="http://placehold.it/1000x680/11cc22/ffffff?text=FooBar4" /></div>
<div class="slide"><img src="http://placehold.it/1000x680/ffa500/ffffff?text=FooBar5" /></div>
<div class="slide"><img src="http://placehold.it/1000x680/cc44ff/ffffff?text=FooBar6" /></div>
</div>

Answer 2

调用上的函数

onSlideBefore: function () {
translateprev();
} //to undo the changes
function translateprev() {
var current = carousel.getCurrentSlide();
if (current < 1) {
console.log("IF")
$('div.slider')
.css({ 'margin-left': '', 'margin-right': '' });
}
}