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

  • Have you run the setup:static-content:deploy – Kishor Thummar Jan 30 at 4:58
  • yes, many times – Sagar Parikh SGR Jan 30 at 5:01
  • Have you checked in network that your slickslider js loading or not? – Raj Jan 30 at 5:17
  • @Raj its loading, I checked that – Sagar Parikh SGR Jan 30 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 at 5:22
0

@SagarParikhSGR

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.

| improve this answer | |
  • I updated the question, can you please check, slider is working but conflict is still there, – Sagar Parikh SGR Jan 30 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 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 SGR Feb 3 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.