Jssor 列表滑块在响应时删除拇指，因此图像宽度缩放为 100%答案

【问题标题】：Jssor List Slider Remove Thumbs when responsive so Image width scales at 100%Jssor 列表滑块在响应时删除拇指，因此图像宽度缩放为 100%
【发布时间】：2014-10-16 13:06:13
【问题描述】：

您好，我正在根据列表滑块 http://www.jssor.com/demos/list-slider.html 制作滑块

我正在尝试仅隐藏最大宽度为 770 像素的屏幕的拇指。

当使用 css 删除它们时，它们不会出现，但问题是幻灯片中的图像不会以 100% 的宽度调整大小。我尝试使用 css 使整个幻灯片容器成为整个滑块容器的大小。所以它填充了隐藏拇指的空间。但是响应能力并不能真正正常工作。有人可以帮忙吗？

我认为这必须在脚本中完成，而不是使用 css。但是我的javascript知识不是很好。

【问题讨论】：

标签： list slider jssor

【解决方案1】：

这会删除缩略图，但滑块不会填充宽度，缩略图所在的位置有一个空间。所以以下对我有用，你在slider1_container之后向容器添加了另一个ID

var windowWidth = $(window).width();

        if (windowWidth <= 770) {

            $("#slider1_thumbnavigator").remove();
            $("#slider1_container").width("100%");
            $("#slider1_container #theSlides").css("left",0);
        }


        var jssor_slider1 = new $JssorSlider$("slider1_container", options);

我试图在 ScaleSlider() 函数中添加它，因为我希望 jssor 在人们在测试期间调整浏览器大小时自动调整，但不知何故它在那里不起作用。它只适用于初始化

【讨论】：

【解决方案2】：

请按照以下两个步骤，

将 id 添加到缩略图导航器

    <div u="thumbnavigator" id="slider1_thumbnavigator" ...

替换

    var jssor_slider1 = new $JssorSlider$("slider1_container", options);

与

    var windowWidth = $(window).width();

    if (windowWidth <= 770) {
        $("#slider1_thumbnavigator").remove();
        $("#slider1_container").width("600px");
    }

    var jssor_slider1 = new $JssorSlider$("slider1_container", options);

【讨论】：