傳送帶滑塊不適用於Flexbox

Question

我正在嘗試使用簡單的HTML，CSS和Javascript制作滑塊/輪播。 我正在使用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"子項，例如： Carousel.$slider.find("article")
• 通過通常使用".carousel-cells"您可以將自己限制為每頁僅一個圖庫。 相反，請看一下編寫jQuery插件 。
• 網站反應靈敏 ，您不能將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> 

Answer 2

如何在沒有動畫功能的情況下編寫以下代碼，

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