添加带标签的引导开机自检滑块

时间：2015-07-27 作者：tibewww

我想在我的帖子中添加一个旋转木马。在旋转木马下，一些带有帖子标题的选项卡。

单击文章标题时，应将其更改为幻灯片以显示相关文章。

在“静态”中工作得很好，但当我放置wordpress循环时，滑块停止工作：（。

任何帮助都会非常棒：）：）

我在静态中附加代码，该代码运行良好，如果有帮助，还可以添加带有循环的代码。。。。。

Html：

<div class="container">
<div id="myCarousel" class="carousel slide" data-ride="carousel">

  <!-- Wrapper for slides -->
  <div class="carousel-inner">

    <div class="item active">
      <img src="http://placehold.it/1200x440/cccccc/ffffff">
       <div class="carousel-caption">
        <h3>Headline</h3>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
      </div>
    </div><!-- End Item -->

     <div class="item">
      <img src="http://placehold.it/1200x440/999999/cccccc">
       <div class="carousel-caption">
        <h3>Headline</h3>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
      </div>
    </div><!-- End Item -->

    <div class="item">
      <img src="http://placehold.it/1200x440/dddddd/333333">
       <div class="carousel-caption">
        <h3>Headline</h3>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
      </div>
    </div><!-- End Item -->

    <div class="item">
      <img src="http://placehold.it/1200x440/999999/cccccc">
       <div class="carousel-caption">
        <h3>Headline</h3>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
      </div>
    </div><!-- End Item -->

  </div><!-- End Carousel Inner -->


    <ul class="nav nav-pills nav-justified">
      <li data-target="#myCarousel" data-slide-to="0" class="active"><a href="#">About<small>Lorem ipsum dolor sit</small></a></li>
      <li data-target="#myCarousel" data-slide-to="1"><a href="#">Projects<small>Lorem ipsum dolor sit</small></a></li>
      <li data-target="#myCarousel" data-slide-to="2"><a href="#">Portfolio<small>Lorem ipsum dolor sit</small></a></li>
      <li data-target="#myCarousel" data-slide-to="3"><a href="#">Services<small>Lorem ipsum dolor sit</small></a></li>
    </ul>


</div><!-- End Carousel -->

使用我的wordpress循环：

<div class="col-md-12">
<div id="myCarousel" class="carousel slide" data-ride="carousel">

  <!-- Wrapper for slides -->
  <div class="carousel-inner">

<?php
global $post;
if(is_category() || is_single()){
foreach(get_the_category() as $category)
{
$current = $category->cat_ID;
$current_name = $category->cat_name;

//query_posts("cat=". $current);

$myposts = get_posts(array( \'offset\' => 1, \'category__in\' => array($current)));


//query_posts(array(\'category__in\' => array(11)));
    }
}

foreach($myposts as $post) :
setup_postdata($post); 

?>
    <div class="item active">
                        <div class="punica-zoom-effect"><a href="<?php the_permalink(); ?>"><?php the_post_thumbnail(\'\'); ?></a></div>
       <div class="carousel-caption">
        <h3><?php the_title(); ?></h3>
        <p><?php the_excerpt(); ?></p>
      </div>
    </div><!-- End Item -->

      <?php endforeach; ?>

  </div><!-- End Carousel Inner -->


    <ul class="nav nav-pills nav-justified">

<?php
global $post;
if(is_category() || is_single()){
foreach(get_the_category() as $category)
{
$current = $category->cat_ID;
$current_name = $category->cat_name;

//query_posts("cat=". $current);

$myposts = get_posts(array( \'offset\' => 1, \'category__in\' => array($current)));


//query_posts(array(\'category__in\' => array(11)));
    }
}

foreach($myposts as $post) :
setup_postdata($post); 

?>
      <li data-target="#myCarousel" data-slide-to="0" class="active"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
                <?php endforeach; ?>

    </ul>


</div><!-- End Carousel -->

我的Jquery：

<script>
$(\'#myCarousel\').carousel({
    interval:   4000
});

var clickEvent = false;
$(\'#myCarousel\').on(\'click\', \'.nav a\', function() {
        clickEvent = true;
        $(\'.nav li\').removeClass(\'active\');
        $(this).parent().addClass(\'active\');        
}).on(\'slid.bs.carousel\', function(e) {
    if(!clickEvent) {
        var count = $(\'.nav\').children().length -1;
        var current = $(\'.nav li.active\');
        current.removeClass(\'active\').next().addClass(\'active\');
        var id = parseInt(current.data(\'slide-to\'));
        if(count == id) {
            $(\'.nav li\').first().addClass(\'active\');    
        }
    }
    clickEvent = false;
});

谢谢你们的帮助，伙计们，我希望一切都有意义：）

1 个回复
SO网友:Andy

也许有更好的方法可以做到这一点，但我想我还是试试看：）-这里也有一些答案Adding active class to first item

<div class="container">
    <div id="myCarousel" class="carousel slide" data-ride="carousel">
        <!-- Wrapper for slides -->
        <div class="carousel-inner">
            <?php
            $c = 0;
            $class = \'\';
            $args = array( \'posts_per_page\' => 4);
            $myposts = get_posts( $args );
            foreach ( $myposts as $post ) : setup_postdata( $post );
                $c++;
                $class = ($c == 1) ? \'active\' : \'\';
                ?>
                <div class="item <?php echo $class; ?>">
                    <img src="http://placehold.it/1200x440/999999/cccccc">
                    <div class="carousel-caption">
                        <?php the_title(); ?>
                        <p><?php get_the_excerpt(); ?></p>
                    </div>
                </div><!-- End Item -->
            <?php
            endforeach;
            wp_reset_postdata();
            ?>
        </div><!-- End Carousel Inner -->
    </div>
        <ul class="nav nav-pills nav-justified">
            <?php
            $c = 0;
            $class = \'\';
            $i = 0;
            $args = array( \'posts_per_page\' => 4);
            $myposts = get_posts( $args );
            foreach ( $myposts as $post ) : setup_postdata( $post );
                $c++;
                $class = ($c == 1) ? \'active\' : \'\';
                ?>
                <li data-target="#myCarousel" data-slide-to="<?php echo $i++ ?>" class="<?php echo $class; ?>"><a href="#"><?php the_title(); ?></a></li>
                <?php
            endforeach;
            wp_reset_postdata();
            ?>
        </ul>
    </div><!-- End Carousel -->

    <script>
        $(document).ready( function() {
            $(\'#myCarousel\').carousel({
                interval:   4000
            });
            var clickEvent = false;
            $(\'#myCarousel\').on(\'click\', \'.nav a\', function() {
                clickEvent = true;
                $(\'.nav li\').removeClass(\'active\');
                $(this).parent().addClass(\'active\');
            }).on(\'slid.bs.carousel\', function(e) {
                if(!clickEvent) {
                    var count = $(\'.nav\').children().length -1;
                    var current = $(\'.nav li.active\');
                    current.removeClass(\'active\').next().addClass(\'active\');
                    var id = parseInt(current.data(\'slide-to\'));
                    if(count == id) {
                        $(\'.nav li\').first().addClass(\'active\');
                    }
                }
                clickEvent = false;
            });
        });

    </script>

结束
标签： posts   loop   jquery   twitter-bootstrap   slideshow   小码农  

相关推荐

如何在管理员的wp插件中添加jQuery FullCalendar

wp_register_script(\'moment\', plugin_dir_url( __FILE__ ).\"js/moment.min.js\", false, null, true); wp_register_script(\'fullcalendar\', plugin_dir_url( __FILE__ ).\"js/fullcalendar.min.js\", false, null, true); wp_enqueue_script(\'