Блог

Я создаю простой веб-сайт с одним макетом страницы с Elementor Pro и темой Hello. У меня есть проблема. В разделе на веб — сайте собрана компоновка из 3 столбцов. На рабочем столе это выглядит красиво, но на мобильных устройствах я бы предпочел показать этот раздел в виде слайдера. Я обнаружил, что Elementor использует SwiperJS для слайдера. Вот код, который я должен превратить в слайдер на мобильном телефоне:

 <section class="elementor-section elementor-inner-section elementor-element elementor-element-53777fe3 elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="53777fe3" data-element_type="section" id="summary">
    <div class="elementor-container elementor-column-gap-no">
         <div class="elementor-column elementor-col-33 elementor-inner-column elementor-element elementor-element-145d728 animated bounceInLeft" data-id="145d728" data-element_type="column" data-settings="{amp;quot;animationamp;quot;:amp;quot;bounceInLeftamp;quot;}">( content of column/slide )</div>
         <div class="elementor-column elementor-col-33 elementor-inner-column elementor-element elementor-element-4c151e67 animated bounceInLeft" data-id="4c151e67" data-element_type="column" data-settings="{amp;quot;animationamp;quot;:amp;quot;bounceInLeftamp;quot;}">( content od column/slide )</div>
         <div class="elementor-column elementor-col-33 elementor-inner-column elementor-element elementor-element-53280d85 animated bounceInLeft" data-id="53280d85" data-element_type="column" data-settings="{amp;quot;animationamp;quot;:amp;quot;bounceInLeftamp;quot;}"></div>              
    </div>
</section>
 

Как вы можете видеть, я добавил в раздел краткое описание идентификатора#. Затем я создал пользовательские файлы js и css и загрузил их вручную.

custom.js:

 var mySwiper = new Swiper('#summary', {
    slidesPerView: 1,
    spaceBetween: 10,
    slideClass: 'elementor-column',
    wrapperClass: 'elementor-container',
    breakpoints: {
        640: {
            slidesPerView: 1,
            spaceBetween: 20,
        },
        768: {
            slidesPerView: 1,
            spaceBetween: 40,
        },
        1024: {
            slidesPerView: 3,
            spaceBetween: 0,
        },
    }
});
 

пользовательский файл.css:

 @media screen and (max-width: 768px) {
    #summary .elementor-container {
        width: 100%;
        height: 100%;
        margin-left: auto;
        margin-right: auto;
        position: relative;
        overflow: hidden;
        list-style: none;
        padding: 0;
        z-index: 1;
    }
    #summary .elementor-container {
        position: relative;
        width: 100%;
        height: 100%;
        z-index: 1;
        display: flex;
        transition-property: transform;
        box-sizing: content-box;
        -webkit-flex-wrap: nowrap;
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    }
    #summary .elementor-container .elementor-column {
        flex-shrink: 0;
        width: 100%;
        height: 100%;
        position: relative;
        transition-property: transform;

        /* Center slide text vertically */
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
    }
}
 

Затем я изменил functions.php и загружаю свои файлы:

 wp_enqueue_script( 'custom', get_theme_file_uri( 'assets/js/custom.js' ), ['jquery', 'swiper'], '', true );
wp_enqueue_style('custom', get_template_directory_uri('custom.css'));
 

Поэтому я подумал, что все выглядит хорошо. Какой эффект?

1. Мои файлы custom.js и пользовательский файл.css правильно загружен.
2. swiper.js является ли лаодед раньше custom.js.
3. тег раздела содержит новые классы .swiper-контейнер-инициализирован и .swiper-контейнер-горизонтальный
4. Первый тег div с классом элемента-столбца имеет новый класс .swiper-слайд-активен
5. Второй тег div с классом элемента-столбца имеет новый класс .swiper-слайд-далее

Таким образом, Swiper propely инициализирован, но все еще на мобильном устройстве видны все 3 элемента и нет слайдера.

Пожалуйста, помогите мне с этим вопросом.

С уважением, Камиль

Оказывается, Swiper работает правильно. Проблема в том, что все 3 столбца показаны как один слайд. HTML — код, созданный с помощью swiper, выглядит следующим образом:

 <section class="elementor-section elementor-inner-section elementor-element elementor-element-53777fe3 elementor-section-boxed elementor-section-height-default swiper-container-initialized swiper-container-horizontal" data-id="53777fe3" data-element_type="section" id="summary">
    <div class="elementor-container elementor-column-gap-no">
        <div class="elementor-column elementor-col-33 elementor-inner-column elementor-element elementor-element-145d728 animated bounceInLeft swiper-slide-active" data-id="145d728" data-element_type="column" data-settings="{amp;quot;animationamp;quot;:amp;quot;bounceInLeftamp;quot;,amp;quot;animation_mobileamp;quot;:amp;quot;noneamp;quot;}" style="width: 380px;"> ( content of slide 1 ) </div>
        <div class="elementor-column elementor-col-33 elementor-inner-column elementor-element elementor-element-4c151e67 animated bounceInLeft swiper-slide-next" data-id="4c151e67" data-element_type="column" data-settings="{amp;quot;animationamp;quot;:amp;quot;bounceInLeftamp;quot;,amp;quot;animation_mobileamp;quot;:amp;quot;noneamp;quot;}" style="width: 380px;"> ( content of slide 2 ) </div>
        <div class="elementor-column elementor-col-33 elementor-inner-column elementor-element elementor-element-53280d85 animated bounceInLeft" data-id="53280d85" data-element_type="column" data-settings="{amp;quot;animationamp;quot;:amp;quot;bounceInLeftamp;quot;,amp;quot;animation_mobileamp;quot;:amp;quot;noneamp;quot;}" style="width: 380px;"> ( content of slide 3 ) </div>
    </div>
<span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span>
</section>
 

Так что ИМО код выглядит хорошо, но отображается неправильно. Есть идеи, что мне делать?