javascript - 旋转木马 slider 不适用于 Flexbox

Question

我正在尝试使用简单的 HTML、CSS 和 Javascript 制作 slider /旋转木马。我正在使用 Flexbox，这就是问题所在。点击箭头移动幻灯片时，没有动画，只是弹出新图片，没有向左滑动。

关于 CSS，一切都是 Flexboxed，所以我看到的任何指南都没有太大帮助。在试用 Flexbox/Carousel 教程时，它们使我的代码复杂得多。

这是我的代码。

(function() {

  var sliderWidth = $('.carousel-cells').width();

  var Carousel = {
    props: {
      current_slide: null,
      total_slides: null
    },
    init: function() {

      Carousel.bindEvents();
    },
    bindEvents: function() {
      $(".carousel-next").on("click", function() {
        Carousel.next();
      });
      $(".carousel-prev").on("click", function() {
        Carousel.previous();
      });
      $(document).keydown(function(e) {
        if (e.keyCode === 37) {
          Carousel.previous();
        }
      });
      $(document).keydown(function(e) {
        if (e.keyCode === 39) {
          Carousel.next();
        }
      });
    },
    next: function() {

      $('.carousel-cells').animate({
          left: -sliderWidth
        }, 500,
        function() {
          $('article:first-child').appendTo('.carousel-cells');
          $('article').css('left', '');
        });
    },
    previous: function() {

      $('.carousel-cells').animate({
        left: +sliderWidth
      }, 500, function() {
        $('article:last-child').prependTo('.carousel-cells');
        $('article').css('left', '');
      });
    },
    update: function() {
      //will add code
    }
  }
  $(function() {
    Carousel.init();
  })
})(window);

body {
  background-color: #e2e2e2;
  height: 100vh;
}

.page-content {
  padding-top: 50px;
}

.page-content .main-carousel {
  width: 100vw;
  height: 400px;
  overflow: hidden;
  position: relative;
  z-index: 1;
}

.page-content .main-carousel .carousel-next,
.page-content .main-carousel .carousel-prev {
  position: absolute;
  top: 50%;
  padding: 20px;
  background-color: rgba(200, 200, 200, 1);
  cursor: pointer;
  margin-top: -25px;
}

.page-content .main-carousel .carousel-next {
  right: 0;
}

.page-content .main-carousel .carousel-prev {
  left: 0;
}

.page-content .main-carousel .carousel-cells {
  width: 99999px;
  height: 100%;
  display: inline-flex;
  flex-direction: row;
}

.page-content .main-carousel .carousel-cells article {
  width: 100vw;
  height: 100%;
  /*float:left;*/
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  background-image: url('../img/slide-background.jpg');
}

.column-content {
  display: flex;
  flex-direction: column;
  background-color: #f2f2f2;
  padding: 4vh 0 4vh 0;
}

.column-content h1 {
  margin: 0 0vh 2vh 6vh;
  font-size: 4vh;
}

.three-columns {
  display: flex;
  /*   -webkit-columns: 4 300px;
          -moz-columns: 4 250px;
         columns: 4 250px;*/
  justify-content: space-between;
  margin: 0 6vh 0vh 6vh;
}

.list-block h3 {
  margin-bottom: 2vh;
  padding-top: 1vh;
}

li {
  list-style-type: none;
}

.slide-text h1 {
  font-size: 8vh;
}

@media only screen and (max-width: 767px) {
  .three-columns {
    flex-flow: row wrap;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="page-content">
  <section class="main-carousel">
    <div class="carousel-next">&gt;</div>
    <div class="carousel-prev">&lt;</div>
    <div class="carousel-cells">
      <article>
        <div class="slide-text">
          <h1>Slide One</h1>
          <p>A slide about sliding slides.</p>
        </div>
      </article>
      <article>
        <div class="slide-text">
          <h1>Slide Two</h1>
          <p>A slide-sliding slider sliding slides.</p>
        </div>
      </article>
      <article>
        <div class="slide-text">
          <h1>Slide Three</h1>
          <p>A slide-sliding slider sliding slides.</p>
        </div>
      </article>
    </div>
  </section>
  <section class="column-content">
    <h1>Three Columns</h1>
    <div class="three-columns">
      <aside class="list-block">
        <h3>List Heading</h3>
        <ul>
          <li>List Item</li>
          <li>List Item</li>
          <li>List Item</li>
          <li>List Item</li>
          <li>List Item</li>
        </ul>
      </aside>
      <aside class="list-block">
        <h3>List Heading</h3>
        <ul>
          <li>List Item</li>
          <li>List Item</li>
          <li>List Item</li>
          <li>List Item</li>
          <li>List Item</li>
        </ul>
      </aside>
      <aside class="list-block">
        <h3>List Heading</h3>
        <ul>
          <li>List Item</li>
          <li>List Item</li>
        </ul>
      </aside>
      <aside class="list-block">
        <h3>List Heading</h3>
        <ul>
          <li>List Item</li>
          <li>List Item</li>
          <li>List Item</li>
        </ul>
      </aside>
    </div>
  </section>
</div>

我查看了这个以寻求指导:https://codepen.io/anon/pen/mwYoOm?editors=0110这非常有帮助，但由于我使用的是 Flexbox，所以它无法正常工作。

对于要采取什么行动或者简单的 Javascript 可以使其正常工作，您有什么建议吗？非常感激!

Answer 1

我在下面的代码中评论了我的更改。有待改进的地方:

• 您的选择器。您不能像那样定位 "article"，它可能定位您页面中与您的画廊无关的某些“文章”元素。相反，您应该尝试 1. 将您的画廊存储为一个属性，而不是将其定位为 "article" child ，例如:Carousel.$slider.find("article")<
• 通过通常使用 ".carousel-cells"，您将自己限制在每页只有一个画廊。相反，看看 Authoring a jQuery Plugin .
• 网站是响应式，您不能将sliderWidth 用作常量 - 最终尝试重新计算点击时的宽度...

(function() {

  var sliderWidth = $('.carousel-cells').width();

  var Carousel = {
    init: function() {
      Carousel.bindEvents();
      
      // You're missign the initial insertion
      // and the negative margin (like in the codepen)
      // This helps to go prev without nuisances. 
      $('.carousel-cells').css({marginLeft: -sliderWidth});
      $('article:last-child').prependTo('.carousel-cells');
    },
    bindEvents: function() {
      $(".carousel-next").on("click", Carousel.next);
      $(".carousel-prev").on("click", Carousel.previous);
      $(document).on("keydown", function(e) { // you need only one listener
        var key = e.which; // Use Event.which instead of keyCode
        if (key===37) Carousel.previous();
        if (key===39) Carousel.next();
      });
    },
    next: function() {
      $('.carousel-cells').animate({
        left: -sliderWidth
      }, 500, function() {
        $('article:first-child').appendTo('.carousel-cells');
        // you don't want to reset left of "article" but ".carousel-cells"
        $('.carousel-cells').css('left', 0);
      });
    },
    previous: function() {
      $('.carousel-cells').animate({
        left: +sliderWidth
      }, 500, function() {
        $('article:last-child').prependTo('.carousel-cells');
        // you don't want to reset left of "article" but ".carousel-cells"
        $('.carousel-cells').css('left', 0);
      });
    }
    // TODO: update, props
  }
  
  
  $( Carousel.init );
  
})(window);

/*QuickReset*/ *{margin:0;box-sizing:border-box;} html,body{height:100%;font:14px/1.4 sans-serif;}

.page-content .main-carousel {
  height: 400px;
  position: relative;
  overflow: hidden;
  background: #c0ffee;
}
.page-content .main-carousel .carousel-cells {
  position:relative; /* neeed since you're animating positions */
  height: 100%;
  width: 100%;
  display: inline-flex;
}
.page-content .main-carousel .carousel-cells article {
  flex: 1 0 100%; /* stretch to parent's 100% */
  width: 100%;
  /* inner elements related: */
  display: flex;  
  justify-content: center;
  align-items: center;
}

/* (all important was above. Now go with Buttons and stuff...) */
.page-content .main-carousel .carousel-next,
.page-content .main-carousel .carousel-prev {
  position: absolute;
  top: 50%;
  padding: 20px;
  background-color: rgba(200, 200, 200, 1);
  cursor: pointer;
  margin-top: -25px;
}
.page-content .main-carousel .carousel-next {
  right: 0;
}
.page-content .main-carousel .carousel-prev {
  left: 0;
}
.slide-text h1 {
  font-size: 8vh;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="page-content">
  <section class="main-carousel">
    <div class="carousel-cells">
      <article>
        <div class="slide-text">
          <h1>Slide One</h1>
          <p>A slide about sliding slides.</p>
        </div>
      </article>
      <article>
        <div class="slide-text">
          <h1>Slide Two</h1>
          <p>A slide-sliding slider sliding slides.</p>
        </div>
      </article>
      <article>
        <div class="slide-text">
          <h1>Slide Three</h1>
          <p>A slide-sliding slider sliding slides.</p>
        </div>
      </article>
    </div>
    <!-- Instead of using z-index place where due -->
    <div class="carousel-next">&gt;</div>
    <div class="carousel-prev">&lt;</div>
  </section>
</div>