smargelov
@smargelov
Верстальщик

Встраивание слайдера-карусели Twitter Bootstrap в шаблон Wordpress

Добрый день.
Делаю wordpress сайт. Использую в качестве фреймворка известный Twitter Bootstrap. В принципе, всё без неожиданностей, только вот проблема со слайдером. Дело в том, что стандартный вывод карусели из bootstrap

<div id="myCarousel" class="carousel slide">
  <!-- Carousel items -->
  <div class="carousel-inner">
    <div class="active item">…</div>
    <div class="item">…</div>
    <div class="item">…</div>
  </div>
  <!-- Carousel nav -->
  <a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
  <a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>


я заменил в шаболне WordPress на
<div id="myCarousel" class="carousel slide">
<?php query_posts('showposts=3&cat=5');?>
<div class="carousel-inner">
<?php while (have_posts()) : the_post(); ?>
<div class="item">
<img src="http://placeimg.com/770/340/people" alt="">								
<div class="carousel-caption">									
<p><?php the_time('d.m.Y'); ?></p>									
<h4><?php the_title(); ?></h4>											
</div>										
</div>									
<?php endwhile; ?>									
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>
</div>


На картинку внимание не обращайте. Позже я поставлю туда миниатюру. Проблема в другом.
Итак, при загрузке страницы, слайдер не отображается, до тех пор, пока JS не добавит класс active одному из блоков.
Теперь вопрос. Как сделать так, что бы либо php добавлял этот класс первому встретившемуся div'у либо JS подставлял этот класс блоку сразу после срабатывания скрипта, а не через время, указанное в скрипте

jQuery(document).ready(function($) {
    $('.carousel').carousel({
  		interval: 8000
  	})
});


Я, к огромному своему стыду, практически ничего не знаю ни в JS ни в php (по сравнению с большинством, прочитавших этот текст), так что буду признателен за максимально развёрнутый ответ.
Спасибо

UPD: Решение найдено. Спасибо avalak
  • Вопрос задан
  • 16899 просмотров
Решения вопроса 1
avalak
@avalak
Если мне не изменяет память то как-то так. Codex

<?php if ($wp_query->current_post == 0) echo('active'); ?>

<?= $wp_query->current_post == 0 ? 'active' : '' ?>

Добавить сюда:

<div class="item <?php if ($wp_query->current_post == 0) echo('active'); ?>">...</div>
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы