Как сделать добавление слайдов в слайдер Wordpress?

Question

[Римский]

Здравствуйте. Хочу сделать возможность добавления слайдов в слайдер из админки. Думаю реализовать через отдельный тип записи. Но у слайдера есть типа навигация в виде нумерации skrinshoter.ru/s/050221/sZcA0FbT и вот я не пойму как вместе с ней сделать вывод своих типов записей.

Код слайдера

<div class="lvl5">
    <div class="wrapper">
      <div id="b-slider-change" class="slid-1">
        <div class="slider">
          <ul class="nav-slide">
            <li class="sl1"></li>
            <li class="sl2"></li>
            <li class="sl3"></li>
            <li class="sl4"></li>
            <li class="sl5"></li>
            <li class="sl6"></li>
            <li class="nav-active">1</li>
          </ul><!--end nav-slide -->
          <div class="slider-change-position">
	          <div class="slides">
	            <div class="slide">
	              <div class="b-text">
	                <div class="text-center">
	                  <h3>Сделайте свой выбор</h3>
	                  Список ближайших <strong>IPO</strong> еженедельно обновляется. Изучите деятельность компании, а также ее финансовую отчетность. Самостоятельно оцените потенциал роста и отправьте заявку на приобретение бумаг заинтересовавшего вас эмитента.
	                </div>
	              </div>
	            </div>
	            <div class="slide">
	              <div class="b-text">
	                <div class="text-center">
	                  <h3>Сделайте 2</h3>
	                  Список ближайших <strong>IPO</strong> еженедельно обновляется. Изучите деятельность компании, а также ее финансовую отчетность. Самостоятельно оцените потенциал роста и отправьте заявку на приобретение бумаг заинтересовавшего вас эмитента.
	                </div>
	              </div>
	            </div>
	            <div class="slide">
	              <div class="b-text">
	                <div class="text-center">
	                  <h3>Сделайте 3</h3>
	                  Список ближайших <strong>IPO</strong> еженедельно обновляется. Изучите деятельность компании, а также ее финансовую отчетность. Самостоятельно оцените потенциал роста и отправьте заявку на приобретение бумаг заинтересовавшего вас эмитента.
	                </div>
	              </div>
	            </div>
	            <div class="slide">
	              <div class="b-text">
	                <div class="text-center">
	                  <h3>Сделайте с4</h3>
	                  Список ближайших <strong>IPO</strong> еженедельно обновляется. Изучите деятельность компании, а также ее финансовую отчетность. Самостоятельно оцените потенциал роста и отправьте заявку на приобретение бумаг заинтересовавшего вас эмитента.
	                </div>
	              </div>
	            </div>
	            <div class="slide">
	              <div class="b-text">
	                <div class="text-center">
	                  <h3>Сделайте5</h3>
	                  Список ближайших <strong>IPO</strong> еженедельно обновляется. Изучите деятельность компании, а также ее финансовую отчетность. Самостоятельно оцените потенциал роста и отправьте заявку на приобретение бумаг заинтересовавшего вас эмитента.
	                </div>
	              </div>
	            </div>
	            <div class="slide">
	              <div class="b-text">
	                <div class="text-center">
	                  <h3>Сделайте свой выбор6</h3>
	                  Список ближайших <strong>IPO</strong> еженедельно обновляется. Изучите деятельность компании, а также ее финансовую отчетность. Самостоятельно оцените потенциал роста и отправьте заявку на приобретение бумаг заинтересовавшего вас эмитента.
	                </div>
	              </div>
	            </div>
	          </div>
	        </div><!--end slides -->
    	</div><!--end slider-change-position -->
        <div class="slide-nav-bottom">
        	<div class="slide-steps"><span class="step">01</span> /<span class="steps">06</span></div>
        	<div class="slide-progress"><div class="progress"></div></div>
        	<div class="slide-arrs">
        		<div class="change-prev"></div>
				<div class="change-next"></div>
        	</div>
        </div>
      </div><!--end b-slider-change -->
    </div>
    <div class="bdq dq5-1"><div class="dqq t1"></div><div class="dqq t4"></div></div>
  </div><!--end lvl -->

Comments

[Евгений]

Интересно дизайнер учел возможность добавления 8 и более слайдов?

[Римский]

Евгений, нет, работаю с тем что есть. Об этом сказал сразу, на что получил ответ "дорисуем". Жесть.

Answer 1

[Andrey Vasilev]

https://wordpress.org/plugins/advanced-custom-fields/
Ну и "пагинация" слайдера будет всегда выводится, без цикла.
Тут единственное мини-отличие от стандартных слайдеров - показывать их вот таким образом

Comments

[Римский]

Да, это самое простое решение. Хотел немного гибче но как заметил Евгений "Интересно дизайнер учел возможность добавления 8 и более слайдов?" Хочу добавить что и меньшее ко-во слайдов ломает верстку. Поэтому думаю, что ваш вариант просто вывести редактирование через ACF и все.

[Andrey Vasilev]

Виталий, тут 2 варианта решения:
1) запрещаете в админке добавление более 8 слайдов
2) включаете фантазию и вперёд)

[Andrey Vasilev]

Виталий, если бы смогли реализовать такую схему:
как-только слайд выбран, например первый, он убирается из кружков и на его месте появляется, например, 9 слайд, когда будет выбран 2 слайд, он уберется и появится 10 и так по-кругу. Но я думаю - это того не стоит

Answer 2

[Евгений]

Сделайте цикл для слайдов и цикл для навигации, и на js добавьте событие, чтобы при клике на навигацию, слайды листались

Answer 3

[Николай Миронов]

Здравствуйте, записывал видео для решения похожей задачи: Бутстрап слайдер на ACF Pro (https://youtu.be/N1H_F-ycnKw). Принцип для других слайдеров такой же, по идее можно сделать и вариант на бесплатном ACF

Comments

[Римский]

Отлично спасибо. Как раз в видео показан метод вывода навигации слайдера через цикл. Подписался, благодарю. В моем случае решил использовать лишь простое редактирование т.к. увеличение и уменьшение кол-ва слайдеров ломает верстку.