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

如何解决将第一张卡片显示为bxSlider中第二张幻灯片的一半

我正在使用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%' } );
        
    }
  
  
}

在单击下一个as时调用此功能-

onSlideAfter: function() {
         translate();

除了我单击上一个并返回到初始显示后，它再次显示为一半，效果很好。

我在这里想念什么？

解决方法

您可以在CSS下方添加代码。在显示4.5张幻灯片时，每张幻灯片的div宽度为22.22%。而且您想显示half和first幻灯片中的last，因此您需要0.25%和width中的first last幻灯片。因此，您可以划分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>

,

调用一个函数

    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': '' });
    }
    }