добавить слайдер poststrap post с вкладками

Я пытаюсь добавить карусель с моим сообщением. UNDER карусель, некоторые вкладки с заголовком сообщения.

При щелчке заголовка сообщения он должен изменить его на слайд, чтобы отобразить соответствующую запись.

В «Статике» работает отлично, но когда я помещаю цикл 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; }); 

Спасибо за вашу помощь. Ребята, я надеюсь, что все имеет смысл 🙂

Solutions Collecting From Web of "добавить слайдер poststrap post с вкладками"

Вероятно, есть лучший способ сделать это, но я думал, что я все равно дам ему 🙂 – также получил некоторые ответы отсюда. Добавление активного класса к первому элементу

 <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>