0
# Navigation Control
1

2
Programmatic navigation methods for controlling slide movement and position. Provides methods for moving between slides, jumping to specific positions, and querying current state.
3

4
## Capabilities
5

6
### Go to Next Slide
7

8
Advances the carousel to the next slide, respecting slidesToScroll setting.
9

10
```javascript { .api }
11
/**
12
 * Advance to the next slide
13
 * Automatically handles infinite looping and slide boundaries
14
 */
15
$('.slider').slick('slickNext');
16
```
17

18
**Usage Examples:**
19

20
```javascript
21
// Basic next slide
22
$('.slider').slick('slickNext');
23

24
// Trigger next on button click
25
$('#next-btn').click(function() {
26
  $('.slider').slick('slickNext');
27
});
28

29
// Programmatically advance slides in sequence
30
setInterval(function() {
31
  $('.slider').slick('slickNext');
32
}, 3000);
33
```
34

35
### Go to Previous Slide
36

37
Moves the carousel to the previous slide, respecting slidesToScroll setting.
38

39
```javascript { .api }
40
/**
41
 * Go to the previous slide
42
 * Automatically handles infinite looping and slide boundaries
43
 */
44
$('.slider').slick('slickPrev');
45
```
46

47
**Usage Examples:**
48

49
```javascript
50
// Basic previous slide
51
$('.slider').slick('slickPrev');
52

53
// Trigger previous on button click
54
$('#prev-btn').click(function() {
55
  $('.slider').slick('slickPrev');
56
});
57

58
// Navigate based on user input
59
$(document).keydown(function(e) {
60
  if (e.keyCode === 37) { // Left arrow
61
    $('.slider').slick('slickPrev');
62
  }
63
});
64
```
65

66
### Go to Specific Slide
67

68
Navigates directly to a specific slide by index with optional animation control.
69

70
```javascript { .api }
71
/**
72
 * Navigate to a specific slide by index
73
 * @param index - Target slide index (0-based)
74
 * @param dontAnimate - Skip animation if true (default: false)
75
 */
76
$('.slider').slick('slickGoTo', index, dontAnimate);
77
```
78

79
**Usage Examples:**
80

81
```javascript
82
// Go to slide 3 with animation
83
$('.slider').slick('slickGoTo', 2); // 0-based index
84

85
// Go to slide 5 without animation
86
$('.slider').slick('slickGoTo', 4, true);
87

88
// Go to first slide
89
$('.slider').slick('slickGoTo', 0);
90

91
// Go to last slide (if you know the total)
92
$('.slider').slick('slickGoTo', $('.slider .slide').length - 1);
93

94
// Navigate based on thumbnail clicks
95
$('.thumbnail').click(function() {
96
  var slideIndex = $(this).data('slide-index');
97
  $('.slider').slick('slickGoTo', slideIndex);
98
});
99
```
100

101
### Get Current Slide
102

103
Returns the index of the currently active slide.
104

105
```javascript { .api }
106
/**
107
 * Get the index of the current slide
108
 * @returns number - Current slide index (0-based)
109
 */
110
$('.slider').slick('slickCurrentSlide');
111
```
112

113
**Usage Examples:**
114

115
```javascript
116
// Get current slide index
117
var currentSlide = $('.slider').slick('slickCurrentSlide');
118
console.log('Currently on slide:', currentSlide);
119

120
// Update UI based on current slide
121
var current = $('.slider').slick('slickCurrentSlide');
122
$('.slide-counter').text(`${current + 1} / ${$('.slider .slide').length}`);
123

124
// Conditional navigation
125
var current = $('.slider').slick('slickCurrentSlide');
126
if (current === 0) {
127
  $('#prev-btn').hide();
128
} else {
129
  $('#prev-btn').show();
130
}
131

132
// Save current position
133
var currentPosition = $('.slider').slick('slickCurrentSlide');
134
localStorage.setItem('sliderPosition', currentPosition);
135

136
// Restore saved position
137
var savedPosition = localStorage.getItem('sliderPosition');
138
if (savedPosition) {
139
  $('.slider').slick('slickGoTo', parseInt(savedPosition), true);
140
}
141
```
142

143
## Navigation Event Integration
144

145
Navigation methods work seamlessly with the event system:
146

147
```javascript { .api }
148
// Listen for navigation changes
149
$('.slider').on('beforeChange', function(event, slick, currentSlide, nextSlide) {
150
  console.log(`Navigating from slide ${currentSlide} to slide ${nextSlide}`);
151
});
152

153
$('.slider').on('afterChange', function(event, slick, currentSlide) {
154
  console.log(`Now on slide ${currentSlide}`);
155
  updateNavigationUI(currentSlide);
156
});
157

158
function updateNavigationUI(currentSlide) {
159
  // Update slide counter
160
  $('.slide-counter').text(`${currentSlide + 1} / ${slick.slideCount}`);
161
  
162
  // Update active thumbnail
163
  $('.thumbnail').removeClass('active');
164
  $(`.thumbnail[data-slide-index="${currentSlide}"]`).addClass('active');
165
}
166
```
167

168
## Keyboard Navigation Integration
169

170
Built-in keyboard support when accessibility is enabled:
171

172
```javascript { .api }
173
// Keyboard navigation is automatically enabled with accessibility: true
174
$('.slider').slick({
175
  accessibility: true  // Default: true
176
});
177

178
// Custom keyboard navigation
179
$(document).keydown(function(e) {
180
  switch(e.keyCode) {
181
    case 37: // Left arrow
182
      $('.slider').slick('slickPrev');
183
      break;
184
    case 39: // Right arrow
185
      $('.slider').slick('slickNext');
186
      break;
187
    case 36: // Home
188
      $('.slider').slick('slickGoTo', 0);
189
      break;
190
    case 35: // End
191
      var lastSlide = $('.slider .slide').length - 1;
192
      $('.slider').slick('slickGoTo', lastSlide);
193
      break;
194
  }
195
});
196
```
197

198
## Navigation with Responsive Settings
199

200
Navigation methods respect responsive configuration:
201

202
```javascript { .api }
203
$('.slider').slick({
204
  slidesToShow: 3,
205
  slidesToScroll: 1,
206
  responsive: [
207
    {
208
      breakpoint: 768,
209
      settings: {
210
        slidesToShow: 2,
211
        slidesToScroll: 2  // Navigation will scroll 2 slides on mobile
212
      }
213
    }
214
  ]
215
});
216

217
// Navigation behavior automatically adapts to current responsive settings
218
$('.slider').slick('slickNext'); // Scrolls 1 on desktop, 2 on mobile
219
```
220

221
## Infinite Loop Navigation
222

223
Special considerations for infinite mode:
224

225
```javascript { .api }
226
$('.slider').slick({
227
  infinite: true  // Default: true
228
});
229

230
// With infinite: true, navigation wraps around seamlessly
231
$('.slider').slick('slickNext'); // From last slide goes to first
232
$('.slider').slick('slickPrev'); // From first slide goes to last
233

234
// With infinite: false, navigation stops at boundaries
235
$('.slider').slick({
236
  infinite: false
237
});
238
// Navigation will not go beyond first/last slides
239
```