jquery ползунок плохо скользит по левой стороне

Question

Мне нужен неограниченный слайдер в моем проекте, который я создал с помощью приведенного ниже кода. Я хочу, чтобы слайдер анимировал левую сторону так же, как он анимирует правую сторону. Я пытался много вещей, чтобы решить проблему, но безуспешно. Для анимации слайдов правой кнопкой мыши мне пришлось добавить несколько дополнительных слайдов с оператором if и l oop, чтобы сделать его 14 слайдами, что является минимальным количеством слайдов, необходимых для правильной анимации.

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

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;
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<main>
  
  <ul>
    <li><span>1</span></li>
    <li><span>2</span></li>
    <li><span>3</span></li>
    <li><span>4</span></li>
    <li><span>5</span></li>
    <li><span>6</span></li>
    <li><span>7</span></li>
  </ul>
  <div class="left">

  </div>
  <div class="right">

  </div>
  <div class="left">
    left
  </div>
  <div class="right">
    right
  </div>
</main>

Answer 1

Пожалуйста, проверьте следующее 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 означает количество перемещаемых предметов. Когда ваш html был загружен, добавляйте текущие элементы до и после. Таким образом, ul будет иметь 3 раза предметов. И как только анимация будет выполнена, первые n-элементы или последние n-элементы будут перемещены в последний или первый в соответствии с направлением. Например, если вы двигаетесь вправо, первые элементы move_count будут перемещены в последний, а при нажатии влево последние элементы move_count будут перемещены в первый.

ОБНОВЛЕНО: Новая версия :

$(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 );
        });
    }

});

Answer 2

Различный сценарий будет происходить для скольжения справа налево. У нас есть два сценария: 1. Перемещение слайдов вправо состоит из анимации слайда вправо, а затем удаления n большинства элементов левой стороны и добавления их в правую часть списка. 2. Перемещение слайдов влево состоит из удаления n большинства правых элементов и добавления их в левую часть списка, а затем анимации слайда в левую сторону.

Пожалуйста, посмотрите на следующие коды:

$(document).ready(function(){
    var itemsToMove = 2;
    var itemwidth = $('main ul li ').width() + 10;
    var movementwidth = itemwidth * itemsToMove;
    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').css('left', -movementwidth);
      $('main ul li:nth-last-child(-n+'+itemsToMove+')').prependTo('main ul');
      $('main ul').animate({left:0}, 500, function functionName() {
        $('main ul').css('left', 0);
      });
    });

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

  });

* {
    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;
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<main>
  
  <ul>
    <li><span>1</span></li>
    <li><span>2</span></li>
    <li><span>3</span></li>
    <li><span>4</span></li>
    <li><span>5</span></li>
    <li><span>6</span></li>
    <li><span>7</span></li>
  </ul>
  <div class="left">

  </div>
  <div class="right">

  </div>
  <div class="left">
    left
  </div>
  <div class="right">
    right
  </div>
</main>