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

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

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("");
});
  • Вопрос задан
  • 151 просмотр
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
29 мар. 2024, в 18:19
20000 руб./за проект
29 мар. 2024, в 18:08
2500 руб./за проект
29 мар. 2024, в 17:51
40000 руб./за проект