使用Javascript将slick-slider集成到Wordpress中

如何解决使用Javascript将slick-slider集成到Wordpress中

我对.js还是很陌生，现在我试图将.js滑块集成到Wordpress.v中。我试图让Slick-Slider在网站上工作。它在我的静态网页上可以正常工作，但是一旦我尝试将其迁移到Wordpress时，我便无法正常工作。不知道这是否是Wordpress中的冲突或我做错了什么。这是我在我的functions.php中注册我的js和css文件的方式-在浏览器中没有显示错误。

function mytheme_files() {

wp_enqueue_style('styles',get_theme_file_uri('/css/styles.css'));   
wp_enqueue_style('slick-css',get_theme_file_uri('/slick/slick.css'));   

wp_register_script('jquery','//https://code.jquery.com/jquery-3.5.1.js',NULL,'3.5.1',true);  
wp_enqueue_script('jquery_migrate',get_theme_file_uri('//https://code.jquery.com/jquery-migrate-3.3.1.min.js'),array(),true); 

    wp_enqueue_script('slick-js',get_stylesheet_directory_uri() . '/slick/slick.min.js',array('jquery'),true );   
    wp_enqueue_script('val-slider',get_stylesheet_directory_uri() . '/js/val-slider.js',true ) ; 


wp_enqueue_script('main',get_stylesheet_directory_uri() . '/js/custom.js',true ) ; 
       
}

add_action('wp_enqueue_scripts','mytheme_files');

?>

然后在一个单独的js文件中，我尝试使用以下代码注册滑块：

$(document).ready( function( ) {
$('.slideshow').slick({
    dots: true,infinite: true,speed: 300,slidesToShow:1,slidesToScroll: 10
});

我将为您提供任何建议！

标记

解决方法

我看到了一些尝试的方法。

首先，请确保将自定义js文件设置为具有“ slick-js”依赖项。这样，它会在滑动滑块完成之后加载。

此外，jquery已经是wordpress的一部分，因此您不需要再次加入它。但是，对于您的自定义脚本和代码来说，都应该是依赖项：

wp_enqueue_script('main',get_stylesheet_directory_uri() . '/js/custom.js',array('slick-js','jquery'),NULL,true ) ; 

第二，我不确定val-slider是什么，但可能与光滑的滑块冲突。我建议仅使用一个javascript滑块作为主题。 Slick功能强大且可自定义，因此是一个不错的选择。

第三，光滑的滑块通常还具有您应该包括的theme-styles.css文件。这样会使滑块更漂亮，并在正确的位置放置箭头/点。

第四，我不确定您的HTML是什么样子，但是请确保类.slideshow的div是幻灯片的直接父级（通常是for或foreach循环。）是否还有另一个div然后在那儿，slick会将其解释为一张幻灯片。这是一个示例：

<div class="slideshow">
   <?php
   foreach($slides as $slide) {
     echo '<div class="slide">'; //this class name is unimportant
        //slide content here
     echo '</div>';
   };
   ?>
</div>

第五，不确定这是否是复制/粘贴错误，但是您在JavaScript中缺少结尾)};。

最后，这不会打断光滑的滑块，但是可能会导致一些奇怪的事情发生；您有slidesToScroll: 10，但只显示一张幻灯片slidesToShow:1。我认为这是个好习惯。

,

非常感谢，现在终于可以了。我不知道的另一件事是，我用jQuery替换了$，所以我的custom.js看起来像这样：

    `jQuery('.slider').slick({
          arrows: false,slidesToShow: 1,slidesToScroll: 1,arrows: false,focusOnSelect: false,});`

现在它终于开始运行了