缩略图轮播，主滑块和缩略图之间的巨大差距答案

【问题标题】：Thumbnail carousel, huge gap between main slider and thumbnails缩略图轮播，主滑块和缩略图之间的巨大差距
【发布时间】：2019-01-25 07:58:38
【问题描述】：

请看下面的链接

Just Another Simple jQuery Image Slider Plugin - smSlider

查看演示并调整浏览器大小。

在移动设备和平板电脑尺寸中，您可以看到主滑块和缩略图之间的巨大空间。我试图通过更改这部分 js 文件来修复它

var $smSliderInner = $smSlider.children('ul').addClass(options.innerBlock);
$smSliderInner.css({
  'height': smSlideHeight,
  'overflow': 'hidden',
  'position': 'relative',
  'width': '100%'
});

例如设置height: auto或position: absolute，但我没有成功。有什么办法可以解决这个问题吗？

【问题讨论】：

标签： javascript jquery thumbnails responsive circular-content-carousel

【解决方案1】：

滑块缺少一些在移动设备上看起来不错的响应式样式。看看下面的截图。如果您更改#full-page_slider 的高度，您将能够使滑块看起来也不错。

使用各种媒体查询，您可以根据屏幕大小更改高度。您不能将其设置为自动，否则元素的高度将折叠为 0。

以下是您可以使用的一些示例查询。

// Media works when the width is below 480px
@media all and (max-width: 480px) {
  #full-page_slider { height: 280px; }
}

// Media works when the width is below 700px
@media all and (max-width: 700px) {
  #full-page_slider { height: 480px; }
}

【讨论】：

【解决方案2】：

您可以尝试使用 CSS3 媒体查询。
以下是您可以尝试的示例代码：

@media screen and (max-width: 980px){
    .sm_slide img{
        max-width: unset;
    }
}

当用户的屏幕小于等于980px时，浏览器会改变.sm_slide img的max-width来消除主滑块和缩略图之间的间隙

【讨论】：