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

Question

请看下面的链接

只是另一个简单的 jQuery 图像滑块插件 - smSlider

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

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

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

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

Answer 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; }
}

Answer 2

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

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

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