Display first card as half from second slide in bxSlider

Question

I am using bxSlider to display a card carousel. My settings -

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

Is there a way that on clicking 'next' I could display the first card as half, too?(without changing the width of the slider)

I am trying to change the value along x-axis as below but the slider stops working.

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

How can I achieve this?

EDIT: A simpler and direct approach to this was provided by 'Karan' and works perfectly. However, I want that this effect should apply only after the user clicks 'next' and not at first display of cards.

My code below -

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

Calling this function on clicking next as-

onSlideAfter: function() {
         translate();

This works fine except that when I click previous and go back to the initial display, it again shows as half.

What am I missing here?

Answer 1

You can add below css to your code. As you are displaying 4.5 slides each slide will get 22.22% width from div. And you want to display half from first and last slides so you will need to 0.25% width from first and last slides. So you can divide 22.22/4 and set margin-left and margin-right.

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

Try it below.

$(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

Call a function on

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