Question

实际上，当我按下div标签中的前进按钮（>）时，如果多次按下该按钮，其对齐方式就会受到干扰。

我该怎么办，当按下前进或后退按钮时，轮播会一次移动一个？

<div class="container">
   <div class="row heading heading-icon" style="color:#2ec4b6;">
      <h2 style="color:#2ec4b6;">Our Stories...</h2>
   </div>
   <div class="row ">
      <div class="MultiCarousel chose" data-items="1,3,5,6" data-slide="1" id="MultiCarousel"  data-interval="1200">
         <div class="MultiCarousel-inner">
            <div class="item">
               <div class="pad15">
                  <p class="lead">Multi Item Carousel</p>
                  <p>₹ 1</p>
                  <p>₹ 6000</p>
                  <p>50% off</p>
               </div>
            </div>
            <div class="item">
               <div class="pad15">
                  <p class="lead">Multi Item Carousel</p>
                  <p>₹ 1</p>
                  <p>₹ 6000</p>
                  <p>50% off</p>
               </div>
            </div>
            <div class="item">
               <div class="pad15">
                  <p class="lead">Multi Item Carousel</p>
                  <p>₹ 1</p>
                  <p>₹ 6000</p>
                  <p>50% off</p>
               </div>
            </div>
            <div class="item">
               <div class="pad15">
                  <p class="lead">Multi Item Carousel</p>
                  <p>₹ 1</p>
                  <p>₹ 6000</p>
                  <p>50% off</p>
               </div>
            </div>
            <div class="item">
               <div class="pad15">
                  <p class="lead">Multi Item Carousel</p>
                  <p>₹ 1</p>
                  <p>₹ 6000</p>
                  <p>50% off</p>
               </div>
            </div>
            <div class="item">
               <div class="pad15">
                  <p class="lead">Multi Item Carousel</p>
                  <p>₹ 1</p>
                  <p>₹ 6000</p>
                  <p>50% off</p>
               </div>
            </div>
            <div class="item">
               <div class="pad15">
                  <p class="lead">Multi Item Carousel</p>
                  <p>₹ 1</p>
                  <p>₹ 6000</p>
                  <p>50% off</p>
               </div>
            </div>
            <div class="item">
               <div class="pad15">
                  <p class="lead">Multi Item Carousel</p>
                  <p>₹ 1</p>
                  <p>₹ 6000</p>
                  <p>50% off</p>
               </div>
            </div>
         </div>
         <button class="btn btn-primary leftLst"><</button>
         <button class="btn btn-primary rightLst">></button>
      </div>
   </div>
</div>
<style>
   .MultiCarousel { float: left; overflow: hidden; padding: 15px; width: 100%; position:relative; }
   .MultiCarousel .MultiCarousel-inner { transition: 1s ease all; float: left; }
   .MultiCarousel .MultiCarousel-inner .item { float: left;}
   .MultiCarousel .MultiCarousel-inner .item > div { text-align: center; padding:10px; margin:10px; background:#f1f1f1; color:#666;}
   .MultiCarousel .leftLst, .MultiCarousel .rightLst { position:absolute; border-radius:50%;top:calc(50% - 20px); }
   .MultiCarousel .leftLst { left:0; }
   .MultiCarousel .rightLst { right:0; }
   .MultiCarousel .leftLst.over, .MultiCarousel .rightLst.over { pointer-events: none; background:#ccc; }
</style>

Answer 1

尝试一下

Check this live demo using slick

或See this for complete demos and documentatin

轮播中多次按下按钮时对齐方式不同

1 个答案: