JavaScript/Tiny Slider -尽管没有其他项目可滚动，但始终显示控制按钮

vlurs2pr 于 2024-01-05 发布在 Java

关注(0)|答案(1)|浏览(143)

我使用的是https://github.com/ganlanyuan/tiny-slider小滑块，如果没有项目可以滑动，或者换句话说，所有项目都是可见的，上一页/下一页按钮就会消失。我如何才能让上一页/下一页按钮始终可见？
这是我的脚本，在某些情况下，我只渲染3个项目，但我想保留上一个/下一个按钮，如果超过1450宽度：

var slider_news = tns({
    container: '#news',
    mode: 'carousel',
    items: 1,
    responsive: {
        1450: {
            items: 3,
            gutter: 25
        },
        992: {
            items: 2
        },
    },
    mouseDrag: true,
    slideBy: 1,
    gutter: 20,
    loop: false,
    autoplayButtonOutput: false,
    nav: false,
    arrowKeys: true,
    speed: 500,
    controlsContainer: "#news-controls",
 });

字符串
这里有一个小提琴：https://jsfiddle.net/yh9sgvob/.我使用断点768和575。你可以看到，如果你缩小窗口，按钮就会出现。

JavaScript

来源：https://stackoverflow.com/questions/76113775/javascript-tiny-slider-always-show-control-button-although-no-further-item-to

1条答案

按热度按时间

4uqofj5v1#

您可以使用freezable选项来false。

var slider_news = tns({
    container: '#news',
    ...
    freezable: false,
 });

字符串
freezable默认为true。这表示当所有幻灯片可以显示在一个页面中时，滑块控件（以及其他功能。检查文档）是否会冻结/停止工作。

其他选项

如果你不喜欢第一个选项，因为这也将解冻其他功能，如loop等，你可以使用css总是显示控件

.tns-outer .tns-controls {
   display: block !important;
}

型
在你的例子中，因为你已经使用了controlsContainer选项。你可以只添加一个类display: block !important;

var slider_news = tns({
    container: '#news',
    ...
    controlsContainer: '#news-controls',
 });

<div id="news-controls">
  <div>Left</div>
  <div>Right</div>
</div>

#news-controls {
   display: block !important;
}

赞(0）回复(0）举报 2024-01-05

我来回答

JavaScript/Tiny Slider -尽管没有其他项目可滚动，但始终显示控制按钮

1条答案

相关问题

热门标签

最新问答