jquery slider not sliding good on left side

Question

I want an unlimited slider in my project which i have created using the bellow code. I want the slider to animated left side as same as it animates right side. I have tried to many things to solve the problem but was unsuccessful. For the right click slide animation i had to add some extra slides with if statement and for loop to make it 14 slides, Which is the minimum number of slides required for right animation.

I tried to add extra slides on the left side but after sliding the slider to right side it rested everything. I want it to be an unlimited sliders and I am stuck on the left side.

HTML

$(document).ready(function(){

    var itemwidth = $('main ul li ').width() + 10;
    var movementwidth = itemwidth * 6;
    var length = $('main ul li').length;


    if (length <= 20) {

        for (var i = 0; i < 20 - length; i++) {
          if (i > 11) {
            $('main ul li:nth-child(-n+'+i+')').clone().appendTo('main ul');
          }
      }
    }

    $(".left").click(function(event) {
      $('main ul').animate({left:+movementwidth}, 500, function functionName() {
        $('main ul li:nth-last-child(-n+5)').prependTo('main ul');
        $('main ul').css('left', -itemwidth);
      });
    });

    $(".right").click(function(event) {
      $('main ul').animate({left:-movementwidth}, 500, function functionName() {
        $('main ul li:nth-child(-n+5)').appendTo('main ul');
        $('main ul').css('left', -itemwidth);
      });
    });

  });

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: monospace;
  }

  main {
    min-width: max-content;
    height: 300px;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
  }

  ul {
    position: relative;
    list-style: none;
    display: flex;
    align-items: center;
    margin: 0 auto;
    overflow: hidden;
    background: green;
  }

  li {
    position: relative;
    background: red;
    width: 19.2vw;
    height: 19.99vw;
    margin: 0 7px;
  }

  li span {
    font-size: 4vw;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 2vw;
    height: 4vw;
  }

  main > div {
    font-size: 2vw;
    cursor: pointer;
    margin-right: 25px;
  }

user13046635 · Accepted Answer

Please check following javascript.

$(document).ready(function(){
  var item_width = $('main ul li ').width() + 14;
  var length = $('main ul li').length;
  var move_count = 2;
  var movement_width = item_width * move_count;

  var cloneStr = $('main ul').html();
  $(cloneStr).appendTo('main ul');
  $(cloneStr).prependTo('main ul');
  $('main ul').css('left', -item_width * length );

  $(".left").click(function(event) {
    var moveRight = parseFloat( $('main ul').css('left') )  + movement_width;
    $('main ul').animate({left:moveRight}, 500, function functionName() {
      var rightElems = $('main ul li').slice( -move_count );
      rightElems.clone().prependTo('main ul');
      rightElems.remove();
      $('main ul').css('left', -item_width * length );
    });
  });

  $(".right").click(function(event) {
    var moveLeft = parseFloat( $('main ul').css('left') )  - movement_width;
    $('main ul').animate({left:moveLeft}, 500, function functionName() {
      var leftElems = $('main ul li').slice(0, move_count );
      leftElems.clone().appendTo('main ul');
      leftElems.remove();
      $('main ul').css('left', -item_width * length );
    });
  });

});

move_count means the number of items to move. When your html has been loaded, append current items to before and after. So, ul will have 3 times of items. And once animation has been performed, the first n-items or last n-items will be moved to the last or first according to the direction. For example, if you move right, first move_count items will be moved to the last, and when you click left, last move_count items will be moved to the first.

UPDATED: New Version :

$(document).ready(function(){
    var item_width = $('main ul li ').width() + 14;
    var length = $('main ul li').length;
    var move_count = 2;
    var movement_width = item_width * move_count;

    var cloneStr = $('main ul').html();
    $(cloneStr).appendTo('main ul');
    $(cloneStr).prependTo('main ul');
    $('main ul').css('left', -item_width * length );

    $(".left").click(function(event) {
        moveTo( -move_count );
    });

    $(".right").click(function(event) {
        moveTo( move_count );
    });

    function moveTo( moveCount ){
        var moveLeft = parseFloat( $('main ul').css('left') )  - ( item_width * moveCount );
        $('main ul').animate({left:moveLeft}, 500, function functionName() {
            var moveElems;
            if ( moveCount > 0 ){
                moveElems = $('main ul li').slice(0, moveCount );  
                moveElems.clone().appendTo('main ul');  
            }else{
                moveElems = $('main ul li').slice( moveCount );
                moveElems.clone().prependTo('main ul');
            }
            moveElems.remove();
            $('main ul').css('left', -item_width * length );
        });
    }

});

jquery slider not sliding good on left side

Answers (2)

Related Questions