Show post in slider

时间：2016-02-14 作者：rajwa766

我正在从事wordpress项目。我想以这样的方式显示帖子的详细信息，即前四个帖子缩略图将显示在顶部，并在下面显示第一篇帖子的内容，单击下一个箭头后，它将悬停在下一个缩略图上，并在下面显示下一篇帖子的详细信息。我正在为此使用旋转木马滑块下面是我的代码

 <script>   
                      $(document).ready(function () {
    $(\'#myCarousel\').carousel({
  interval: 4000
})
$(\'.carousel .item\').each(function(){
  var next = $(this).next();
  if (!next.length) {

    next = $(this).siblings(\':first\');
  }
  next.children(\':first-child\').clone().appendTo($(this));

  for (var i=0;i<2;i++) {
    next=next.next();
    if (!next.length) {
        next = $(this).siblings(\':first\');
    }

    next.children(\':first-child\').clone().appendTo($(this));
  }
  });
  });
    </script>

我的HTML设计是

<div class="col-md-12 text-center"><h3>Bootstrap 3 Multiple Slide Carousel</h3></div>
<div class="col-md-12">
<div class="carousel slide" id="myCarousel">
  <div class="carousel-inner">
  <?php

  $args = array(\'post_type\' => \'testimonial\', \'posts_per_page\'  => $posts_per_page,
          \'tax_query\' => array(array(\'taxonomy\' => \'testimonial_category\', \'field\' => \'name\', \'terms\' => $category,)));
query_posts( $args );
 $i = 0;
//var_dump($args );
          while ( have_posts() ) : the_post();
      $item_class = ($i == 0) ? \'item active\' : \'item\'; //Set class active for image which is showing
     ?>
    <div class="<?php echo $item_class; ?>">
      <div class="col-md-3 onclick_image testimonial-image<?php echo $i; ?>"" num ="<?php echo $i; ?>" postid="<?php echo get_the_id(); ?>">
        <?php 
                the_post_thumbnail();
           the_title(); 
           the_content();   
     $i++; ?>
      </div>
    </div>
     <?php 
   endwhile;

// Reset Query
wp_reset_query(); 
 ?>

  </div>
  <a class="left carousel-control" href="#myCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
  <a class="right carousel-control" href="#myCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
</div>
</div>

我想要这样的结果

1 个回复

最合适的回答,由SO网友:raxa 整理而成

我用它在滑块上显示图像。试试这个

<div class="col-md-12">
      <div class="carousel carousel-showmanymoveone slide" id="carousel123">
        <div class="carousel-inner">
          <div class="item active">
            <div class="col-xs-12 col-sm-6 col-md-3"> <img src="<?php echo plugin_dir_url( __FILE__ ) . \'img/download-1.jpg\'; ?>"></div>
          </div>
          <div class="item">
              <div class="col-xs-12 col-sm-6 col-md-3"> <img src="<?php echo plugin_dir_url( __FILE__ ) . \'img/download-1.jpg\'; ?>"></div>
          </div>
          <div class="item">
              <div class="col-xs-12 col-sm-6 col-md-3"> <img src="<?php echo plugin_dir_url( __FILE__ ) . \'img/download-1.jpg\'; ?>"></div>
          </div>          
          <div class="item">
              <div class="col-xs-12 col-sm-6 col-md-3"> <img src="<?php echo plugin_dir_url( __FILE__ ) . \'img/download-1.jpg\'; ?>"></div>
          </div>
          <div class="item">
              <div class="col-xs-12 col-sm-6 col-md-3"> <img src="<?php echo plugin_dir_url( __FILE__ ) . \'img/download-1.jpg\'; ?>"></div>
          </div>
          <div class="item">
              <div class="col-xs-12 col-sm-6 col-md-3"> <img src="<?php echo plugin_dir_url( __FILE__ ) . \'img/download-1.jpg\'; ?>"></div>
          </div>
          <div class="item">
              <div class="col-xs-12 col-sm-6 col-md-3"> <img src="<?php echo plugin_dir_url( __FILE__ ) . \'img/download-1.jpg\'; ?>"></div>
          </div>
          <div class="item">
              <div class="col-xs-12 col-sm-6 col-md-3"> <img src="<?php echo plugin_dir_url( __FILE__ ) . \'img/download-1.jpg\'; ?>"></div>
          </div>
        </div>
        <a class="left carousel-control" href="#carousel123" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
        <a class="right carousel-control" href="#carousel123" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
      </div>
    </div>
  </div>

脚本

(function(){
  $(\'.carousel-showmanymoveone .item\').each(function(){
    var itemToClone = $(this);

    for (var i=1;i<4;i++) {
      itemToClone = itemToClone.next();

      // wrap around if at end of item collection
      if (!itemToClone.length) {
        itemToClone = $(this).siblings(\':first\');
      }

      // grab item, clone, add marker class, add to collection
      itemToClone.children(\':first-child\').clone()
        .addClass("cloneditem-"+(i))
        .appendTo($(this));
    }
  });
}());

css

.carousel-showmanymoveone .carousel-control {
  width: 4%;
  background-image: none;
}
.carousel-showmanymoveone .carousel-control.left {
  margin-left: 15px;
}
.carousel-showmanymoveone .carousel-control.right {
  margin-right: 15px;
}
.carousel-showmanymoveone .cloneditem-1,
.carousel-showmanymoveone .cloneditem-2,
.carousel-showmanymoveone .cloneditem-3 {
  display: none;
}
@media all and (min-width: 768px) {
  .carousel-showmanymoveone .carousel-inner > .active.left,
  .carousel-showmanymoveone .carousel-inner > .prev {
    left: -50%;
  }
  .carousel-showmanymoveone .carousel-inner > .active.right,
  .carousel-showmanymoveone .carousel-inner > .next {
    left: 50%;
  }
  .carousel-showmanymoveone .carousel-inner > .left,
  .carousel-showmanymoveone .carousel-inner > .prev.right,
  .carousel-showmanymoveone .carousel-inner > .active {
    left: 0;
  }
  .carousel-showmanymoveone .carousel-inner .cloneditem-1 {
    display: block;
  }
}
@media all and (min-width: 768px) and (transform-3d), all and (min-width: 768px) and (-webkit-transform-3d) {
  .carousel-showmanymoveone .carousel-inner > .item.active.right,
  .carousel-showmanymoveone .carousel-inner > .item.next {
    -webkit-transform: translate3d(50%, 0, 0);
            transform: translate3d(50%, 0, 0);
    left: 0;
  }
  .carousel-showmanymoveone .carousel-inner > .item.active.left,
  .carousel-showmanymoveone .carousel-inner > .item.prev {
    -webkit-transform: translate3d(-50%, 0, 0);
            transform: translate3d(-50%, 0, 0);
    left: 0;
  }
  .carousel-showmanymoveone .carousel-inner > .item.left,
  .carousel-showmanymoveone .carousel-inner > .item.prev.right,
  .carousel-showmanymoveone .carousel-inner > .item.active {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
    left: 0;
  }
}
@media all and (min-width: 992px) {
  .carousel-showmanymoveone .carousel-inner > .active.left,
  .carousel-showmanymoveone .carousel-inner > .prev {
    left: -25%;
  }
  .carousel-showmanymoveone .carousel-inner > .active.right,
  .carousel-showmanymoveone .carousel-inner > .next {
    left: 25%;
  }
  .carousel-showmanymoveone .carousel-inner > .left,
  .carousel-showmanymoveone .carousel-inner > .prev.right,
  .carousel-showmanymoveone .carousel-inner > .active {
    left: 0;
  }
  .carousel-showmanymoveone .carousel-inner .cloneditem-2,
  .carousel-showmanymoveone .carousel-inner .cloneditem-3 {
    display: block;
  }
}

小码农CODE

Show post in slider

相关推荐

从`/wp-admin/upgrade.php`中删除样式`？ver=`