Blog Post slider not working

最近我一直在尝试为我的博客帖子创建自己的滑块，但我无法让它工作。我在网上尝试了不同的代码，但没有一个可以旋转我的列表项（这些是通过post循环创建的）。下面是我尝试的代码W3Schools 但它显示了一个错误Uncaught TypeError: Cannot read property \'style\' of undefined at carousel

这是我的函数。我在索引上调用的php。php显示帖子：

function displayBlogSlider() {

$args = array(

    \'posts_per_page\' => 3
);
// the query
$the_query = new WP_Query( $args );

?>

<?php if ( $the_query->have_posts() ) : ?>

    <div class="slider js--slider">

        <!-- pagination here -->

        <ul class="slider-inner js--slider-inner">
        <!-- the loop -->

            <?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
                <li class="slider-item js--slider-item">
                    <div class="slider-info">    

                            <?php blog_set_featured_background(); ?>
                            <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
                            <p>By <a href="<?php the_author(); ?>"><?php the_author(); ?></a></p>
                            <p><?php the_date(); ?> &mdash; <a href="#"><?php comments_number(); ?></a> &#9679; <a href="#"><?php the_category(); ?></a></p>

                    </div>
               </li>
            <?php endwhile; ?>


        </ul>

        <!-- end of the loop -->
            <div class="slider-nav">
                <a href="#" class="nav-prev js--nav-prev">&lt;</a>
                <a href="#" class="nav-next js--nav-next">&gt;</a>
            </div>

    </div>

    <!-- pagination here -->

    <?php wp_reset_postdata(); ?>

<?php else : ?>
    <p><?php esc_html_e( \'Sorry, no posts matched your criteria.\' ); ?></p>
<?php endif;
}

function blog_set_featured_background() {
    $image_url = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), full, false );
    if ($image_url[0]) {
    ?>
        <style>

        .slider-inner {
            height:100%;
            margin:0!important;
        }
        .slider-inner {
            background: linear-gradient( rgba(0, 0, 0, 0.20), rgba(0, 0, 0, 0.80)), url(<?php echo $image_url[0]; ?>) #000 no-repeat;
            background-position: center;
            background-size: cover;

        }
        </style>
 <?php
 }
}

下面是我的javascript，用于使列表项旋转（类似于W3S）：

var myIndex = 0;
carousel();
function carousel() {
    var i;
    var listItem = document.getElementsByClassName("js--slider-item");

    for(i = 0; i < listItem.length; i++) {
        listItem[i].style.display = "none";
    }

    myIndex++;

    if(myIndex > listItem.length) {
        myIndex = 1;
    }

    listItem[myIndex-1].style.display = "block";
    setTimeout(carousel, 3000);
}

如果有更好的方式为wordpress博客帖子制作旋转木马，我会接受所有建议和信息。But 我想自己创建它，我不想使用插件。此外，我更喜欢纯javascript，因为我还在学习它。

我想在这里创建类似于第一个滑块的东西-https://manohara.incredibbble.com/

var myIndex = 0; carousel(); function carousel() { var i; var listItem = document.getElementsByClassName("js--slider-item"); for(i = 0; i < listItem.length; i++) { listItem[i].css("display", "none"); } myIndex++; if(myIndex > listItem.length) { myIndex = 1; } listItem[myIndex-1].css("display", "block"); setTimeout(carousel, 3000);

function blog_set_featured_background() { $image_url = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), full, false ); if ($image_url[0]) { ?> <style> #slider-item-<?php echo $post->ID; ?> { background: linear-gradient( rgba(0, 0, 0, 0.20), rgba(0, 0, 0, 0.80)), url(<?php echo $image_url[0]; ?>) #000 no-repeat; } </style> <?php } }

javascript ajax and nonce

在动态创建表单时，我很难使用Wordpress nonce验证通过对php后端的XML请求来实现nonce。我同意表单构建版本wp_nonce_field( \'delete-comment_\'.$comment_id ); 因此，在通过javascript本地化时，我尝试使用其他nonce选项。$nonce = wp_create_nonce( \'my-action_\'.$post->ID ); 然后要验证，似乎有两种选择。check_ajax_referer( \'p

相关推荐

javascript ajax and nonce