Flexbox Carousel-从第一个孩子而不是第二个孩子开始活动幻灯片

Question

我目前正在创建一个flexbox传送带。

我正在使用CSS3管理从一张幻灯片到另一张幻灯片的过渡，这是通过添加过渡和转换属性以及“ left：-100％”来实现的。

但是，当我加载滑块时，第一个幻灯片始终是第二个孩子，因为它具有“ order：2”属性以及包含“ left：-100％;”的父元素。

如何更改jQuery，以便最后一张幻灯片从“ order：1;”开始而不是“ order：8;”，将第一个孩子设置为“ order：2;”然后单击上一个/下一个按钮时，顺序是增加还是减少？

这是我的代码：

(function ($) {
  $.fn.flexCarousel = function(options) {
    var settings = $.extend({
      arrows: true,
      arrowsOverlay: false,
      autoplay: false,
      autoplaySpeed: 5000,
      circles: false,
      circlesOverlay: false,
      nextArrow: '<i class="fas fa-arrow-circle-right"></i>',
      prevArrow: '<i class="fas fa-arrow-circle-left"></i>',
      slidesVisible: 1,
    }, options);

    $(".flexCarousel-slides").addClass("flexCarousel-animate");

    var onLeftClick = function() {
      toggleReverse(true);
      toggleAnimate();
      setOrder("left");
      setTimeout(toggleAnimate, 50);
    };

    var onRightClick = function() {
      toggleReverse(false);
      toggleAnimate();
      setOrder("right");
      setTimeout(toggleAnimate, 50);
    };

    var flexCarousel = $(".flexCarousel-slides");

    var flexCarouselSlide = $(".flexCarousel-slide");

    var toggleReverse = function(check) {
      if (check === true) {
        flexCarousel.addClass("flexCarousel-reverse");
      } else {
        flexCarousel.removeClass("flexCarousel-reverse");
      }
    };

    var toggleAnimate = function() {
      flexCarousel.toggleClass("flexCarousel-animate");
    };

    var setOrder = function(direction) {
      if (direction === "left") {
        flexCarouselSlide.each(function() {
          var convertedOrder = parseInt($(this).css("order"));
          var orderDecrease = convertedOrder + 1;
          if (convertedOrder === flexCarouselSlide.length) {
            $(this).css("order", "1");
          } else {
            $(this).css("order", orderDecrease);
          }
        });
      } else if (direction === "right") {
        flexCarouselSlide.each(function() {
          var convertedOrder = parseInt($(this).css("order"));
          var orderIncrease = convertedOrder - 1;
          if (convertedOrder === 1) {
            $(this).css("order", flexCarouselSlide.length);
          } else {
            $(this).css("order", orderIncrease);
          }
        });
      }
    };

    flexCarouselSlide.each(function() {
      var index = $(this).index() + 1;
      $(this).css("order", index);
    });

    $(".flexCarousel-prev").click(onLeftClick);
    $(".flexCarousel-next").click(onRightClick);
  };
})(jQuery);

$(document).ready(function() {
  $(".flexCarousel").flexCarousel();
});

.flexCarousel {
  display: flex;
  height: 200px; }
  .flexCarousel.has-overlay {
    position: relative; }

.flexCarousel-next.is-overlay,
.flexCarousel-prev.is-overlay {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1; }

.flexCarousel-next .icon,
.flexCarousel-prev .icon {
  align-items: center;
  color: rgba(0, 0, 0, 0.25);
  cursor: pointer;
  display: inline-flex;
  font-size: 2rem;
  height: 2rem;
  justify-content: center;
  width: 2rem; }
  .flexCarousel-next .icon:hover, .flexCarousel-next .icon.is-active,
  .flexCarousel-prev .icon:hover,
  .flexCarousel-prev .icon.is-active {
    color: rgba(0, 0, 0, 0.5); }

.flexCarousel-next:not(.is-overlay),
.flexCarousel-prev:not(.is-overlay) {
  align-items: center;
  display: flex;
  flex-grow: 1;
  justify-content: center; }

.flexCarousel-prev.is-overlay {
  left: 5%; }

.flexCarousel-next.is-overlay {
  right: 5%; }

.flexCarousel-thumbnails:not(.is-overlay) {
  display: flex;
  justify-content: center;
  margin-top: 1rem; }

.flexCarousel-thumbnails.is-overlay {
  bottom: 5%;
  display: flex;
  justify-content: center;
  position: absolute;
  width: 100%; }

.flexCarousel-thumbnails .flexCarousel-thumbnail {
  color: rgba(0, 0, 0, 0.25);
  cursor: pointer;
  flex: none; }
  .flexCarousel-thumbnails .flexCarousel-thumbnail:not(:last-child) {
    margin-right: 0.5rem; }
  .flexCarousel-thumbnails .flexCarousel-thumbnail:hover, .flexCarousel-thumbnails .flexCarousel-thumbnail.is-active {
    color: rgba(0, 0, 0, 0.5); }

.flexCarousel-container {
  display: flex;
  flex-direction: column;
  flex-grow: 20;
  overflow: hidden;
  position: relative; }

.flexCarousel-slides {
  display: flex;
  left: -100%;
  flex-grow: 1;
  position: relative;
  transform: translateX(100%); }

.flexCarousel-reverse {
  transform: translateX(-100%); }

.flexCarousel-animate {
  transform: none;
  transition: all 250ms ease-in-out; }

.flexCarousel-slide {
  align-items: center;
  background-color: tomato;
  display: flex;
  flex-grow: 1;
  justify-content: center;
  order: 2; }
  .flexCarousel-slide:last-child {
    order: 1; }

.flexCarousel-num-1 .flexCarousel-slide {
  min-width: calc(100% / 1); }

.flexCarousel-num-2 .flexCarousel-slide {
  min-width: calc(100% / 2); }

.flexCarousel-num-3 .flexCarousel-slide {
  min-width: calc(100% / 3); }

.flexCarousel-num-4 .flexCarousel-slide {
  min-width: calc(100% / 4); }

.flexCarousel-num-5 .flexCarousel-slide {
  min-width: calc(100% / 5); }

.flexCarousel-num-6 .flexCarousel-slide {
  min-width: calc(100% / 6); }

.flexCarousel-num-7 .flexCarousel-slide {
  min-width: calc(100% / 7); }

.flexCarousel-num-8 .flexCarousel-slide {
  min-width: calc(100% / 8); }

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="flexCarousel">
  <div class="flexCarousel-prev"><span class="icon"><i class="fa fa-arrow-circle-left"></i></span></div>
  <div class="flexCarousel-container">
    <div class="flexCarousel-slides flexCarousel-num-1">
      <div class="flexCarousel-slide">1</div>
      <div class="flexCarousel-slide">2</div>
      <div class="flexCarousel-slide">3</div>
      <div class="flexCarousel-slide">4</div>
      <div class="flexCarousel-slide">5</div>
      <div class="flexCarousel-slide">6</div>
      <div class="flexCarousel-slide">7</div>
      <div class="flexCarousel-slide">8</div>
    </div>
  </div>
  <div class="flexCarousel-next"><span class="icon"><i class="fa fa-arrow-circle-right"></i></span></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Codepen：https://codepen.io/tomhartley97/pen/wQKdYY

提前谢谢