Remote-Slick-Slider-Nav for Slick Slider

Overview

A custom jQuery plugin that turns any HTML element into a remote navigation control for Slick Slider by Ken Wheeler. It allows seamless interaction with the slider, offering full control over navigation with responsive design support. The plugin provides customization options for navigation behavior, including adjustable scroll settings, item visibility modifiers, and responsive adjustments based on screen size.

Features

• Transform any element into Slick Slider Navigation: This plugin allows you to create custom navigation for Slick Slider, turning any element into interactive navigation dots or buttons that sync with the slider.
• Responsive Support:: Define breakpoints to modify the behavior of the navigation on different screen sizes, including the number of items to scroll and modifier values.
• Customizable:: Easily adjust the navigation behavior through options like modifier (for number of items to hide), toScroll (how many items to scroll at once), and more.
• ARIA Accessibility:: The plugin ensures that the navigation buttons are accessible, with proper ARIA attributes for screen readers.
• Dynamic Updates:: The plugin reacts to changes in screen size and updates the navigation accordingly.

Installation

1. Include jQuery and Slick Slider

Make sure you have jQuery and the Slick Slider installed and initialized before using this plugin. You can include the necessary files like this:

<!-- Include jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<!-- Include Slick Slider -->
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.css"/>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js"></script>

2. Include the Plugin Script

Include the RemoteSlickSliderNav plugin script after the Slick Slider script:

<script src="path/to/dist/remote-slick-slider-nav.min.js"></script>

Usage

Basic Initialization

To initialize the RemoteSlickSliderNav plugin, call it on the container element where you want the navigation to appear. Ensure the target Slick Slider is already initialized, or invoke it during the Slick Slider's init event. Specify the slider option to link your Slick Slider, and optionally customize the settings to fit your needs.

Container element:

<div class="slider-nav"></div>

Script:

$(".slider-nav").remoteSlickSliderNav({
    slider: ".dine-slider",  // The Slick Slider to control
    className: "custom-dots-class",  // Custom class name for navigation dots (optional)
    modifier: 0,  // Number of items to exclude from navigation
    toScroll: 1,  // Number of items to scroll at a time
    responsive: [
        { breakpoint: 768, settings: { modifier: 1, toScroll: 2 } },
        { breakpoint: 992, settings: { modifier: 0, toScroll: 1 } }
    ]
});

Options

• slider: The jQuery selector for the Slick Slider (e.g., ".dine-slider").
• className: The CSS class for the navigation dots container (default: slick-dots). You can provide a custom class name here.
• modifier: The number of items to exclude from the navigation.
• toScroll: The number of items to scroll at a time when navigating through the slides.
• responsive: An array of objects containing breakpoints and custom settings for different screen sizes.

Example:

responsive: [
    { breakpoint: 768, settings: { modifier: 1, toScroll: 2 } },
    { breakpoint: 992, settings: { modifier: 0, toScroll: 1 } }
]

In the above example:

• Breakpoint 768px: Excludes 1 item from navigation (modifier: 1), scrolls 2 items at a time (toScroll: 2).
• Breakpoint 992px: Excludes no items (modifier: 0), scrolls 1 item at a time (toScroll: 1).

Methods

destroy()

Destroys the navigation and removes all generated elements. Can be used to clean up when the navigation is no longer needed.

instance.destroy();

Responsive Behavior

The plugin adjusts the modifier and toScroll values dynamically based on the screen size. If the window width crosses a defined breakpoint, the plugin reinitializes the navigation with the new settings.

Important: When resizing the window, the plugin checks the current breakpoint and applies the appropriate settings, ensuring the navigation works as expected on all screen sizes.

Credit

This plugin is developed by adhit28.

For any questions or issues, feel free to reach out via email: [email protected].

License

This plugin is released under the MIT License. Feel free to use and modify it for your projects.