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

Question

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

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

有没有一种方法可以在单击 'next' 时将第一张卡片也显示为一半？（不改变滑块的宽度）

我正尝试如下更改沿 x 轴的值，但滑块停止工作。

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

我怎样才能做到这一点？

编辑： 'Karan' 提供了一种更简单直接的方法，并且效果很好。但是，我希望这种效果只在用户单击 'next' 之后应用，而不是在第一次显示卡片时应用。

我的代码如下-

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 slides 时，每个 slide 将从 div 获得 22.22% 宽度。你想显示 half 来自 first 和 last slides 所以你需要 0.25% width 来自 first和 last slides。所以你可以 divide 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': '' });
    }
    }

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

Display first card as half from second slide in bxSlider

jquery

bxslider