0

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

9
  • Have you run the setup:static-content:deploy – Kishor Thummar Jan 30 '20 at 4:58
  • yes, many times – Sagar Parikh Jan 30 '20 at 5:01
  • Have you checked in network that your slickslider js loading or not? – Raj Jan 30 '20 at 5:17
  • @Raj its loading, I checked that – Sagar Parikh Jan 30 '20 at 5:18
  • You have to put your slick js in yourtheme/Magento_Catalog/view/frontend/web/js/slick.min.js not in core folder. – Raj Jan 30 '20 at 5:22
0

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.

3
  • I updated the question, can you please check, slider is working but conflict is still there, – Sagar Parikh Jan 30 '20 at 10:35
  • @SagarParikhSGR can you update the screen-shot with console error. to understand your problem, and also possible share the slick.min JS cdn url which you using. – Kanhaiya lal Jan 31 '20 at 13:55
  • my slick.min.js is cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/…, and I also added a screenshot of my console error, if its not clear I will upload it again – Sagar Parikh Feb 3 '20 at 4:24

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.