Div滑块和Display：Table-Cell的JS / CSS问题

Question

我有一个Div滑块，它可以使一组Divs聚焦和聚焦。 一切工作正常，直到我尝试将所有内容切换到（表/表单元格）以使所有Divs在CSS中保持相同的高度。 现在它们仍然可以旋转，但是仍然可以看到一个div，并且舞台的宽度减小了。 我感觉到它的位置相关，但无法弄清楚是什么原因引起的。

受影响的页面-https://www.harpercollege.edu/dev/blog-slider-test.php

JS代码：

$('.blog-posts').wrapInner('<div class="blog-posts-stage" />');


// Calculate Conditions & Set Vars

// var playTimer = 9,
slideQty = $('.well').length,
  slideWidth = $('.well').width(),
  stageWidth = $('.blog-posts-stage').width(),
  contWidth = $('.blog-posts').width();

if ((slideQty * slideWidth) < contWidth) {
  $('.blog-posts-prev').addClass('blog-posts-prev-disabled').removeClass('blog-posts-prev');
  $('.blog-posts-next').addClass('blog-posts-next-disabled').removeClass('blog-posts-next');
} else {
  $('.blog-posts-prev-disabled').addClass('blog-posts-prev').removeClass('blog-posts-prev-disabled');
  $('.blog-posts-next-disabled').addClass('blog-posts-next').removeClass('blog-posts-next-disabled');
}

$(window).resize(function() {
  var slideQty = $('.well').length,
    slideWidth = $('.well').width(),
    stageWidth = $('.blog-posts-stage').width(),
    contWidth = $('.blog-posts').width();
  if ((slideQty * slideWidth) < contWidth) {
    $('.blog-posts-prev').addClass('blog-posts-prev-disabled').removeClass('blog-posts-prev');
    $('.blog-posts-next').addClass('blog-posts-next-disabled').removeClass('blog-posts-next');
  } else {
    $('.blog-posts-prev-disabled').addClass('blog-posts-prev').removeClass('blog-posts-prev-disabled');
    $('.blog-posts-next-disabled').addClass('blog-posts-next').removeClass('blog-posts-next-disabled');
  }
});

$('.blog-posts-next').on('click', function(event) {
  event.preventDefault();
  $('.blog-posts-stage').animate({
    left: -(slideWidth)
  }, 500, function() {
    $('.well:first').appendTo('.blog-posts-stage');
    $('.blog-posts-stage').css({
      left: '0px'
    });
  });
});

$('.blog-posts-prev').on('click', function(event) {
  event.preventDefault();
  $('.well:last').prependTo('.blog-posts-stage');
  $('.blog-posts-stage').css({
    left: -(slideWidth)
  });
  $('.blog-posts-stage').animate({
    left: '0px'
  }, 500, function() {});
});

function moveForward() {
  $('.blog-posts-stage').animate({
    left: -(slideWidth)
  }, 500, function() {
    $('.well:first').appendTo('.blog-posts-stage');
    $('.blog-posts-stage').css({
      left: '0px'
    });
  });
}
var timer = setInterval(moveForward, playTimer);

$('.blog-posts, .blog-posts-prev, .blog-posts-next').hover(function(ev) {
  // clearInterval(timer);
}, function(ev) {
  // timer = setInterval( moveForward, playTimer);
});

CSS代码：

<style>
    .blog-posts {
        width: 100%;
        background: #eee;
        font-size: 0;
        position: relative;
    }
    .blog-posts-prev,
    .blog-posts-next {
      display: inline-block;
      background: #eee;
      color: #000;
      text-decoration: none;
      padding: 10px;
      margin: 5px 0;
    }
    .blog-posts-prev:hover,
    .blog-posts-next:hover {
      background: #ccc;
    }
    .blog-posts-prev-disabled,
    .blog-posts-next-disabled {
      display: inline-block;
      background: #eee;
      color: #ccc;
      text-decoration: none;
      padding: 10px;
      margin: 5px 0;
    }
    .blog-posts-stage {
        position: relative;
        white-space: normal;
        width: 100%;
        height: 100%;
        float: none;
    }       
    .well {
        background: #ccc;
        box-shadow: inset -1px 0px 0px 0px rgb(255, 255, 255);
        width: 100%;
        font-size: 12px;
        text-align: left;
        display: table-cell;
        height: 100%;
        width: 100%;
    }
    .well .row .col-sm-12.col-md-12 h2 {
        float: left;
        margin-top: 0px;
    }
</style>

Answer 1

您可以只使用灯箱库并省去很多麻烦，但是，如果您确实想这样做，为什么不试试flex？

.blog-posts-stage {
  display: flex;
  flex-direction: row;
  overflow: hidden;
}

.well-large {
  flex-shrink: 0;
}