缩略图轮播，主滑块和缩略图之间的巨大空隙

Question

请参见下面的链接

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，但我没有成功。有解决这个问题的解决方案吗？

Answer 1

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

使用各种媒体查询，然后可以根据屏幕尺寸更改高度。您不能将其设置为auto，否则元素的高度将折叠为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; }
}

Answer 2

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

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

当用户的屏幕小于或等于980px时，浏览器会更改.sm_slide img的最大宽度，以消除主滑块和缩略图之间的间隙