Как бы установить свойство CSS в качестве условия в операторе if?

Question

У меня проблема с установкой свойства CSS в качестве условия оператора if.

Моя цель - сбросить значения определенного div, когда условие выполнено. Например, когда свойство left у .inline-grid становится равным -200% или 200%, каждый раз устанавливайте для свойства left значение 0, чтобы оно выглядело как повторяющееся содержимое навсегда.

Поэтому я попытался сравнить свойство CSS между значением, но оно не сработало.

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

Это мой код.

* При просмотре SOF произошла ошибка при запуске моего кода. Вы можете проверить это в CodePen .

$(function swipeInit() {
  /* Variables */
  var _ = $('#swipe > .container > .grid > .inline-grid'),
      myList = _.find('ul'),
      myItem = myList.find('li'),
      beforeClone = myItem.first().before(myItem.last().clone()),
      afterClone = myItem.last().after(myItem.first().clone());

  /* Actions */
  var swipeAction = () => {
        myList.animate({
          left: '-=' + 100 + '%'
        }, () => {
          /* -- This part doesn't work -- */
          if (myList.css('left') == (-200 + '%')) {
            myList.css({
              left: 500 + '%'
            });
          }
          /* -- This part doesn't work -- */
        });
      }
      swipeLoop = setInterval(() => {
        swipeAction();
      }, 2000);
	
  /* Logs */
  console.log(myList);
})

* {
    margin: 0;
    padding: 0;
}

ul li {
    list-style: none;
}
#swipe {

}
.container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-flow: row;
    justify-content: center;
}
.grid {
    position: relative;
    width: 1170px;
    height: 100%;
    border: 1px dashed black;
}
.inline-grid {
    position: relative;
    width: 100%;
    height: 100%;
}
.cell {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-flow: row;
    justify-content: center;
}
._contents {
    position: relative;
    width: 100%;
    height: 100%;
    flex-shrink: 0;
}

<!-- Swipe -->
<section id="swipe">
  <div class="container">
    <div class="grid">
      <div class="inline-grid">
        <ul class="cell">
          <li class="_contents">
            <p>Test Swipe Title 1</p>
            <p>consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
          </li>
          <li class="_contents">
            <p>Test Swipe Title 2</p>
            <p>consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
          </li>
          <li class="_contents">
            <p>Test Swipe Title 3</p>
            <p>consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
          </li>
        </ul>
      </div>
    </div>
  </div>
</section>
<!-- /end Swipe -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 1

Вам нужно будет получить width из ul и получить -200% от этого значения в пикселях.Затем вы сравниваете left с тем, что получили.

Изменения

var ulWidth = myList.width()
if (parseInt(myList.css('left')) == parseInt(ulWidth * -2)) {
    myList.css({
        left: 100 + '%'
    });
}
$(window).resize(function() {
    ulWidth = myList.width();
});

CodePen