将幻灯片动画集成到日历月

Question

我使用flexbox从头开始构建了一个两列/月的日历，我尝试通过单击左右箭头来集成左右一个月滑动一次的功能。 / p>

我尝试将我的日历与旋转木马滑块插件集成，但是有太多冲突的CSS，我无法控制首先显示哪个月，而不是先将其放在HTML中。

现在，我尝试使用jQuery和CSS手动构建滑动功能，但我之前从未做过类似的事情，所以我不确定如何处理它。所有必要的月份将立即可用，并在HTML中隐藏。类.calendar-half-inactive将被应用到几个月不在视野中，但是一旦我滑动了几个月，我就可以处理这个问题。

这是我的加价（一个月）：

<section id="event-calendar" class="fullwidth">
  <div id="calendar-cont">
    <div class="calendar-half">
      <div class="calendar-half-cont">
        <h1>January 2017</h1>
        <div class="table">
          <div class="table-cont-arrow">
            <div class="table-cont-dates">
              <div class="table-row table-header">
                <div class="table-cell">S</div>
                <div class="table-cell">M</div>
                <div class="table-cell">T</div>
                <div class="table-cell">W</div>
                <div class="table-cell">T</div>
                <div class="table-cell">F</div>
                <div class="table-cell">S</div>
              </div>
              <div class="table-row">
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell">1</div>
                <div class="table-cell">2</div>
                <div class="table-cell">3</div>
                <div class="table-cell event-on">4
                  <div class="tooltip tooltip-right cal-tooltip">
                    <div class="cal-tooltip-cont">
                      <div class="cal-tooltip-img four-three-img">
                        <img src="https://img.buzzfeed.com/buzzfeed-static/static/2014-05/enhanced/webdr06/14/7/enhanced-5869-1400067973-7.jpg" alt="" />
                      </div>
                      <div class="card-info">
                        <a href="#"><h2>Wrapping content title in tooltip</h2></a>
                        <h3>Event date</h3>
                        <h3>Event venue</h3>
                      </div>
                    </div>
                    <div class="cal-tooltip-cont">
                      <div class="cal-tooltip-img four-three-img">
                        <img src="https://img.buzzfeed.com/buzzfeed-static/static/2014-05/enhanced/webdr06/14/7/enhanced-5869-1400067973-7.jpg" alt="" />
                      </div>
                      <div class="card-info">
                        <a href="#"><h2>Wrapping content title in tooltip</h2></a>
                        <h3>Event date</h3>
                        <h3>Event venue</h3>
                      </div>
                    </div>
                    <div class="cal-see-all">
                      <a class="link-gray" href="#">See All <span class="chevron right"></span></a>
                    </div>
                  </div>
                </div>
                <div class="table-cell">5</div>
              </div>
              <div class="table-row">
                <div class="table-cell">6</div>
                <div class="table-cell">7</div>
                <div class="table-cell">8</div>
                <div class="table-cell">9</div>
                <div class="table-cell">10</div>
                <div class="table-cell">11</div>
                <div class="table-cell">12</div>
              </div>
              <div class="table-row">
                <div class="table-cell">13</div>
                <div class="table-cell">14</div>
                <div class="table-cell">15</div>
                <div class="table-cell">16</div>
                <div class="table-cell">17</div>
                <div class="table-cell">18</div>
                <div class="table-cell">19</div>
              </div>
              <div class="table-row">
                <div class="table-cell">20</div>
                <div class="table-cell">21</div>
                <div class="table-cell">22</div>
                <div class="table-cell">23</div>
                <div class="table-cell">24</div>
                <div class="table-cell">25</div>
                <div class="table-cell">26</div>
              </div>
              <div class="table-row">
                <div class="table-cell">27</div>
                <div class="table-cell">28</div>
                <div class="table-cell">29</div>
                <div class="table-cell">30</div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
                <div class="table-cell"></div>
              </div>
            </div>
            <div class="calendar-arrow">
              <a class="icon-arrow-right link-gray" href="#"></a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

尝试jQuery：

var monthWidth = $('.calendar-half').outerWidth();

$('.calendar-arrow .icon-arrow-left').on('click', function() {
  $(this).parents('.calendar-half').animate({
    left: '+=monthWidth'
  });
});

$('.calendar-arrow .icon-arrow-right').on('click', function() {
  $(this).parents('.calendar-half').animate({
    right: '+=monthWidth'
  });
});

演示：CodePen（两个月）

任何帮助都会非常感激！