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

Здравствуйте. Хочу сделать возможность добавления слайдов в слайдер из админки. Думаю реализовать через отдельный тип записи. Но у слайдера есть типа навигация в виде нумерации 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 -->
  • Вопрос задан
  • 54 просмотра
Решения вопроса 1
Nolis
@Nolis
it-гопник
https://wordpress.org/plugins/advanced-custom-fields/
Ну и "пагинация" слайдера будет всегда выводится, без цикла.
Тут единственное мини-отличие от стандартных слайдеров - показывать их вот таким образом
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
iamd503
@iamd503
Верстальщик
Сделайте цикл для слайдов и цикл для навигации, и на js добавьте событие, чтобы при клике на навигацию, слайды листались
Ответ написан
solidcreature
@solidcreature
WordPress-митапы в Москве (vk.com/wpmeetup)
Здравствуйте, записывал видео для решения похожей задачи: Бутстрап слайдер на ACF Pro (https://youtu.be/N1H_F-ycnKw). Принцип для других слайдеров такой же, по идее можно сделать и вариант на бесплатном ACF
Ответ написан
Ваш ответ на вопрос

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

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