WordPress最新帖子轮播



我尝试在轮播中获取最新的WordPress帖子,我没有收到错误,但也没有结果!

这是我正在使用的代码...

<div class = "jumbotron">
    <div id        = "carousel-example-generic"
         class     = "carousel slide"
         data-ride = "carousel">
        <?php
            $my_query = new WP_Query();
            $my_query -> query( 'showposts = 12' );
            $x == 0;
            $do_not_duplicate = $post -> ID;
            echo '    <ol class = "carousel-indicators">n';
            while ( $my_query -> have_posts() ) : $my_query->the_post();
                echo '        <li data-target = "#carousel-example-generic" data-slide-to = "' .
                          $x .
                         '"';
                $x++;
                if( $x == 0 )
                {
                    echo ' class = "active"';
                }
                echo '>n' .
                     '        </li>n';
            endwhile;
            echo '    </ol>n';
        ?>
        <!-- Carousel items -->
        <div class="carousel-inner">
            <?php
                $x == 0;
                while ( $my_query -> have_posts() ) : $my_query -> the_post();
            ?>
            <div class = "<?php if ( $x == 0 ){ echo 'active item';} else { echo 'item';}?>">
                <a href  = "<?php the_permalink() ?>"
                   title = "<?php the_title();?>">
                    <?php echo get_the_post_thumbnail( $id,
                                                       'sliderimg' );?>
                </a>
                <div class = "carousel-caption">
                    <a href  = "<?php the_permalink()?>"
                       rel   = "bookmark"
                       title = "Permanent Link to <?php the_title_attribute();?>">
                        <?php the_title(); ?>
                    </a>
                </div>
            </div>
            <?php
                endwhile;
            ?>
        </div>
        <!-- Carousel nav -->
        <a class      = "left carousel-control"
           data-slide = "prev"
           href       = "#carousel-example-generic">
            <span class = "glyphicon glyphicon-chevron-left">
            </span>
        </a>
        <a class = "right carousel-control"
           data-slide = "next"
           href  = "#carousel-example-generic">
            <span class = "glyphicon glyphicon-chevron-right">
            </span>
        </a>
        <?php
            wp_reset_query();
        ?>
    </div>
</div>

这是我的JS:

jQuery( document ).ready( function( $ )
                          {
                              $( '.carousel' ).carousel( {
                                                             interval : 1000
                                                         }
                                                       )
                          }
                        );

如果您有任何想法,请帮助我。

对不起,伙计们,但这是这个网站的虚拟文本,让我发布我的问题! 我的问题简单明了,我不知道我还能说什么,直到能够发布我的问题!

首先,下载此滑块https://tympanus.net/codrops/2011/08/16/circular-content-carousel/将 js 和 CSS 文件添加到主题目录中 in to post while 循环替换此代码

<div id="primary" class="content-area">
        <main id="main" class="site-main" role="main">
<div class="container">
            <div id="ca-container" class="ca-container">
                <div class="ca-wrapper">
            <?php
            if ( have_posts() ) :
                /* Start the Loop */
                while ( have_posts() ) : the_post();
?>
                <div class="ca-item ca-item-1">
                        <div class="ca-item-main">
                            <div class="ca-icon"> <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
        <?php the_post_thumbnail(); ?>
    </a></div>
                            <h3><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h3>
                            <h4>
                                <span class="ca-quote">&ldquo;</span>
                                <span><?php the_excerpt(); ?></span>
                            </h4>
                                <a href="#" class="ca-more">more...</a>
                        </div>
                        <div class="ca-content-wrapper">
                            <div class="ca-content">
                                <h6><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h6>
                                <a href="#" class="ca-close">close</a>
                                <div class="ca-content-text">
                                    <p><?php the_content(); ?></p>
                                </div>
                                <ul>
                                    <li><?php the_time('F jS, Y'); ?></li>
                                    <li></li>
                                    <li><?php the_author_posts_link(); ?></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <?php
                endwhile;

            else :
                get_template_part( 'template-parts/post/content', 'none' );
            endif;
            ?>
            </div>
            </div>
            </div>
 <link rel="stylesheet" type="text/css" href="<?php bloginfo('template_url'); ?>/css/demo.css" />
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_url'); ?>/css/style2.css" />
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.0.min.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jquery.contentcarousel.js"></script>
<script type="text/javascript">
$('#ca-container').contentcarousel();
</script>
        </main><!-- #main -->
    </div><!-- #primary -->

它会像一样工作

https://tympanus.net/Development/CircularContentCarousel/

最新更新