Dodałem wszystkie zgrabne pliki i umieściłem je w moim fuctions.php – konsola jest czysta, nie ma teraz żadnych komunikatów o błędach. Zainicjowałem slick w moim niestandardowym pliku js i wywołałem suwak klasy z mojego bloku HTML (używam motywu WordPress 2022 z blokami Gutenberga). Suwak jednak nie działa – czy powinienem dodać najnowszą wersję jquery do mojego folderu motywu? Nie jestem pewien, co może być problemem.

W moich funkcjach.php:

function my_scripts_method() {
if ( !is_admin() ) {
  wp_enqueue_script('jquery');
 }
}
add_action('wp_enqueue_scripts', 'my_scripts_method');

//ENEQUE JS SLICK FILES
add_action( 'wp_enqueue_scripts', 'slick_register_styles' );
function slick_register_styles() {
   wp_enqueue_style( 'slick-css', untrailingslashit( get_theme_file_uri() ) . '/assets/src/library/css/slick.css', [], false, 'all' );
   wp_enqueue_style( 'slick-theme-css', untrailingslashit( get_theme_file_uri() ) . '/assets/src/library/css/slick-theme.css', ['slick-css'], false, 'all' );
   wp_enqueue_script( 'slick-js', untrailingslashit( get_theme_file_uri() ) . '/assets/src/library/js/slick.min.js', ['jquery'], false, true );
   wp_enqueue_script( 'carousel-js', untrailingslashit( get_theme_file_uri() ) . '/assets/src/carousel/index.js', ['jquery', 'slick-js'], filemtime( untrailingslashit( get_theme_file_uri() ) . '/assets/src/carousel/index.js' ), true );
}
// ENEQUE CUSTOM JS FILE
// initialize slick in here
 wp_enqueue_script('js-file', '/wp-content/themes/Twenty Twenty-Two Child/js/myscript.js', array('jquery'), '', false);

W myscript.js:

//initialize slick slider
( function( $ ) {
  class SlickSlider{
    constructor() {
      this.initiateSlider();
    }

    initiateSlider() {
      $( ".slider").slick( {
        dots: false,
        arrows: true,
        infinite: true,
        centerMode:true,
        centerPadding:'60px',  
        slidesToShow: 3,//1?
        slidesToScroll: 1,
        autoplay: true,
        autoplaySpeed: 2000, 
      } );
    }
  }

  new SlickSlider();

} )( jQuery );
//progress bar for slick slider
$(document).ready(function() {
  var $slider = $('.slider');
  var $progressBar = $('.progress');
  var $progressBarLabel = $( '.slider__label' );
  
  $slider.on('beforeChange', function(event, slick, currentSlide, nextSlide) {   
    var calc = ( (nextSlide) / (slick.slideCount-1) ) * 100;
    
    $progressBar
      .css('background-size', calc + '% 100%')
      .attr('aria-valuenow', calc );
    
    $progressBarLabel.text( calc + '% completed' );
  });
 
});

html: (wyjąłem rzeczywisty obraz tutaj)

<div class="slider">
<div class="slider-track">
<div class="slider-content">
    <div class="image">
<img src="" alt="">
 </div> 
</div>

<div class="slider-content">
  <div class="image">
<img src="" alt="">
 </div> 
</div>
</div>
  </div> <!-- end slider -->

  <div class="progress" role="progressbar" aria-valuemin="0" aria-valuemax="100">
    <span class="slider__label sr-only">
  </div>
  </span>
</div> <!-- end content -->
  </div>