выровнены по-разному при нажатии кнопки вперед несколько раз в карусели

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

Попробуйте

Проверьте это демо using slick

ИЛИ См. Это для полных демонстраций и документации