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

Question

请看下面的link

Just Another Simple jQuery Image Slider Plugin - smSlider

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

在手机和平板电脑尺寸中，您可以看到主滑块和缩略图之间有一个巨大的 space。我试图通过更改 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 的高度，您将能够使滑块在那些上看起来也不错。

使用各种媒体查询，您可以根据屏幕大小更改高度。您不能将其设置为自动，因为那样元素的高度将折叠为 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 的最大宽度以消除主滑块和缩略图之间的间隙

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

Thumbnail carousel, huge gap between main slider and thumbnails

javascript

jquery

thumbnails

circular-content-carousel

responsive