Skip to main content

​
Overview

Controls options manage the display and behavior of prev/next buttons that allow users to navigate through slides.

​
Options

​
controls
boolean
default:"true"
Controls the display and functionalities of controls components (prev/next buttons).If true, display the controls and add all functionalities.
tns({
  container: '.my-slider',
  controls: true
});
For better accessibility, when a prev/next button is focused, user will be able to control the slider using left/right arrow keys.
​
controlsPosition
'top' | 'bottom'
default:"'top'"
Controls controls position.
tns({
  container: '.my-slider',
  controls: true,
  controlsPosition: 'bottom'
});
​
controlsText
string[]
default:"['prev', 'next']"
Text or markup in the prev/next buttons.
// Simple text
tns({
  container: '.my-slider',
  controlsText: ['Previous', 'Next']
});

// HTML markup
tns({
  container: '.my-slider',
  controlsText: [
    '<i class="fa fa-angle-left"></i>',
    '<i class="fa fa-angle-right"></i>'
  ]
});
​
controlsContainer
HTMLElement | string | false
default:"false"
The container element/selector around the prev/next buttons.controlsContainer must have at least 2 child elements.
<div class="controls">
  <button class="prev">Previous</button>
  <button class="next">Next</button>
</div>
<div class="my-slider">
  <!-- slides -->
</div>

tns({
  container: '.my-slider',
  controlsContainer: '.controls'
});
When using controlsContainer, the prevButton and nextButton options will be ignored.
​
prevButton
HTMLElement | string | false
default:"false"
Customized previous button.This option will be ignored if controlsContainer is a Node element or a CSS selector.
<button class="my-prev-btn">Prev</button>
<div class="my-slider">
  <!-- slides -->
</div>

tns({
  container: '.my-slider',
  prevButton: '.my-prev-btn'
});
​
nextButton
HTMLElement | string | false
default:"false"
Customized next button.This option will be ignored if controlsContainer is a Node element or a CSS selector.
<button class="my-next-btn">Next</button>
<div class="my-slider">
  <!-- slides -->
</div>

tns({
  container: '.my-slider',
  nextButton: '.my-next-btn'
});

​
Customization Examples

​
Custom Control Buttons

Use separate custom buttons for prev/next: 
<div class="slider-wrapper">
  <button id="customize-prev" class="btn-prev">
    <svg><!-- prev icon --></svg>
  </button>
  
  <div class="my-slider">
    <div>Slide 1</div>
    <div>Slide 2</div>
    <div>Slide 3</div>
  </div>
  
  <button id="customize-next" class="btn-next">
    <svg><!-- next icon --></svg>
  </button>
</div>

tns({
  container: '.my-slider',
  prevButton: '#customize-prev',
  nextButton: '#customize-next',
  controls: false // Don't generate default controls
});

​
Custom Controls Container

Use a container with both buttons: 
<div class="custom-controls">
  <button data-controls="prev">Previous</button>
  <span class="divider">|</span>
  <button data-controls="next">Next</button>
</div>

<div class="my-slider">
  <div>Slide 1</div>
  <div>Slide 2</div>
  <div>Slide 3</div>
</div>

tns({
  container: '.my-slider',
  controlsContainer: '.custom-controls'
});

​
Icon-Based Controls

tns({
  container: '.my-slider',
  controlsText: [
    '<svg width="24" height="24" viewBox="0 0 24 24"><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/></svg>',
    '<svg width="24" height="24" viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg>'
  ]
});

​
Disabling Controls on Mobile

tns({
  container: '.my-slider',
  controls: true,
  responsive: {
    0: {
      controls: false
    },
    768: {
      controls: true
    }
  }
});

​
Styling Controls

Default controls can be styled using these classes: 
/* Controls container */
.tns-controls {
  text-align: center;
  margin-bottom: 10px;
}

.tns-controls [aria-controls] {
  font-size: 15px;
  margin: 0 5px;
  padding: 0 1em;
  height: 2.5em;
  color: #000;
  background: #66CCFF;
  border-radius: 3px;
  border: 0;
}

.tns-controls [aria-controls]:hover {
  background: #3399CC;
  cursor: pointer;
}

.tns-controls [aria-controls]:disabled {
  background: #ddd;
  cursor: not-allowed;
}

​
Accessibility

Tiny Slider automatically adds appropriate ARIA attributes to controls:
  • aria-controls points to the slider container
  • tabindex="-1" on buttons (except when focused)
  • disabled attribute when at the first/last slide (non-loop mode)
<!-- Generated markup -->
<div class="tns-controls" aria-label="Carousel Navigation" tabindex="0">
  <button type="button" 
          data-controls="prev" 
          tabindex="-1" 
          aria-controls="tns1">
    prev
  </button>
  <button type="button" 
          data-controls="next" 
          tabindex="-1" 
          aria-controls="tns1">
    next
  </button>
</div>

​
Responsive Configuration

Controls can be enabled/disabled at different breakpoints: 
tns({
  container: '.my-slider',
  controls: false,
  responsive: {
    640: {
      controls: true
    }
  }
});

Build docs developers (and LLMs) love

Get started for freeTalk to us