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

Posted 2023-03-29

【中文标题】缩略图轮播，主滑块和缩略图之间的巨大差距

【英文标题】：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，但我没有成功。有什么办法可以解决这个问题吗？

【参考方案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来消除主滑块和缩略图之间的间隙