galkam.ru/pamatniki/mramornyie.html There is a page with product cards on it. When you click on a product card, a modal window opens, and in it there is a slider.

$('.modal').on('shown.bs.modal', function () { $('.slider__prod').slick({ arrows: true, prevArrow: '<button class="slick-prev slick-arrow" aria-label="Prev" type="button" style=""><i class="fa fa-chevron-left" aria-hidden="true"></i></button>', nextArrow: '<button class="slick-next slick-arrow" aria-label="Next" type="button" style=""><i class="fa fa-chevron-right" aria-hidden="true"></i></button>' }); })

Now when you click on any product slider opens from the first element. How to make the slider start with the selected item? Added data cards date attribute data-num. The slick slider has a slide parameter with which the initialSlide slider should start, but it takes an integer number and I cannot enter a string with the name of the variable that stores the date attribute of the selected item. I struggle with the problem a couple of days and already in my head porridge. Tried to do with the filter but failed. Now the code looks like this. Commemorated all the mess

  $('.modal').on('shown.bs.modal', function () { $('.slider__prod').slick({ // initialSlide: 1, arrows: true, prevArrow: '<button class="slick-prev slick-arrow" aria-label="Prev" type="button" style=""><i class="fa fa-chevron-left" aria-hidden="true"></i></button>', nextArrow: '<button class="slick-next slick-arrow" aria-label="Next" type="button" style=""><i class="fa fa-chevron-right" aria-hidden="true"></i></button>' }); }); // var currentSlide = $('.slider__prod').slick('slickCurrentSlide'); // function filterSlider(atrnum) { // $('.slider__prod').slick('slickUnfilter'); // $('.slider__prod').slick('slickFilter', function() { // return $('+atrnum+', this).length === 1; // }); // $('.b1').on('click', function(e) { // var atrnum = ($(this).attr('data-num')); // }); // var slideindex = ($('.slick-slide').attr('data-slick-index')); // $(".col[data-num] a").on('click', function(e){ // var index = $(".col[data-num]:visible a").index(this); // $(".slider__prod").slick('slickUnfilter'); // // if(atrnum == slideindex){ // // $(".slider").slick('slickFilter','.slick-slide['data-slick-index]=slideindex'); // if ($('.b1').attr('data-num') == slideindex) { // $('.slick-slide').addClass('act') // $('.slider__prod').slick('slickFilter','.act'); // }; // // } // }); $('.modal').on('hidden.bs.modal', function (e) { $('.slider__prod').slick('unslick'); })

    1 answer 1

    You can get the data-атрибут from the e object, here is an example:

     $ ('. modal'). on ('shown.bs.modal', function (e) {
   var initialSlide = $ (e.relatedTarget) .data ('num');
   $ ('. slider__prod'). slick ({
     initialSlide: initialSlide,
     arrows: true,
     prevArrow: '',
     nextArrow: ''
   });
 });

    It will work if