0
# Playback Control
1

2
Autoplay functionality control for starting, stopping, and managing automatic slide progression. Provides methods to control the built-in autoplay timer and handle play/pause states.
3

4
## Capabilities
5

6
### Start Autoplay
7

8
Starts or resumes automatic slide progression with the configured timing.
9

10
```javascript { .api }
11
/**
12
 * Start or resume autoplay
13
 * Sets autoplay option to true and begins automatic progression
14
 */
15
$('.slider').slick('slickPlay');
16
```
17

18
**Usage Examples:**
19

20
```javascript
21
// Start autoplay programmatically
22
$('.slider').slick('slickPlay');
23

24
// Start autoplay on user interaction
25
$('#play-btn').click(function() {
26
  $('.slider').slick('slickPlay');
27
  $(this).hide();
28
  $('#pause-btn').show();
29
});
30

31
// Auto-start after initialization
32
$('.slider').slick({
33
  autoplay: false,
34
  autoplaySpeed: 3000
35
});
36
// Start autoplay after setup
37
setTimeout(function() {
38
  $('.slider').slick('slickPlay');
39
}, 1000);
40

41
// Resume autoplay after user interaction
42
$('.slider').on('mouseleave', function() {
43
  if (!$(this).data('user-paused')) {
44
    $(this).slick('slickPlay');
45
  }
46
});
47
```
48

49
### Pause Autoplay
50

51
Pauses automatic slide progression while maintaining the current position.
52

53
```javascript { .api }
54
/**
55
 * Pause autoplay
56
 * Stops automatic progression but keeps current slide position
57
 */
58
$('.slider').slick('slickPause');
59
```
60

61
**Usage Examples:**
62

63
```javascript
64
// Pause autoplay programmatically
65
$('.slider').slick('slickPause');
66

67
// Pause on user interaction
68
$('#pause-btn').click(function() {
69
  $('.slider').slick('slickPause');
70
  $('.slider').data('user-paused', true);
71
  $(this).hide();
72
  $('#play-btn').show();
73
});
74

75
// Pause on hover (if not configured automatically)
76
$('.slider').on('mouseenter', function() {
77
  $(this).slick('slickPause');
78
});
79

80
// Pause when page becomes hidden
81
$(document).on('visibilitychange', function() {
82
  if (document.hidden) {
83
    $('.slider').slick('slickPause');
84
  } else {
85
    $('.slider').slick('slickPlay');
86
  }
87
});
88

89
// Pause for specific duration
90
function pauseForDuration(duration) {
91
  $('.slider').slick('slickPause');
92
  setTimeout(function() {
93
    $('.slider').slick('slickPlay');
94
  }, duration);
95
}
96
```
97

98
## Autoplay Configuration Options
99

100
Autoplay behavior is controlled through configuration options:
101

102
```javascript { .api }
103
interface AutoplayOptions {
104
  /** Enable autoplay (default: false) */
105
  autoplay?: boolean;
106
  
107
  /** Autoplay interval in milliseconds (default: 3000) */
108
  autoplaySpeed?: number;
109
  
110
  /** Pause autoplay on hover (default: true) */
111
  pauseOnHover?: boolean;
112
  
113
  /** Pause autoplay when focused (default: true) */
114
  pauseOnFocus?: boolean;
115
  
116
  /** Pause autoplay on dot hover (default: false) */
117
  pauseOnDotsHover?: boolean;
118
}
119
```
120

121
**Usage Examples:**
122

123
```javascript
124
// Basic autoplay setup
125
$('.slider').slick({
126
  autoplay: true,
127
  autoplaySpeed: 4000,
128
  pauseOnHover: true
129
});
130

131
// Advanced autoplay configuration
132
$('.slider').slick({
133
  autoplay: true,
134
  autoplaySpeed: 2500,
135
  pauseOnHover: false,     // Continue playing on hover
136
  pauseOnFocus: true,      // Pause when slider gains focus
137
  pauseOnDotsHover: true   // Pause when hovering over dots
138
});
139

140
// Runtime autoplay configuration changes
141
$('.slider').slick('slickSetOption', 'autoplaySpeed', 5000, false);
142
$('.slider').slick('slickSetOption', 'pauseOnHover', false, false);
143
```
144

145
## Play/Pause State Management
146

147
```javascript { .api }
148
// Track autoplay state
149
function getAutoplayState() {
150
  return $('.slider').slick('slickGetOption', 'autoplay');
151
}
152

153
// Toggle autoplay
154
function toggleAutoplay() {
155
  if (getAutoplayState()) {
156
    $('.slider').slick('slickPause');
157
  } else {
158
    $('.slider').slick('slickPlay');
159
  }
160
}
161

162
// Update UI based on autoplay state
163
function updatePlayPauseButton() {
164
  const isPlaying = getAutoplayState();
165
  const $playBtn = $('#play-btn');
166
  const $pauseBtn = $('#pause-btn');
167
  
168
  if (isPlaying) {
169
    $playBtn.hide();
170
    $pauseBtn.show();
171
  } else {
172
    $pauseBtn.hide();
173
    $playBtn.show();
174
  }
175
}
176
```
177

178
## Advanced Autoplay Patterns
179

180
### Conditional Autoplay
181

182
```javascript { .api }
183
// Only autoplay if multiple slides exist
184
$('.slider').on('init', function(event, slick) {
185
  if (slick.slideCount > 1) {
186
    $(this).slick('slickPlay');
187
  }
188
});
189

190
// Autoplay based on viewport visibility
191
function handleVisibilityChange() {
192
  if (document.hidden) {
193
    $('.slider').slick('slickPause');
194
  } else if (!$('.slider').data('user-paused')) {
195
    $('.slider').slick('slickPlay');
196
  }
197
}
198

199
document.addEventListener('visibilitychange', handleVisibilityChange);
200
```
201

202
### Progressive Autoplay Speed
203

204
```javascript { .api }
205
// Gradually increase autoplay speed
206
let currentSpeed = 4000;
207
const minSpeed = 1000;
208
const speedDecrement = 200;
209

210
$('.slider').on('afterChange', function() {
211
  if (currentSpeed > minSpeed) {
212
    currentSpeed -= speedDecrement;
213
    $(this).slick('slickSetOption', 'autoplaySpeed', currentSpeed, false);
214
  }
215
});
216
```
217

218
### Smart Pause/Resume
219

220
```javascript { .api }
221
// Pause on user interaction, resume after inactivity
222
let userInteractionTimeout;
223

224
function pauseWithTimeout() {
225
  $('.slider').slick('slickPause');
226
  $('.slider').data('user-paused', true);
227
  
228
  // Clear existing timeout
229
  clearTimeout(userInteractionTimeout);
230
  
231
  // Resume after 10 seconds of inactivity
232
  userInteractionTimeout = setTimeout(function() {
233
    $('.slider').data('user-paused', false);
234
    $('.slider').slick('slickPlay');
235
  }, 10000);
236
}
237

238
// Pause on navigation clicks
239
$('.slick-arrow, .slick-dots li').on('click', pauseWithTimeout);
240

241
// Pause on manual swipe
242
$('.slider').on('swipe', pauseWithTimeout);
243
```
244

245
### Autoplay with Progress Indicator
246

247
```javascript { .api }
248
// Visual progress indicator for autoplay
249
function initializeProgressBar() {
250
  const $progressBar = $('<div class="autoplay-progress"><div class="progress-fill"></div></div>');
251
  $('.slider').append($progressBar);
252
  
253
  let progressInterval;
254
  
255
  $('.slider').on('beforeChange', function() {
256
    // Reset progress
257
    $('.progress-fill').css('width', '0%');
258
    clearInterval(progressInterval);
259
  });
260
  
261
  $('.slider').on('afterChange', function() {
262
    if ($(this).slick('slickGetOption', 'autoplay')) {
263
      startProgressAnimation();
264
    }
265
  });
266
  
267
  function startProgressAnimation() {
268
    const autoplaySpeed = $('.slider').slick('slickGetOption', 'autoplaySpeed');
269
    let progress = 0;
270
    const increment = 100 / (autoplaySpeed / 50); // Update every 50ms
271
    
272
    progressInterval = setInterval(function() {
273
      progress += increment;
274
      if (progress >= 100) {
275
        progress = 100;
276
        clearInterval(progressInterval);
277
      }
278
      $('.progress-fill').css('width', progress + '%');
279
    }, 50);
280
  }
281
}
282
```
283

284
## Responsive Autoplay Behavior
285

286
```javascript { .api }
287
// Different autoplay settings for different screen sizes
288
$('.slider').slick({
289
  autoplay: true,
290
  autoplaySpeed: 4000,
291
  responsive: [
292
    {
293
      breakpoint: 768,
294
      settings: {
295
        autoplay: true,
296
        autoplaySpeed: 6000  // Slower on mobile
297
      }
298
    },
299
    {
300
      breakpoint: 480,
301
      settings: {
302
        autoplay: false  // Disable on small screens
303
      }
304
    }
305
  ]
306
});
307

308
// Conditional autoplay based on device capabilities
309
function initializeResponsiveAutoplay() {
310
  const isTouchDevice = 'ontouchstart' in window;
311
  const isSlowConnection = navigator.connection && navigator.connection.effectiveType === 'slow-2g';
312
  
313
  $('.slider').slick({
314
    autoplay: !isTouchDevice && !isSlowConnection,
315
    autoplaySpeed: isTouchDevice ? 5000 : 3000
316
  });
317
}
318
```