Несколько слайдеров изображений на одной странице, созданной с помощью цикла php

Question

Я использую WordPress для просмотра своих сообщений и возврата 5 изображений из каждого сообщения.Затем я загружаю эти 5 изображений в слайдер.Я зацикливаюсь на 10 страницах, которые возвращают в общей сложности 10 ползунков на одной странице.Потенциально администратор сайта может создавать бесконечное количество постов (элементов портфолио), получая бесконечное количество слайдеров (по 10 на каждой странице с разбивкой на страницы).

Многие плагины для слайдеров jquery допускают несколько слайдеров наодна страница, но все они требуют, чтобы вы вызывали их с уникальным селектором.Например, первые 5 ползунков будут называться так:

 $("#portfolio-slider-1").bxSlider();
 $("#portfolio-slider-2").bxSlider();
 $("#portfolio-slider-3").bxSlider();
 $("#portfolio-slider-4").bxSlider();
 $("#portfolio-slider-5").bxSlider();

Если бы у меня было 300 ползунков, было бы 300 звонков ... теперь не кажется ли это ненужным?Особенно с Wordpress, имеющим один общий заголовок / footer.php - он будет делать эти вызовы на каждой странице (даже на страницах, которые не имеют этих контейнеров-слайдеров).Абсолютно не нужно.

И другая проблема заключается в назначении динамически генерируемых записей WordPress (элемент портфолио) с уникальным идентификатором.Поскольку WordPress просматривает сообщения, он не может присвоить каждому сообщению идентификатор div, равный 1, затем 2, 3 и т. Д.Wordpress будет давать каждому посту класс .portfolio-slider, который не будет работать с плагином слайдера jquery.

Это просто не кажется правильным.Но опять же, я не могу придумать хорошего решения, которое позволило бы использовать несколько ползунков на одной странице с общим именем класса.Я пробовал это с таким количеством плагинов, и это просто не работает.Все они требуют уникальных идентификаторов!Итак, я предполагаю, что мой вопрос заключается в том, как мне добавить несколько слайдеров изображений на одной странице, которые позволяют динамически генерировать элементы (должно быть имя класса, а не ID)?

Answer 1

Вы сможете сжать несколько вызовов .bxSlider () следующим образом:

$('[id^="portfolio-slider-"]').each(function(){
    $(this).bxSlider();
});

Что в основном означает: для каждого элемента, у которого есть идентификатор, начинающийся с «portfolio-slider-», вызовите .bxSlider ().

Чтобы использовать вместо этого класс .portfolio-slider и применить .bxSlider () к каждому по отдельности:

$('.portfolio-slider').each(function(){
    $(this).bxSlider();
});

Ключ здесь использует каждый, поэтому функция применяется к каждому элементу отдельно, а не к совокупности всех элементов.