Слайдер на swiper начинает лагать после 16го слайда. Как исправить?
Приветствую, в общем проблема описана выше. Тестировал на маке, андроид смартфоне и ноутбуке - все равно лагает. Верю в милосердие и доброту хабр комьюнити и жду решения, спасибо большое за прочтение вопроса!
https://greens-ld.com/portfolio/trel-solovya/
https://kwork.ru/files/uploaded/d7/4a/2c/b2d4d7be8...
singlie-portfolio.php
portfolio.index.js
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("");});

Смотрите также:
В комментариях запрещаются спам, а также реклама любых товаров и услуг, иных ресурсов.