0
# Slide Management
1

2
Dynamic slide manipulation including adding, removing, and filtering slides at runtime. These methods allow you to modify the carousel content after initialization without destroying and recreating the instance.
3

4
## Capabilities
5

6
### Add Slides
7

8
Adds new slide(s) to the carousel at a specified position or at the beginning/end.
9

10
```javascript { .api }
11
/**
12
 * Add slides to the carousel
13
 * @param markup - HTML string or DOM element(s) to add as slides
14
 * @param index - Position to insert at (optional, null = end)
15
 * @param addBefore - Insert before the index position if true (optional)
16
 */
17
$('.slider').slick('slickAdd', markup, index, addBefore);
18
```
19

20
**Usage Examples:**
21

22
```javascript
23
// Add slide at the end
24
$('.slider').slick('slickAdd', '<div class="slide">New slide</div>');
25

26
// Add slide at the beginning
27
$('.slider').slick('slickAdd', '<div class="slide">First slide</div>', 0, true);
28

29
// Add slide at specific position (index 2)
30
$('.slider').slick('slickAdd', '<div class="slide">Inserted slide</div>', 2);
31

32
// Add slide before specific position
33
$('.slider').slick('slickAdd', '<div class="slide">Before slide 3</div>', 3, true);
34

35
// Add multiple slides
36
var newSlides = `
37
  <div class="slide">Slide A</div>
38
  <div class="slide">Slide B</div>
39
  <div class="slide">Slide C</div>
40
`;
41
$('.slider').slick('slickAdd', newSlides);
42

43
// Add slide with dynamic content
44
var productHtml = `
45
  <div class="slide">
46
    <img src="${product.image}" alt="${product.name}">
47
    <h3>${product.name}</h3>
48
    <p>$${product.price}</p>
49
  </div>
50
`;
51
$('.slider').slick('slickAdd', productHtml);
52

53
// Add DOM element
54
var slideElement = document.createElement('div');
55
slideElement.className = 'slide';
56
slideElement.innerHTML = '<h3>DOM Element Slide</h3>';
57
$('.slider').slick('slickAdd', slideElement);
58
```
59

60
### Remove Slides
61

62
Removes slide(s) from the carousel by index or position.
63

64
```javascript { .api }
65
/**
66
 * Remove slides from the carousel
67
 * @param index - Slide index to remove, or boolean for first/last
68
 * @param removeBefore - Remove slide before index if true
69
 * @param removeAll - Remove all slides if true
70
 */
71
$('.slider').slick('slickRemove', index, removeBefore, removeAll);
72
```
73

74
**Usage Examples:**
75

76
```javascript
77
// Remove slide at index 2
78
$('.slider').slick('slickRemove', 2);
79

80
// Remove first slide
81
$('.slider').slick('slickRemove', true); // true = first slide
82

83
// Remove last slide
84
$('.slider').slick('slickRemove', false); // false = last slide
85

86
// Remove slide before index 3
87
$('.slider').slick('slickRemove', 3, true);
88

89
// Remove all slides
90
$('.slider').slick('slickRemove', null, null, true);
91

92
// Remove current slide
93
var currentSlide = $('.slider').slick('slickCurrentSlide');
94
$('.slider').slick('slickRemove', currentSlide);
95

96
// Remove multiple slides (remove 3 slides starting from index 1)
97
for (let i = 0; i < 3; i++) {
98
  $('.slider').slick('slickRemove', 1); // Always remove index 1 as slides shift
99
}
100
```
101

102
### Filter Slides
103

104
Filters slides using jQuery selector or custom function, hiding non-matching slides.
105

106
```javascript { .api }
107
/**
108
 * Filter slides based on selector or function
109
 * @param filter - jQuery selector string or filter function
110
 */
111
$('.slider').slick('slickFilter', filter);
112
```
113

114
**Usage Examples:**
115

116
```javascript
117
// Filter by CSS class
118
$('.slider').slick('slickFilter', '.active');
119

120
// Filter by data attribute
121
$('.slider').slick('slickFilter', '[data-category="featured"]');
122

123
// Filter by custom selector
124
$('.slider').slick('slickFilter', '.slide:has(img)');
125

126
// Filter using function
127
$('.slider').slick('slickFilter', function(index) {
128
  return $(this).find('.price').text().replace('$', '') < 100;
129
});
130

131
// Filter by content
132
$('.slider').slick('slickFilter', function() {
133
  return $(this).text().toLowerCase().includes('sale');
134
});
135

136
// Dynamic filtering based on user input
137
$('#category-filter').change(function() {
138
  var category = $(this).val();
139
  if (category === 'all') {
140
    $('.slider').slick('slickUnfilter');
141
  } else {
142
    $('.slider').slick('slickFilter', `[data-category="${category}"]`);
143
  }
144
});
145

146
// Search-based filtering
147
$('#search-input').on('input', function() {
148
  var searchTerm = $(this).val().toLowerCase();
149
  if (searchTerm === '') {
150
    $('.slider').slick('slickUnfilter');
151
  } else {
152
    $('.slider').slick('slickFilter', function() {
153
      return $(this).text().toLowerCase().includes(searchTerm);
154
    });
155
  }
156
});
157
```
158

159
### Remove Filter
160

161
Removes any applied filter and restores all slides to the carousel.
162

163
```javascript { .api }
164
/**
165
 * Remove applied filter and show all slides
166
 */
167
$('.slider').slick('slickUnfilter');
168
```
169

170
**Usage Examples:**
171

172
```javascript
173
// Remove current filter
174
$('.slider').slick('slickUnfilter');
175

176
// Reset filter on button click
177
$('#show-all-btn').click(function() {
178
  $('.slider').slick('slickUnfilter');
179
});
180

181
// Clear filter and search
182
function clearFilters() {
183
  $('.slider').slick('slickUnfilter');
184
  $('#search-input').val('');
185
  $('#category-filter').val('all');
186
}
187
```
188

189
## Advanced Slide Management Patterns
190

191
### Dynamic Content Loading
192

193
```javascript { .api }
194
// Load and add slides from API
195
async function loadMoreSlides() {
196
  try {
197
    const response = await fetch('/api/slides?page=2');
198
    const slides = await response.json();
199
    
200
    slides.forEach(slide => {
201
      const slideHtml = `
202
        <div class="slide" data-id="${slide.id}">
203
          <img src="${slide.image}" alt="${slide.title}">
204
          <h3>${slide.title}</h3>
205
          <p>${slide.description}</p>
206
        </div>
207
      `;
208
      $('.slider').slick('slickAdd', slideHtml);
209
    });
210
  } catch (error) {
211
    console.error('Failed to load slides:', error);
212
  }
213
}
214

215
// Infinite scroll pattern
216
$('.slider').on('edge', function(event, slick, direction) {
217
  if (direction === 'right') {
218
    loadMoreSlides();
219
  }
220
});
221
```
222

223
### Conditional Slide Management
224

225
```javascript { .api }
226
// Add/remove slides based on screen size
227
function manageResponsiveSlides() {
228
  const isMobile = window.innerWidth < 768;
229
  
230
  if (isMobile && !$('.mobile-only-slide').length) {
231
    // Add mobile-specific slides
232
    $('.slider').slick('slickAdd', '<div class="slide mobile-only-slide">Mobile Content</div>');
233
  } else if (!isMobile && $('.mobile-only-slide').length) {
234
    // Remove mobile-specific slides
235
    $('.mobile-only-slide').each(function() {
236
      const index = $(this).index();
237
      $('.slider').slick('slickRemove', index);
238
    });
239
  }
240
}
241

242
$(window).resize(manageResponsiveSlides);
243
```
244

245
### Slide Content Updates
246

247
```javascript { .api }
248
// Update slide content without removing/adding
249
function updateSlideContent(slideIndex, newContent) {
250
  const $slides = $('.slider .slick-slide');
251
  const $targetSlide = $slides.eq(slideIndex);
252
  
253
  if ($targetSlide.length) {
254
    $targetSlide.html(newContent);
255
    // Trigger position recalculation if needed
256
    $('.slider').slick('setPosition');
257
  }
258
}
259

260
// Batch content updates
261
function updateMultipleSlides(updates) {
262
  updates.forEach(({index, content}) => {
263
    updateSlideContent(index, content);
264
  });
265
}
266
```
267

268
## Performance Considerations
269

270
```javascript { .api }
271
// When adding many slides, consider batching operations
272
function addMultipleSlides(slideDataArray) {
273
  // Disable transitions during bulk operations
274
  $('.slider').slick('slickSetOption', 'useCSS', false, false);
275
  
276
  slideDataArray.forEach(slideData => {
277
    const slideHtml = createSlideHtml(slideData);
278
    $('.slider').slick('slickAdd', slideHtml);
279
  });
280
  
281
  // Re-enable transitions
282
  $('.slider').slick('slickSetOption', 'useCSS', true, true);
283
}
284

285
// Helper function
286
function createSlideHtml(data) {
287
  return `
288
    <div class="slide" data-id="${data.id}">
289
      <img src="${data.image}" alt="${data.title}">
290
      <h3>${data.title}</h3>
291
      <p>${data.description}</p>
292
    </div>
293
  `;
294
}
295
```