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

magento2product-view-pageslickslider

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.

enter image description here

enter image description here

enter image description here

enter image description here

Best Answer

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.

Related Topic