Intereting Posts
Ошибка после удаления пользовательского типа сообщения с помощью функции (не используется корзина) Редактор темы удаляет обратную косую черту wp-load Без загрузки плагинов Преобразование html в wordpress изображения, не показывающие API-интерфейс Customizer и add_panel (). Панель не показывает множественный URL-адрес для одного пользовательского типа сообщения Как вы можете контролировать то, что пользователю разрешено публиковать в бэкэнд? WP-Markdown обрабатывает java-файлы, такие как HTML-теги Загрузка мультимедиа через backend не работает после перемещения сайта Как показать пункт меню панели управления только пользователям с определенными возможностями? Вставка фрагмента кода PHP с помощью короткого кода Обрезать изображение без масштабирования или изменения размера с помощью add_image_size () 2 сайта WordPress с 2 базами данных, но разделяющие одни и те же пользователи Минимальная настраиваемая структура постоянной ссылки Где я могу изменить тег заголовка ACTUAL, который установлен в header.php

добавить слайдер 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>