Блог

Я использую 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();
  

Это работает нормально, за исключением того, что когда я нажимаю предыдущий и возвращаюсь к первоначальному отображению, он снова отображается как половина.

Чего мне здесь не хватает?

Вы можете добавить приведенный ниже css в свой код. При отображении 4.5 слайдов каждый слайд будет иметь 22.22% ширину от div. И вы хотите отображать 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': '' });
    }
    }