task 17291 | Вам также может понравиться - в одну линию

wp-content/themes/hantico/assets/css/style.css

@@ -2886,6 +2886,11 @@ h4 {
 .articles--page {
   margin-top: clamp(40px, 15.1381px + 6.6298vw, 100px);
 }
+.articles--slider{
+  width: 100%;
+
+  overflow: hidden;
+}
 .articles-title--sm {
   margin-bottom: 40px;
   font-size: var(--fs-h3-lg);
@@ -2938,6 +2943,9 @@ h4 {
   grid-template-columns: repeat(3, 1fr);
   column-gap: 20px;
 }
+.related-slider__container.swiper {
+  overflow: visible;
+}
 .articles-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);

wp-content/themes/hantico/assets/js/scripts.js

@@ -544,6 +544,22 @@ document.addEventListener('DOMContentLoaded', () => {
 	}, sizeLG);
 
 
+	// Похожие статьи: слайдер на всех экранах
+	document.querySelectorAll('.related-slider').forEach(slider => {
+		new ResponsiveSwiper(slider.querySelector('.related-slider__container'), {
+			slidesPerView: 1.25,
+			spaceBetween: 15,
+			watchOverflow: true,
+			grabCursor: true,
+			breakpoints: {
+				576: { slidesPerView: 1.25, spaceBetween: 20 },
+				768: { slidesPerView: 2.25, spaceBetween: 20 },
+				1024: { slidesPerView: 3, spaceBetween: 20 }
+			}
+		});
+	});
+
+
 	// Слайдер блога
 	const blogSlider = new ResponsiveSwiper('.blog-slider__container', {
 		loop: true,

wp-content/themes/hantico/template-parts/related.php

@@ -23,16 +23,20 @@
 	if ($related_query->have_posts()) :
 	$title = $post_type === 'news' ? 'Другие новости' : 'Вам также может понравиться';
 ?>
-	<section class="articles articles--block">
+	<section class="articles articles--block articles--slider">
 		<div class="container">
 			<h2 class="articles-title articles-title--lg"><?php echo $title; ?></h2>
-			<div class="articles-grid">
+			<div class="related-slider">
-				<?php
+				<div class="related-slider__container swiper">
-					while ($related_query->have_posts()) {
+					<div class="swiper-wrapper">
-						$related_query->the_post();
+						<?php
-						get_template_part('template-parts/articles-item');
+							while ($related_query->have_posts()) {
-					} wp_reset_postdata();
+								$related_query->the_post();
-				?>
+								get_template_part('template-parts/articles-item', null, ['class' => 'swiper-slide']);
+							} wp_reset_postdata();
+						?>
+					</div>
+				</div>
 			</div>
 		</div>
 	</section>