使用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,});`

现在它终于开始运行了

相关问答

错误1:Request method ‘DELETE‘ not supported 错误还原:...
错误1:启动docker镜像时报错:Error response from daemon:...
错误1:private field ‘xxx‘ is never assigned 按Alt...
报错如下,通过源不能下载,最后警告pip需升级版本 Requirem...