tessl/npm-slick-carousel

Responsive jQuery carousel plugin with extensive customization options for creating interactive slide presentations

—

Pending

Overview

Eval results

Files

Navigation Control

Name: tessl/npm-slick-carousel
Author: tessl

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

Capabilities

Go to Next Slide

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

/**
 * Advance to the next slide
 * Automatically handles infinite looping and slide boundaries
 */
$('.slider').slick('slickNext');

Usage Examples:

// Basic next slide
$('.slider').slick('slickNext');

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

// Programmatically advance slides in sequence
setInterval(function() {
  $('.slider').slick('slickNext');
}, 3000);

Go to Previous Slide

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

/**
 * Go to the previous slide
 * Automatically handles infinite looping and slide boundaries
 */
$('.slider').slick('slickPrev');

Usage Examples:

// Basic previous slide
$('.slider').slick('slickPrev');

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

// Navigate based on user input
$(document).keydown(function(e) {
  if (e.keyCode === 37) { // Left arrow
    $('.slider').slick('slickPrev');
  }
});

Go to Specific Slide

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

/**
 * Navigate to a specific slide by index
 * @param index - Target slide index (0-based)
 * @param dontAnimate - Skip animation if true (default: false)
 */
$('.slider').slick('slickGoTo', index, dontAnimate);

Usage Examples:

// Go to slide 3 with animation
$('.slider').slick('slickGoTo', 2); // 0-based index

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

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

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

// Navigate based on thumbnail clicks
$('.thumbnail').click(function() {
  var slideIndex = $(this).data('slide-index');
  $('.slider').slick('slickGoTo', slideIndex);
});

Get Current Slide

Returns the index of the currently active slide.

/**
 * Get the index of the current slide
 * @returns number - Current slide index (0-based)
 */
$('.slider').slick('slickCurrentSlide');

Usage Examples:

// Get current slide index
var currentSlide = $('.slider').slick('slickCurrentSlide');
console.log('Currently on slide:', currentSlide);

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

// Conditional navigation
var current = $('.slider').slick('slickCurrentSlide');
if (current === 0) {
  $('#prev-btn').hide();
} else {
  $('#prev-btn').show();
}

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

// Restore saved position
var savedPosition = localStorage.getItem('sliderPosition');
if (savedPosition) {
  $('.slider').slick('slickGoTo', parseInt(savedPosition), true);
}

Navigation Event Integration

Navigation methods work seamlessly with the event system:

// Listen for navigation changes
$('.slider').on('beforeChange', function(event, slick, currentSlide, nextSlide) {
  console.log(`Navigating from slide ${currentSlide} to slide ${nextSlide}`);
});

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

function updateNavigationUI(currentSlide) {
  // Update slide counter
  $('.slide-counter').text(`${currentSlide + 1} / ${slick.slideCount}`);
  
  // Update active thumbnail
  $('.thumbnail').removeClass('active');
  $(`.thumbnail[data-slide-index="${currentSlide}"]`).addClass('active');
}

Keyboard Navigation Integration

Built-in keyboard support when accessibility is enabled:

// Keyboard navigation is automatically enabled with accessibility: true
$('.slider').slick({
  accessibility: true  // Default: true
});

// Custom keyboard navigation
$(document).keydown(function(e) {
  switch(e.keyCode) {
    case 37: // Left arrow
      $('.slider').slick('slickPrev');
      break;
    case 39: // Right arrow
      $('.slider').slick('slickNext');
      break;
    case 36: // Home
      $('.slider').slick('slickGoTo', 0);
      break;
    case 35: // End
      var lastSlide = $('.slider .slide').length - 1;
      $('.slider').slick('slickGoTo', lastSlide);
      break;
  }
});

Navigation with Responsive Settings

Navigation methods respect responsive configuration:

$('.slider').slick({
  slidesToShow: 3,
  slidesToScroll: 1,
  responsive: [
    {
      breakpoint: 768,
      settings: {
        slidesToShow: 2,
        slidesToScroll: 2  // Navigation will scroll 2 slides on mobile
      }
    }
  ]
});

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

Infinite Loop Navigation

Special considerations for infinite mode:

$('.slider').slick({
  infinite: true  // Default: true
});

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

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

Install with Tessl CLI