Set custom timer for Slick slideshow based on field value I have a Slick slideshow. My nodes have a Timer field. Right now, I am setting the time of the slick slide like so:

Drupal.behaviors.mrpeanut = {
  attach: function (context, settings) {
    var $slider = $("#slick-views-slideshow-page-1-slider");
    $slider.once('mrpeanut').on("afterChange", function(event, slick, currentSlide) {
            slideTime = $('div.slide--' + slick.currentSlide + ' div.field--name-field-timer').text();
            $slider.slick("setOption", "autoplaySpeed", slideTime);
        });
  }
}


However, I had some feedback that I may be better off to preprocess the field then attach a JS settings array with all the timer values. This is what I started piecing together based on some discussion in Slack (thanks, @nikathone).

In mrpeanut.module:

function mrpeanut_preprocess_node(&amp;$variables) {
    $variables['#attached']['library'][] = 'mrpeanut/mrpeanut';
    $node = $variables['node'];
    $slideTime = $node-&gt;hasField('field_timer') ? $node-&gt;get('field_timer')-&gt;value : 20000;
    $slideTime = $slideTime * 1000; // Convert milliseconds to seconds
    $variables['#attached']['drupalSettings']['slideTime'][$node-&gt;id()] = $slideTime;
}


In mrpeanut.js:

(function($, Drupal, drupalSettings) {
    Drupal.behaviors.mrpeanut = {
        attach: function(context, settings) {
            var $slider = $("#slick-views-slideshow-page-1-slider");
            var slideTime = drupalSettings.slideTime;

            // Get Node ID from the article
            var nodeAbout = $('.slide').find('article').attr('about');
            var nodeID = nodeAbout.substring(6, $('.slide').find('article').attr('about').length);

            $slider.once('mrpeanut').on("afterChange", function(event, slick, currentSlide) {
                $slider.slick("setOption", "autoplaySpeed", slideTime);
            });
        }
    }
})(jQuery, Drupal, drupalSettings);


However, it's not actually setting the correct timer values. One issue I'm having is that I need to capture all Node IDs from the view (whereas now I am only getting the first). Second, I'm setting the time slide on the afterChange instead of initially all-at-once.
Here's my final mrpeanut.js:

(function($, Drupal, drupalSettings) {
    Drupal.behaviors.mrpeanut = {
        attach: function(context, settings) {
            var slider = $("#slick-views-slideshow-page-1-slider");
            var slideTime = drupalSettings.slideTime;
            var nodeIdArray = []
            $('article').each(function(i){
                var nodeAbout = $(this).attr('about');
                var nodeID = nodeAbout.substring(6, $(this).attr('about').length);
                nodeIdArray.push(nodeID);
            });

            slider.once('mrpeanut').on("afterChange", function(event, slick, currentSlide) {
                slider.slick('slickSetOption', 'autoplaySpeed', slideTime[nodeIdArray[currentSlide]], true);
            });
        }
    }
})(jQuery, Drupal, drupalSettings);