Squeak.ru - шаблоны программирования

Слайдер изображений сначала показывает неправильное изображение

Я использую тему WordPress, Pitch Pro, и у нее есть встроенный слайдер. Моя проблема в том, что иногда ползунок мигает неправильным изображением на секунду. Я заметил, что он не делает это нормально, а только если я захожу со страницы типа поддержки на домашнюю страницу. Я попытался изменить и установить порядок. Изменение максимального количества слайдов, в настоящее время 6, но, похоже, это ничего не исправит.

Сайт в настоящее время jrummy16.com/test, если у кого-то есть какие-либо идеи по исправлению.

Не уверен, что это может быть связано с этим в любом случае, но сервер, который я использую, имеет проблемы, и чтобы исправить это, hostgator сказал мне добавить define('CONCATENATE_SCRIPTS', false); в мой файл config.php. Это устранило проблему, но я не помню, чтобы у ползунка была эта проблема до добавления этого.

Я понятия не имею, как даже начать устранение неполадок. Поэтому любая помощь будет принята с благодарностью.

РЕДАКТИРОВАНИЕ Все файлы были найдены внутри темы Pitch Pro.

Я открыл свой файл home.php и нашел его вверху для слайдера.

<?php
    $slider_template = apply_filters('pitch_slider_template', array('slider', null));   
    get_template_part( $slider_template[0], $slider_template[1] );
?>

Затем я пошел и открыл файл slider.php в той же папке. У него есть этот код,

<?php

$slides = new WP_Query(array(
    'numberposts' => siteorigin_setting('slider_max_slides'),
    'nopaging'     => true,
    'post_type' => 'slide',
    'orderby' => 'menu_order',
    'order' => 'ASC'
));

if($slides->have_posts()){
    ?>
    <div id="slider">
        <div class="container">
            <div class="slides nivoSlider">
                <?php while ($slides->have_posts()) : $slides->the_post(); if(has_post_thumbnail()) :  ?>

                    <?php if(get_post_meta(get_the_ID(), 'slide_destination', true)) : $destination = get_post_meta(get_the_ID(), 'slide_destination', true) ?>
                        <?php echo '<a href="'.esc_url(get_permalink($destination)).'" title="'.esc_attr(get_the_title($destination)).'">' ?>
                    <?php elseif(get_post_meta(get_the_ID(), 'slide_destination_url', true)) : $destination = get_post_meta(get_the_ID(), 'slide_destination_url', true) ?>
                        <?php echo '<a href="'.esc_url($destination).'">' ?>
                    <?php endif; ?>
                    <?php echo get_the_post_thumbnail(get_the_ID(), 'slide') ?>
                    <?php if(!empty($destination)) echo '</a>' ?>
                <?php endif; endwhile; ?>
            </div>

            <?php $slides->rewind_posts(); ?>

            <div class="indicators-wrapper">
                <ul class="indicators">
                    <?php while ($slides->have_posts()) : $slides->the_post(); if(has_post_thumbnail()) :  ?>
                    <li class="indicator <?php if($slides->current_post == 0) echo 'active' ?> indicator-group-<?php echo $slides->post_count ?>">
                        <div class="indicator-container">
                            <div class="pointer"></div>
                            <h4><?php the_title() ?></h4>
                            <?php the_excerpt() ?>
                        </div>
                    </li>
                    <?php endif; endwhile; ?>
                </ul>
            </div>
        </div>
    </div>
    <?php
    wp_reset_postdata();
}

Не знаю, поможет это или нет, но надеюсь, что поможет.


Ответы:


1

Я думаю, причина в том, что до полной загрузки слайдера на странице будет отображаться последнее изображение в списке слайдов, и в вашем случае это:

<img width="705" height="344" src="http://jrummy16.com/test/wp-content/uploads/BA-slider.jpg" class="attachment-slide wp-post-image" alt="BA-slider">

Вот похожая проблема и у него есть несколько решений, которые вы также можете использовать.

ОБНОВЛЕНИЕ:

Я нашел это статья, в которой предлагается изменить ваш CSS. Я бы вставил код сюда, но в статье используется изображение, чтобы показать код CSS :)

01.05.2013
  • Спасибо, но эта ссылка не помогла. Я обновил свой первый пост с кодом, используемым для слайдера. 01.05.2013
  • Я не думаю, что проблема заключается в PHP, а в jQuery/CSS. Я обновил ответ. Может быть, эта ссылка поможет вам. 01.05.2013
  • Новые материалы

    Угловая структура архитектуры
    Обратите внимание, что эта статья устарела, я решил создать новую с лучшей структурой и с учетом автономных компонентов: https://medium.com/@marekpanti/angular-standalone-architecture-b645edd0d54a..

    «Данные, которые большинство людей используют для обучения своих моделей искусственного интеллекта, поставляются со встроенным…
    Первоначально опубликовано HalkTalks: https://hacktown.com.br/blog/blog/os-dados-que-a-maioria-das-pessoas-usa-para-treinar-seus-modelos-de-inteligencia-artificial- ja-vem-com-um-vies-embutido/..

    Сильный ИИ против слабого ИИ: различия парадигм искусственного интеллекта
    В последние годы изучению и развитию искусственного интеллекта (ИИ) уделяется большое внимание и прогресс. Сильный ИИ и Слабый ИИ — две основные парадигмы в области искусственного интеллекта...

    Правильный способ добавить Firebase в ваш проект React с помощью React Hooks
    React + Firebase - это мощная комбинация для быстрого и безопасного создания приложений, от проверки концепции до массового производства. Раньше (знаете, несколько месяцев назад) добавление..

    Создайте API с помощью Python FastAPI
    Создание API с помощью Python становится очень простым при использовании пакета FastAPI. После установки и импорта вы можете создать приложение FastAPI и указать несколько конечных точек. Каждой..

    Веселье с прокси-сервером JavaScript
    Прокси-серверы JavaScript — это чистый сахар, если вы хотите создать некоторую общую логику в своих приложениях, чтобы облегчить себе жизнь. Вот один пример: Связь клиент-сервер Мы..

    Получить бесплатный хостинг для разработчиков | Разместите свой сайт за несколько шагов 🔥
    Статические веб-сайты — это веб-страницы с фиксированным содержанием и его постоянным содержанием. Но теперь статические сайты также обрабатывают динамические данные с помощью API и запросов...