Question

您正在制作基于列表滑块http://www.jssor.com/demos/list-slider.html

的滑块

我试图仅为屏幕最大宽度770px隐藏拇指。

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

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

Answer 1

请按照以下两个步骤进行操作

将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);

Answer 2

这会删除缩略图，但滑块不会填充宽度，缩略图有一个空格。因此，以下对我有用，您在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在测试期间人们调整浏览器大小时自动调整，但不知何故它在那里不起作用。它只适用于初始化

Jssor List Slider在响应时移除拇指，因此图像宽度缩放为100％

2 个答案: