Question

这是实际布局：https://i.stack.imgur.com/LEB8Z.png

它在引导布局内包含一个wordpress post循环，每页包含三篇文章。

我在右侧有一个next按钮，该按钮当前正在加载旧帖子的下一页，但没有任何动画。我要做的是如何正确设置后退按钮并添加过渡效果，类似于引导旋转木马中的水平幻灯片。

正文中的代码：

          <script type="text/javascript">
              var ajaxurl = "<?php echo admin_url( 'admin-ajax.php' ); ?>";
              var page1000 = 2;
              jQuery(function($) {
                $('body').on('click', '.loadmore1000', function() {
                  var data = {
                    'action': 'load_posts_by_ajax1000',
                    'page1000': page1000,
                    'security1000': '<?php echo wp_create_nonce("load_more_posts1000"); ?>'
                  };
              $.post(ajaxurl, data, function(response) {
                    $('.my-posts1000').html(response);
                    page1000++;
                  });
                });
              });
              </script>
          <div class="row news">
          <div class="col-md-10 offset-md-1 margin-top-2 margin-bottom-2">
              <h2 class="text-center">News</h2> 
              <div class="row my-posts1000">  
                  <?php
                  $paged = ( get_query_var( 'paged' ) );
                  $args = array (
                      'orderby'                => 'date',
                      'order'                  => 'DSC',
                      'posts_per_page' => 3,
                      'paged'         => 1,
                      'category_name'         => 'News',        
                  );
                 $query = new WP_Query( $args ); ?>
                  <?php if ( $query->have_posts() ) : ?>            
                       <?php while ( $query->have_posts() ) : $query->the_post(); ?>            
                              <div class="col-md-4 ">
                              <!--Here there's further content....-->
                              </div>
                 <?php endwhile; ?>               
                  </div>
                 </div>
                 <?php if (  $query->max_num_pages > 1 ) 
            echo '<div class="col-md-1">
                <div class="loadmore1000">
                <p>
                    <a href="#/"><span class="carousel-control-next-icon"></span></a>
                    </p>
                 </div>
                 </div>'; ?>                
                  <?php else : ?>
                  <?php endif; ?>
                <?php wp_reset_postdata(); ?>
              </div>

函数代码

  add_action('wp_ajax_load_posts_by_ajax1000', 'load_posts_by_ajax_callback1000');
  add_action('wp_ajax_nopriv_load_posts_by_ajax1000', 'load_posts_by_ajax_callback1000');

  function load_posts_by_ajax_callback1000() {
      check_ajax_referer('load_more_posts1000', 'security1000');
      $paged1000 = $_POST['page1000'];
              $args = array (

              'orderby'                => 'date',
              'order'                  => 'DSC',
              'posts_per_page' => 3,
              'category_name'         => 'News',
              'paged' => $paged1000,
             );
          $query = new WP_Query( $args ); ?>
          <?php if ( $query->have_posts() ) : ?>

              <?php while ( $query->have_posts() ) : $query->the_post(); ?>
                    <div class="col-md-4 ">
                      <!--Here there's further content....-->
                    </div>              
          <?php endwhile ?>
      <?php
      endif;
      wp_die();
  }

为引导网格内的wordpress post循环添加过渡和上一个/下一个ajax按钮

0 个答案: