如何在视口中包含卡片转盘？

Question

我正在使用此卡片转盘。所有卡片都应显示在视口中，突出显示活动卡片。

在单击卡片时，从右到活动卡片效果很好，但是单击左卡片，卡片将离开视口并溢出。

JSFiddle link

Answer 1

只需从js中删除动画代码即可。

这个

if ($(this).hasClass('next')) {
 $('.card-carousel').stop(false, true).animate({left: '-=' + $slide});
} else if ($(this).hasClass('prev')) {
 $('.card-carousel').stop(false, true).animate({left: '+=' + $slide});
}

Answer 2

隐藏溢出的内容将解决此问题。我将其添加到主体中，因为主体是轮播的外部容器。

body {
  overflow-x: hidden;
}