Приветствую, в общем проблема описана выше. Тестировал на маке, андроид смартфоне и ноутбуке - все равно лагает. Верю в милосердие и доброту хабр комьюнити и жду решения, спасибо большое за прочтение вопроса!
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="<?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="#" class="project-elem-link" data-img="<?php echo $count; ?>">
<img src="<?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="<?php echo wp_get_attachment_image_url($slide, 'full'); ?>" alt="">
</picture>
</div>
<picture>
<!-- <source srcset="img/pg1.webp" type="image/webp"> -->
<img src="<?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="#">
<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("");
});
Средний
