Magento 2:Uncaught TypeError: $(...).slick is not a function Slick slider

Question

File: gallery.phtml

Path:

app/design/frontend/SimpleMagento/CustomTheme/Magento_Catalog/view/frontend/templates/product/view/gallery.phtml

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<?php   $someJSON = $block->getGalleryImagesJson();
 $someArray = json_decode($someJSON, true);
?>

<div class="container">
<div class="row">
    <div class="col-sm-8">
        <div class="videos-slider-2">
            <?php foreach ($someArray as $value => $key){ ?>
            <div>
                <div class="bs-overlay">
                    <img src="<?= /* @noEscape */ $key['full'] ?>" alt="" />
                </div>
            </div>
            <?php }?>
        </div>
        <div class="slider-nav-thumbnails">
            <?php foreach ($someArray as $value => $key){ ?>
                <div>
                    <img src="<?= /* @noEscape */ $key['thumb'] ?>" alt="One">
                </div>
            <?php }?>
        </div>
    </div>
</div>

<script>
require(['jquery', 'jquery/ui', 'slickSlider'], function($){
    "use strict";
    var jQuery = $.noConflict();
    // jQuery.fn.slick = jQuery.fn.slick || function() {};
    // jQuery(".videos-slider-2").not('.slick-initialized').slick();
    jQuery(document).ready( function() {
        jQuery(".videos-slider-2").slick({
            autoplay: true,
            slidesToScroll: 1,
            slidesToShow: 1,
            arrows: true,
            dots: false,
            asNavFor: '.slider-nav-thumbnails',
            prevArrow:"<button type='button' class='slick-prev pull-left'><i class='fa fa-angle-left' aria-hidden='true'></i></button>",
            nextArrow:"<button type='button' class='slick-next pull-right'><i class='fa fa-angle-right' aria-hidden='true'></i></button>",
        });
        jQuery(".slider-nav-thumbnails").slick({
            autoplay: false,
            slidesToShow: 4,
            slidesToScroll: 1,
            asNavFor: '.videos-slider-2',
            dots: true,
            focusOnSelect: true,
            variableWidth: true
        });
    });

    // Remove active class from all thumbnail slides
    jQuery('.slider-nav-thumbnails .slick-slide').removeClass('slick-active');

    // Set active class to first thumbnail slides
    jQuery('.slider-nav-thumbnails .slick-slide').eq(0).addClass('slick-active');

    // On before slide change match active thumbnail to current slide
    jQuery('.videos-slider-2').on('beforeChange', function (event, slick, currentSlide, nextSlide) {
        var mySlideNumber = nextSlide;
        $('.slider-nav-thumbnails .slick-slide').removeClass('slick-active');
        $('.slider-nav-thumbnails .slick-slide').eq(mySlideNumber).addClass('slick-active');
    });
});
</script>

File: requirejs-config

Path

app/design/frontend/SimpleMagento/CustomTheme/requirejs-config.js

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

I added slick.min.js in

app/design/frontend/SimpleMagento/CustomTheme/web/js/slick.js

but error is still there, everytime I reload the page its showing new error

Here is the few screenshot of error, I think its conflicting with core js.

Answer 1

1) Replace slickSlider to slick because you not have any file name slickSlider and in requirejs-config also you kept name as slick

2) In requirejs-config

var config = {
    map: {
        '*': {
            'slick': 'js/slick'
        }
    },
    shim: {
        'slick': {
            deps: ['jquery']
        }
    }
};

Hope this will help you.

May i now which version of slick slider are you using.

Any help will be more appreciated.