Slick Slider is one of the most popular jQuery carousel/slider libraries available. Adding it cleanly to a Magento 2 custom theme without breaking the RequireJS setup requires a few specific steps. This guide covers both Luma-based themes and Hyva Theme integration.

Part 1: Adding Slick Slider to a Luma-Based Magento 2 Theme

Step 1: Download and Place the Slick Library

Download the Slick library from kenwheeler.github.io/slick and place the files in your theme:

app/design/frontend/[Vendor]/[Theme]/web/
├── js/
│   └── slick/
│       ├── slick.min.js
│       └── slick.css

Step 2: Register with RequireJS

Create or update your theme's requirejs-config.js to register Slick as a RequireJS module:

var config = {
    paths: {
        'slick': 'js/slick/slick.min'
    },
    shim: {
        'slick': {
            deps: ['jquery']
        }
    }
};

Step 3: Include the CSS

In your default_head_includes.xml (or equivalent layout XML):

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:noNamespaceSchemaLocation="...">
    <head>
        <css src="js/slick/slick.css"/>
    </head>
</page>

Step 4: Use Slick in Your Template

In your .phtml template file:

<div class="my-slider" id="mySlider">
    <div>Slide 1</div>
    <div>Slide 2</div>
    <div>Slide 3</div>
</div>

<script type="text/javascript">
require(['jquery', 'slick', 'domReady!'], function($) {
    $('#mySlider').slick({
        dots: true,
        infinite: true,
        speed: 300,
        slidesToShow: 1,
        adaptiveHeight: true,
        autoplay: true,
        autoplaySpeed: 5000
    });
});
</script>

Part 2: Adding Slick Slider to a Hyva Theme

Hyva Theme doesn't use RequireJS, which means the approach is simpler and cleaner. Since Hyva uses Alpine.js and Tailwind CSS, you have two options for carousels:

Option A: Use a Native Alpine.js Slider (Recommended)

For Hyva, we actually recommend building a slider with Alpine.js and CSS transitions rather than adding jQuery Slick. This keeps your page lean and avoids the jQuery dependency:

<div x-data="{
    currentSlide: 0,
    slides: ['Slide 1', 'Slide 2', 'Slide 3'],
    next() { this.currentSlide = (this.currentSlide + 1) % this.slides.length; },
    prev() { this.currentSlide = (this.currentSlide - 1 + this.slides.length) % this.slides.length; }
}">
    <template x-for="(slide, index) in slides" :key="index">
        <div x-show="currentSlide === index"
             x-transition:enter="transition ease-out duration-300"
             x-transition:enter-start="opacity-0"
             x-transition:enter-end="opacity-100">
            <span x-text="slide"></span>
        </div>
    </template>
    <button @click="prev()">←</button>
    <button @click="next()">→</button>
</div>

Option B: Use Slick with a Script Tag in Hyva

If you specifically need Slick in Hyva (e.g. for a complex slider with many options), you can load it via a standard script tag since Hyva doesn't use RequireJS:

<!-- In your section layout or CMS block -->
<link rel="stylesheet" href="{{base_url}}js/slick/slick.css">
<script src="{{base_url}}js/slick/slick.min.js" defer></script>

<div id="hyvaSlider">
    <div>Slide 1</div>
    <div>Slide 2</div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    if (typeof jQuery !== 'undefined') {
        jQuery('#hyvaSlider').slick({ dots: true, infinite: true });
    }
});
</script>

⚠️ Note for Hyva: Hyva doesn't include jQuery by default. Loading jQuery just for Slick defeats the performance benefits of Hyva. We strongly recommend the Alpine.js approach for new Hyva builds.

Troubleshooting Common Issues

Slick not initialising: Ensure jQuery is loaded before slick.min.js. Check RequireJS config for shim dependency declaration.
CSS not loading: Check your theme's _module.less or layout XML CSS include.
Slider showing all slides at once: Ensure your Slick CSS is properly loaded — this is always a CSS issue.
Conflict with other JS: Use domReady! in RequireJS or DOMContentLoaded event listener.

Need help with custom Magento 2 or Hyva Theme development? Our team at Magento Services UK can help. See our full development portfolio at magento-services.com.

How to Add Slick Slider in a Magento 2 Custom Theme