Я слегка сбит с толку этими двумя ползунками, которые я настраиваю. Почему они оба получают дополнительный пустой слайд?
У меня ранее было много ползунков на одной странице, и я впервые вижу, что они создают свои собственные слайды.
Я вытягиваю в содержании из сообщений блога, используя wp_query. Это работает успешно без дополнительного контента, созданного, когда нет инициализации js для ползунков.
РЕДАКТИРОВАТЬ (Перефразирование и добавление более подробной информации в качестве исходного вопроса, возможно, было неясным):
Я запускаю два слайдера, эти слайдеры запускаются и успешно становятся слайдерами, однако оба они создаются с дополнительным слайдом в конце каждого списка слайдов. Эти слайды не должны быть там, и данные, которые они просматривают, содержат на один индекс меньше, чем показанный слайдером, то есть оба слайдера имеют пустой слайд (если в фоновом режиме есть 6 записей, то будет показано 7 слайдов).
Может кто-нибудь помочь мне предотвратить показ этого дополнительного слайда?
<div class="col-12 md:col-6 lg:col-4 px3 mb3 sm:mb4 lg:mb0">
<h3 class="h2 md:h1 extra-bold uppercase mt0 mb0">Events</h3>
<?php
$latest_events = new WP_Query( array(
'post_type' => 'events',
'orderby' => 'publish_date',
'order' => 'ASC'
)); ?>
<?php if( $latest_events->have_posts() ) : ?>
<ul id="events-slider" class="news-events-slider list-reset mt0 mb0">
<?php while( $latest_events->have_posts() ) : $latest_events->the_post(); ?>
<?php
$event_title = get_the_title();
$event_start_date = get_field('event_start_date');
$event_end_date = get_field('event_end_date');
$event_location = get_field('event_location');
$event_excerpt = excerpt(55);
$event_link = get_the_permalink(); ?>
<li class="event-slide border-top border-white pt2 mt2">
<h4 class="uppercase mt0 mb0">
<?php echo $event_title ?>
</h4>
<p class="primary uppercase mt0 mb0">
<?php echo $event_start_date; ?>
<?php if( $event_end_date ) : ?> - <?php echo $event_end_date; ?><?php endif; ?>
<?php if( $event_location ) : ?>
<span style="position: relative; top: -1px; margin: 0 3px;">|</span>
<?php echo $event_location; ?>
<?php endif; ?>
</p>
<p class="h5 mt1">
<?php echo $event_excerpt; ?>
</p>
</li>
<?php endwhile; ?>
<?php wp_reset_postdata(); ?>
<ul>
<?php else : ?>
<p>No events</p>
<?php endif; ?>
</div>
<div class="col-12 md:col-6 lg:col-4 px3 mb3 sm:mb4 lg:mb0">
<h3 class="h2 md:h1 extra-bold uppercase mt0 mb0">News</h3>
<?php
$latest_news = new WP_Query( array(
'category_name' => 'news',
'orderby' => 'publish_date',
'order' => 'DESC'
)); ?>
<?php if( $latest_news->have_posts() ) : ?>
<ul id="news-slider" class="news-events-slider list-reset mt0 mb0">
<?php while( $latest_news->have_posts() ) : $latest_news->the_post(); ?>
<?php
// $post_thumbnail_id = get_post_thumbnail_id( $post->ID );
// $post_thumbnail_alt = get_post_meta($post_thumbnail_id, '_wp_attachment_image_alt', true);
// $post_thumbnail_url = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'single-post-thumbnail' )[0];
$article_title = get_the_title();
$article_date = get_the_date( get_option('data_format') );
$article_excerpt = excerpt(11);
// $post_time = get_post_time( 'g:i a' );
$article_link = get_the_permalink(); ?>
<li class="news-slide border-top border-white pt2 mt2">
<h4 class="uppercase mt0 mb0">
<a href="<?php echo $article_link; ?>" class="primary">
<?php echo $article_title ?>
</a>
</h4>
<p class="uppercase mt0 mb0">
<?php echo $article_date; ?>
</p>
<p class="h5 mt1">
<?php echo $article_excerpt; ?>
</p>
<a href="<?php echo $article_link; ?>" class="btn btn-outline primary h6 uppercase py1 mb1">
View more
</a>
</li>
<?php endwhile; ?>
<?php wp_reset_postdata(); ?>
<ul>
<?php else : ?>
<p>No news</p>
<?php endif; ?>
</div>
Затем я запускаю ползунки, используя следующие фрагменты js:
<script>
$('#news-slider').slick({
dots: true,
arrows: false,
infinite: false,
autoplay: false,
slidesToShow: 1
});
$('#events-slider').slick({
dots: true,
arrows: false,
infinite: false,
autoplay: false,
slidesToShow: 1
});
</script>
Затем я получаю неожиданный результат последнего слайда, которого там совершенно не должно быть, который отображается как пустой слайд: (
Как это прикреплено:
Выходной код:
<div class="flex flex-wrap mxn3">
<div class="col-12 md:col-6 lg:col-4 px3 mb3 sm:mb4 lg:mb0" role="toolbar">
<h3 class="h2 md:h1 extra-bold uppercase mt0 mb0">Events</h3>
<ul id="events-slider" class="news-events-slider list-reset mt0 mb0 slick-initialized slick-slider slick-dotted">
<div aria-live="polite" class="slick-list draggable">
<div class="slick-track" style="opacity: 1; width: 2520px; transform: translate3d(-2160px, 0px, 0px);" role="listbox">
<li class="event-slide border-top border-white pt2 mt2 slick-slide" data-slick-index="0" aria-hidden="true" style="width: 360px;" tabindex="-1" role="option" aria-describedby="slick-slide10">
<h4 class="uppercase mt0 mb0"> ITM Poland 2020</h4>
<p class="primary uppercase mt0 mb0"> June 2 - June 5 <span style="position: relative; top: -1px; margin: 0 3px;">|</span> Poznan Congress Center, Poland</p>
<p class="h5 mt1"> Example will be exhibiting at ITM Poland on the 2nd – 5th June 2020 at the Poznan Congress Center.</p>
</li>
<li class="event-slide border-top border-white pt2 mt2 slick-slide" data-slick-index="1" aria-hidden="true" style="width: 360px;" tabindex="-1" role="option" aria-describedby="slick-slide11">
<h4 class="uppercase mt0 mb0"> Fabtech 2020</h4>
<p class="primary uppercase mt0 mb0"> November 18 - November 20 <span style="position: relative; top: -1px; margin: 0 3px;">|</span> Las Vegas Convention Center, Las Vegas, NV 89109, USA</p>
<p class="h5 mt1"> Example will be exhibiting at Fabtech, Las Vegas, on the 18th to 20th June 2020 at the Las Vegas Convention Center, 3150 Paradise Road, Las Vegas, NV 89109, USA </p>
</li>
<li class="event-slide border-top border-white pt2 mt2 slick-slide" data-slick-index="2" aria-hidden="true" style="width: 360px;" tabindex="-1" role="option" aria-describedby="slick-slide12">
<h4 class="uppercase mt0 mb0"> Beijing Essen Welding & Cutting Fair</h4>
<p class="primary uppercase mt0 mb0"> June 2 - June 5 <span style="position: relative; top: -1px; margin: 0 3px;">|</span> Shenzhen World Exhibition & Convention Center, Shenzhen, China</p>
<p class="h5 mt1"> Example will be exhibiting at Beijing Essen Welding & Cutting Fair on the 2nd – 5th June 2020 at the Shenzhen World Exhibition & Convention Center, Shenzhen, China</p>
</li>
<li class="event-slide border-top border-white pt2 mt2 slick-slide" data-slick-index="3" aria-hidden="true" style="width: 360px;" tabindex="-1" role="option" aria-describedby="slick-slide13">
<h4 class="uppercase mt0 mb0"> TWI 2020</h4>
<p class="primary uppercase mt0 mb0"> June 4 <span style="position: relative; top: -1px; margin: 0 3px;">|</span> Granta Centre, TWI Ltd, Cambridge, UK</p>
<p class="h5 mt1"> Example will be exhibiting at TWI, the UK and Joining Exhibition on the June 4th 2020 at the Granta Centre, TWI Ltd, Great Abington, Cambridge.</p>
</li>
<li class="event-slide border-top border-white pt2 mt2 slick-slide" data-slick-index="4" aria-hidden="true" style="width: 360px;" tabindex="-1" role="option" aria-describedby="slick-slide14">
<h4 class="uppercase mt0 mb0"> EXPOWELDING 2020</h4>
<p class="primary uppercase mt0 mb0"> October 13 - October 15 <span style="position: relative; top: -1px; margin: 0 3px;">|</span> Expo Silesia, 41219 Sosnowiec, Poland</p>
<p class="h5 mt1"> Example will be exhibiting at the ExpoWelding, Sosnowiec, Poland on the 13th to 15th October 2020 at the Expo Silesia, Braci Mieroszewskich 124, 41219 Sosnowiec, Silesia, Poland</p>
</li>
<li class="event-slide border-top border-white pt2 mt2 slick-slide" data-slick-index="5" aria-hidden="true" style="width: 360px;" tabindex="-1" role="option" aria-describedby="slick-slide15">
<h4 class="uppercase mt0 mb0"> METALEX 2020</h4>
<p class="primary uppercase mt0 mb0"> November 18 - November 21 <span style="position: relative; top: -1px; margin: 0 3px;">|</span> Bangkok International Trade & Exhibition Centre</p>
<p class="h5 mt1"> Example will be exhibiting at Metalex, Bangkok, Thailand on the 18th to 21st November 2020 at the Bangkok International Trade & Exhibition Centre, 88 Debaratana Rd, แขวง บางนาใต้ Bang Na, Bangkok, Thailand</p>
</li>
<ul class="slick-slide slick-current slick-active" data-slick-index="6" aria-hidden="false" style="width: 400px;" tabindex="-1" role="option" aria-describedby="slick-slide16"></ul>
</div>
</div>
<ul class="slick-dots" style="" role="tablist">
<li class="" aria-hidden="true" role="presentation" aria-selected="true" aria-controls="navigation10" id="slick-slide10"><button type="button" data-role="none" role="button" tabindex="0">1</button></li>
<li aria-hidden="true" role="presentation" aria-selected="false" aria-controls="navigation11" id="slick-slide11"><button type="button" data-role="none" role="button" tabindex="0">2</button></li>
<li aria-hidden="true" role="presentation" aria-selected="false" aria-controls="navigation12" id="slick-slide12"><button type="button" data-role="none" role="button" tabindex="0">3</button></li>
<li aria-hidden="true" role="presentation" aria-selected="false" aria-controls="navigation13" id="slick-slide13"><button type="button" data-role="none" role="button" tabindex="0">4</button></li>
<li aria-hidden="true" role="presentation" aria-selected="false" aria-controls="navigation14" id="slick-slide14"><button type="button" data-role="none" role="button" tabindex="0">5</button></li>
<li aria-hidden="true" role="presentation" aria-selected="false" aria-controls="navigation15" id="slick-slide15"><button type="button" data-role="none" role="button" tabindex="0">6</button></li>
<li aria-hidden="false" role="presentation" aria-selected="false" aria-controls="navigation16" id="slick-slide16" class="slick-active"><button type="button" data-role="none" role="button" tabindex="0">7</button></li>
</ul>
</ul>
</div>
<div class="col-12 md:col-6 lg:col-4 px3 mb3 sm:mb4 lg:mb0" role="toolbar">
<h3 class="h2 md:h1 extra-bold uppercase mt0 mb0">News</h3>
<ul id="news-slider" class="news-events-slider list-reset mt0 mb0 slick-initialized slick-slider slick-dotted">
<div aria-live="polite" class="slick-list draggable">
<div class="slick-track" style="opacity: 1; width: 1080px; transform: translate3d(-720px, 0px, 0px);" role="listbox">
<li class="news-slide border-top border-white pt2 mt2 slick-slide" data-slick-index="0" aria-hidden="true" style="width: 360px;" tabindex="-1" role="option" aria-describedby="slick-slide00">
<h4 class="uppercase mt0 mb0"> <a href="https://www.camvaceng.com/chinese-office-now-open/" class="primary" tabindex="-1"> Chinese office now open </a></h4>
<p class="uppercase mt0 mb0"> March 17, 2020</p>
<p class="h5 mt1"> Chinese office now open – Incorporation of Aquasium Technology (Beijing) Co.…</p>
<a href="https://www.camvaceng.com/chinese-office-now-open/" class="btn btn-outline primary h6 uppercase py1 mb1" tabindex="-1"> View more </a>
</li>
<li class="news-slide border-top border-white pt2 mt2 slick-slide" data-slick-index="1" aria-hidden="true" style="width: 360px;" tabindex="-1" role="option" aria-describedby="slick-slide01">
<h4 class="uppercase mt0 mb0"> <a href="https://www.camvaceng.com/revolutionary-new-beam-welding-technology-set-to-fast-track-large-manufacturing-projects/" class="primary" tabindex="-1"> Revolutionary New Beam Welding Technology Set To Fast-Track Large Manufacturing Projects </a></h4>
<p class="uppercase mt0 mb0"> April 12, 2019</p>
<p class="h5 mt1"> A new technology could improve the efficiency of large-scale manufacturing projects…</p>
<a href="https://www.camvaceng.com/revolutionary-new-beam-welding-technology-set-to-fast-track-large-manufacturing-projects/" class="btn btn-outline primary h6 uppercase py1 mb1" tabindex="-1"> View more </a>
</li>
<ul class="slick-slide slick-current slick-active" data-slick-index="2" aria-hidden="false" style="width: 400px;" tabindex="-1" role="option" aria-describedby="slick-slide02"></ul>
</div>
</div>
<ul class="slick-dots" style="" role="tablist">
<li class="" aria-hidden="true" role="presentation" aria-selected="true" aria-controls="navigation00" id="slick-slide00"><button type="button" data-role="none" role="button" tabindex="0">1</button></li>
<li aria-hidden="true" role="presentation" aria-selected="false" aria-controls="navigation01" id="slick-slide01"><button type="button" data-role="none" role="button" tabindex="0">2</button></li>
<li aria-hidden="false" role="presentation" aria-selected="false" aria-controls="navigation02" id="slick-slide02" class="slick-active"><button type="button" data-role="none" role="button" tabindex="0">3</button></li>
</ul>
</ul>
</div>
</div>
Если бы кто-нибудь мог помочь мне отладить это, клиент действительно настаивал на этом, и я был бы очень признателен за помощь!