轮播滑块不适用于Flexbox

时间：2017-07-18 21:02:33

标签： javascript jquery html css carousel

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

关于CSS，一切都是Flexboxed，所以我见过的任何指南都没有太大帮助。在试用Flexbox / Carousel教程时，他们的代码很复杂。

这是我的代码。

＆＃13;
＆＃13; 
(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);
＆＃13; 
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;
  }
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

我查看了这个指导：https://codepen.io/anon/pen/mwYoOm?editors=0110这非常有用，但由于我使用的是Flexbox，因此无法正常工作。

您是否有任何关于要采取什么行动的建议？或者您可以使用Javascript使其正常工作？非常感激！

2 个答案:

答案 0 :(得分：0)

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

  • 您的选择器。你不能像这样定位 var params = { param1: 'token', param2: 'anyvalue' }; return 'https://any.com/?' + $.param(params); ，它可以从你的网页中与你的图库无关的某个“文章”元素定位。相反，您应该尝试将您的图库存储为属性，而不是将其定位为"article"子项，例如："article"
  • 通常使用Carousel.$slider.find("article")，您只能将自己限制为每页一个图库。而是看看Authoring a jQuery Plugin。
  • 网站响应，您不能将".carousel-cells"用作常量 - 最终会尝试重新计算点击时的宽度... 

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

答案 1 :(得分：0)

如何在没有动画功能的情况下编写下面的代码，

    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);
      });
    }
相关问题
最新问题