Создать акаунт
Всё для вебмастера » Вопросы и ответы » CMS » WordPress » Слайдер на swiper начинает лагать после 16го слайда. Как исправить?

Слайдер на swiper начинает лагать после 16го слайда. Как исправить?

11 мар 2023, 02:27
WordPress
213
0
Приветствую, в общем проблема описана выше. Тестировал на маке, андроид смартфоне и ноутбуке - все равно лагает. Верю в милосердие и доброту хабр комьюнити и жду решения, спасибо большое за прочтение вопроса!

https://greens-ld.com/portfolio/trel-solovya/

https://kwork.ru/files/uploaded/d7/4a/2c/b2d4d7be8...

singlie-portfolio.php
<?php get_header(); ?> <main class="main inner-page team-page">    <a href="https://qna.habr.com<?php echo get_post_type_archive_link('portfolio'); ?>" class="main_nav">      <svg width="73" height="71" viewBox="0 0 73 71" fill="none" xmlns="http://www.w3.org/2000/svg">        <path d="M3.08008 36H73.0001" stroke="black" stroke-width="4" stroke-miterlimit="10" />        <path d="M36.5801 69L3.08008 35.5L36.5801 2" stroke="black" stroke-width="4" stroke-miterlimit="10" />      </svg>    </a>    <div class="main__inner">      <div class="blog-content">        <h1 class="h1"><?php single_post_title() ?>        </h1><?php if( $images = carbon_get_post_meta( $post->ID, 'crb_portfolio_gallery' ) ) { $count = -1; ?><div class="project">  <?php foreach ($images as $slide): ++$count;             $img_src = wp_get_attachment_image_url( $slide, 'medium' );            $img_srcset = wp_get_attachment_image_srcset( $slide, 'medium' );            ?>            <div class="project-elem"><a href="https://qna.habr.com#" class="project-elem-link" data-img="<?php echo $count; ?>">                    <img src="https://qna.habr.com<?php echo esc_url( $img_src ); ?>"                        srcset="<?php echo esc_attr( $img_srcset ); ?>"                        sizes="(max-width: 50em) 87vw, 680px" alt=""></a>            </div><?php endforeach; ?>  </div><?php } ?>        </div><?php include 'parts/links-portfolio.php'; ?>    </div>  </main>        <div class="gallery-popup">            <div class="closer">                <svg width="56" height="56" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">                  <path d="M2 2L28.0057 27.9994L2 54M53.9999 54L27.9941 27.9994L53.9999 2" stroke="black" stroke-width="4"                    stroke-miterlimit="10" />                </svg>            </div>            <div class="g-slider">                <div class="swiper-wrapper"><?php if( $images = carbon_get_post_meta( $post->ID, 'crb_portfolio_gallery' ) ) { ?><?php foreach ($images as $slide): ?>                    <div class="g-slide swiper-slide">                        <div class="bg">                            <picture><!--                                 <source srcset="img/pg1.webp" type="image/webp"> -->                                <img src="https://qna.habr.com<?php echo wp_get_attachment_image_url($slide, 'full'); ?>" alt="">                            </picture>                        </div>                        <picture><!--                             <source srcset="img/pg1.webp" type="image/webp"> -->                            <img src="https://qna.habr.com<?php echo wp_get_attachment_image_url($slide, 'full'); ?>" alt="">                        </picture>                    </div><?php endforeach; ?>  <?php } ?>                </div>                <div class="swiper-nav swiper-prev">                    <svg width="73" height="70" viewBox="0 0 73 70" fill="none" xmlns="http://www.w3.org/2000/svg">                      <path d="M3.08008 36H73.0001" stroke="black" stroke-width="4" stroke-miterlimit="10" />                      <path d="M36.5801 69L3.08008 35.5L36.5801 2" stroke="black" stroke-width="4" stroke-miterlimit="10" />                    </svg>                </div>                <div class="swiper-nav swiper-next">                    <svg width="73" height="70" viewBox="0 0 73 70" fill="none" xmlns="http://www.w3.org/2000/svg">                      <path d="M69.9199 35.5L-7.62939e-05 35.5" stroke="black" stroke-width="4" stroke-miterlimit="10" />                      <path d="M36.4199 2L69.9199 35.5L36.4199 69" stroke="black" stroke-width="4" stroke-miterlimit="10" />                    </svg>                </div>            </div>        </div>            <div class="g-content">                <a href="https://qna.habr.com#">                    <div class="h4"><div class="gc-title"><p><?php the_title(); ?></p><p><?php echo carbon_get_post_meta($post->ID, 'portfolio_location'); ?></p></div>                    </div>                    <svg width="71" height="73" viewBox="0 0 71 73" fill="none" xmlns="http://www.w3.org/2000/svg">                        <path d="M35.5 3.00003L35.5 72.92" stroke="#9D819A" stroke-width="4" stroke-miterlimit="10" />                        <path d="M2 36.5L35.5 3L69 36.5" stroke="#9D819A" stroke-width="4" stroke-miterlimit="10" />                    </svg>                </a>                <div class="gc-inner"><?php the_content(); ?>                </div>            </div><?php get_footer(); ?>


portfolio.index.js
var gSlider = new Swiper(".g-slider", {    spaceBetween: 20,    slidesPerView: 1,    effect: "fade",    observer: true,    observeParents: true,    navigation: {        nextEl: ".swiper-next svg",        prevEl: ".swiper-prev svg",    },});$('.g-content > a').click(function(e) {    e.preventDefault();    $(this).toggleClass("active");    $(this).next().slideToggle({            direction: "up",        },        400    );});$('.project-elem-link').click(function(e) {    e.preventDefault();    // получение контента для попап   /* let id = e.target.id;    let title = $('.portfolio-' + id).find(".gal-title").html();let location = $('.portfolio-' + id).find(".gal-location").html();    let content = $('.portfolio-' + id).find(".content").html();    let images = $('.portfolio-' + id).find(".images").html();*/let id = $(this).data('img');gSlider.slideTo(id);    $("body").toggleClass("fixed");    $(".gallery-popup").fadeToggle();    //вставить контент в шаблон попап  /*  $(".swiper-wrapper").html(images);$(".gc-title").html(title + location);    $(".gc-inner").html(content);    $(".gc-inner").delay(500).css("display", "none");*/});$('.closer').click(function(e) {    e.preventDefault();    $(".gallery-popup").fadeToggle();    $("body").toggleClass("fixed");    //очистить шаблон попап   // $(".gc-inner").html("");   // $(".swiper-wrapper").html("");});

Внимание! Слайдер на swiper начинает лагать после 16го слайда. Как исправить? предоставлен пользователями сайта исключительно в ознакомительных целях. Администрация не несет ответственности за его содержимое.

Смотрите также:

Комментарии к Слайдер на swiper начинает лагать после 16го слайда. Как исправить?
Добавить Комментарий
В комментариях запрещаются спам, а также реклама любых товаров и услуг, иных ресурсов.
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.