用代码实现一个简单的滑块？

这就是我的所在。已将其插入到页面的html代码中：

<div id="stgSlideshow">
   <div>
     <img src="https://staging.retrorigs.co.uk/wp-content/uploads/2021/03/AdjustedA2600-scaled.jpg">
   </div>
   <div>
     <img src="https://staging.retrorigs.co.uk/wp-content/uploads/2021/03/cropped-Zen-Gardens-Gallery-1-scaled-1.jpg">
   </div>
   <div>
     Test text here...
   </div>
</div>

通过自定义添加了以下CSS>；其他CSS：

/* SLIDER */
#stgSlideshow { 
    margin: 50px auto; 
    position: relative; 
    width: 240px; 
    height: 240px; 
    padding: 10px; 
    box-shadow: 0 0 20px rgba(0,0,0,0.4); 
}

#stgSlideshow > div { 
    position: absolute; 
    top: 10px; 
    left: 10px; 
    right: 10px; 
    bottom: 10px; 
}

最后，我更新了标题。php文件，其中包含一些用于旋转幻灯片的javascript：

<?php
/**
 * The header.
 *
 * This is the template that displays all of the <head> section and everything up until main.
 *
 * @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
 *
 * @package WordPress
 * @subpackage Twenty_Twenty_One
 * @since Twenty Twenty-One 1.0
 */

?>
<!doctype html>
<html <?php language_attributes(); ?> <?php twentytwentyone_the_html_classes(); ?>>
<head>
    <meta charset="<?php bloginfo( \'charset\' ); ?>" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Dosis">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open Sans">
    <script>
        $(function() {
            $("#stgSlideshow > div:gt(0)").hide();
            setInterval(function() { 
                $(\'#stgSlideshow > div:first\')
                    .fadeOut(1000)
                    .next()
                    .fadeIn(1000)
                    .end()
                    .appendTo(\'#stgSlideshow\');
            },  3000);
        });
    </script>   
    <?php wp_head(); ?>
    
</head>

<body <?php body_class(); ?>>
<?php wp_body_open(); ?>
<div id="page" class="site">
    <a class="skip-link screen-reader-text" href="#content"><?php esc_html_e( \'Skip to content\', \'twentytwentyone\' ); ?></a>

    <?php get_template_part( \'template-parts/header/site-header\' ); ?>

    <div id="content" class="site-content">
        <div id="primary" class="content-area">
            <main id="main" class="site-main" role="main">

遗憾的是，没有工作。有什么想法吗？

示例代码

functions.php

functions.php

add_action( \'wp_enqueue_scripts\', \'wpse384608_slider_script\' ); function wpse384608_slider_script() { wp_enqueue_script( \'my-slider\', get_stylesheet_directory_uri() . \'/js/slider-script.js\', array( \'jquery\' ), \'1.0.0\', true ); }

wp_enqueue_script()

true

false

您需要将问题中的JS代码移动到主题中的文件中，位于{theme root}/js/slider-script.js.

js/slider-script.js

jQuery(function() { jQuery("#stgSlideshow > div:gt(0)").hide(); setInterval(function() { jQuery(\'#stgSlideshow > div:first\') .fadeOut(1000) .next() .fadeIn(1000) .end() .appendTo(\'#stgSlideshow\'); }, 3000); });

小码农CODE

示例代码

相关推荐

为访问者和特定角色启用特定的CSS代码