Оформить вывод постов в слайдер

@ramapriya · Регистрация: 07.03.2018

Студворк — интернет-сервис помощи студентам

Всем привет.

Имеется слайдер, реализованный с помощью бутстрап:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<!-- Слайдер -->
         <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
           
               <!--Индикатор слайдов-->  
             <ol class="carousel-indicators">
                 <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
                 <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
                 <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
             </ol>
             
               <!--Слайды--> 
              <div class="carousel-inner">
                 <div class="carousel-item active">
                     <img class="d-block w-100" src="<?php bloginfo('template_url'); ?>/img/ice.png" alt="" />
                     <div class="carousel-caption d-md-block">
                      <h1 class="p-3 action-title"><a class="slide-action" href="">Акция №1</a></h1>
                      
                    </div>
                 </div>
                 <div class="carousel-item">
                     <img class="d-block w-100" src="<?php bloginfo('template_url'); ?>/img/snow.png" alt="" />
                     <div class="carousel-caption d-md-block">
                      <h1 class="p-3"><a class="slide-action" href="">Очень крутая акция №2</a></h1>
                      
                    </div>
                 </div>
                 <div class="carousel-item">
                     <img class="d-block w-100" src="<?php bloginfo('template_url'); ?>/img/city.png" alt="" />
                     <div class="carousel-caption d-md-block">
                      <h1 class="p-3"><a class="slide-action" href="">Очень крутая акция №3</a></h1>
                      
                    </div>
                 </div>
             </div>
             
             <!--Стрелки--> 
             <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
 
         </div> <!-- /слайдер-->

Делаю вывод постов:

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<?php query_posts('cat=2');
while( have_posts() ) : the_post(); ?>
<!-- Слайдер -->
         <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
           
               <!--Индикатор слайдов-->  
             <ol class="carousel-indicators">
                 <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
                 <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
                 <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
             </ol>
             
               <!--Слайды--> 
              <div class="carousel-inner">
                 <div class="carousel-item active">
                     <?php the_post_thumbnail($action_size, $slide_img);?>
                     <div class="carousel-caption d-md-block">
                         <h1 class="p-3 action-title"><a class="slide-action" href="<?php echo get_permalink();?>"><?php the_title();?></a></h1>
                      
                    </div>
                 </div>
              
<!--                 <div class="carousel-item">
                     <img class="d-block w-100" src="<?php //bloginfo('template_url'); ?>/img/snow.png" alt="" />
                     <div class="carousel-caption d-md-block">
                      <h1 class="p-3"><a class="slide-action" href="">Очень крутая акция №2</a></h1>
                      
                    </div>
                 </div>
                 <div class="carousel-item">
                     <img class="d-block w-100" src="<?php //bloginfo('template_url'); ?>/img/city.png" alt="" />
                     <div class="carousel-caption d-md-block">
                      <h1 class="p-3"><a class="slide-action" href="">Очень крутая акция №3</a></h1>
                      
                    </div>
                 </div>-->
             </div>
             
             <!--Стрелки--> 
             <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
 
         </div> <!-- /слайдер-->
<?php endwhile; ?>

Получаю следующее:

тогда как в HTML всё нормально работает - слайды прокручиваются и т.п.
(единственный косяк - на маленьких экранах заголовок целиком на слайд не влазит, но это сейчас не так важно)

И да, в бутстрап-слайдере, насколько я помню, на первый слайд нужно вешать класс .active, иначе слайдер работать не будет.

Добавляю класс - результат вы видите на скриншоте, убираю - слайдер пропадает.

В общем, буду рад вашей помощи и советам

@Fedor92 · 13.03.2018, 13:28

Сообщение от ramapriya

В общем, буду рад вашей помощи и советам

Выложите на хостинг пример посмотреть, по виду у Вас неправильно подключаются скрипты...

@ramapriya · 13.03.2018, 14:17 **[ТС]**

Fedor92, http://katunfm.000webhostapp.com/wp/

@Fedor92 · 13.03.2018, 17:23

ramapriya, Вы консоль разработчика хоть изредка открываете? Зачем Вам 3 слайдера на странице?!

Потом ещё и ошибки подключения js-скрипта, версия migrate старовата...

@ramapriya · 13.03.2018, 18:37 **[ТС]**

Fedor92, по всей видимости, это из-за того, что я цикл до начала слайда запустил.... или из-за того, что всем элементам класс active присвоился, опять же, из-за цикла

а что за ошибки с яваскриптом?

Новые блоги и статьи Все статьи Все блоги /
Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	Киев стоит - украинская песня zorxor 28.01.2026 wfWdiRqdTxc О Господи, Вечный, Ты . . . Я помоги, Бесконечный. . . Я прошу Ты. . . Я погибаю, спаси. . . Я прошу Тебя Вечный. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .
влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .	Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .

@ramapriya 0 / 0 / 0 Регистрация: 07.03.2018 Сообщений: 15
	13.03.2018, 14:17 [ТС]
	Fedor92, http://katunfm.000webhostapp.com/wp/ 0

@Fedor92 2964 / 2621 / 1068 Регистрация: 15.12.2012 Сообщений: 10,091 Записей в блоге: 11
	13.03.2018, 17:23
	ramapriya, Вы консоль разработчика хоть изредка открываете? Зачем Вам 3 слайдера на странице?! Потом ещё и ошибки подключения js-скрипта, версия migrate старовата... 0

@ramapriya 0 / 0 / 0 Регистрация: 07.03.2018 Сообщений: 15
	13.03.2018, 18:37 [ТС]
	Fedor92, по всей видимости, это из-за того, что я цикл до начала слайда запустил.... или из-за того, что всем элементам класс active присвоился, опять же, из-за цикла а что за ошибки с яваскриптом? 0