Javascript/Tiny Slider - Always show control button although no further item to scroll

Question

I'm using tiny slider https://github.com/ganlanyuan/tiny-slider and if there are no items left to slide or in other words all are visible, the prev/next buttons disappear. How can I have the prev/next buttons always be visible?

That's my sript, and in some instances I'm rendering only 3 items but I would like to keep prev/next buttons if over 1450 width:

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",
 });

Here is a fiddle: https://jsfiddle.net/yh9sgvob/ ... where I use breakpoints 768 and 575. You see the buttons will appear if you narrow the window.

Answer 1

You can use the freezable option to false.

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

freezable is true by default. This indicates whether the slider controls (together with other functions. check docs) will be frozen/stop working when all slides can be displayed in one page.

OTHER OPTIONS

If you don't like the first option since that will also unfreeze other functions such as loop, etc. You can use css to always show the controls

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

In your case, since you are already using controlsContainer option. You can just add a class with 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;
}