Swiper.jsでメイン要素以外のテキストを非表示にしたい

実現したいこと

Swiper.jsを活用して、画像と文字の要素を1つに、PC時ではメインのactiveな要素を真ん中に画像とテキスト要素を表示させ、左右には他2つの画像のみ表示させテキストはメインのときにだけ表示させるようにしたいです。

イメージとしては、ロンハーマンがかなり近いです。

前提

現在、Swiperを活用して実現したいことのうち、テイストデータが非表示にならないこと以外はできておりますが、activeではないテキストデータが表示されてしまいます。

該当のソースコード

HTML
1<section class="section slider-section">
2	<div class="container slider-column">
3		<div class="swiper swiper-slider">
4			<div class="swiper-wrapper">
5				<div class="swiper-slide">
6					<img class="swiper-" src="https://source.unsplash.com/1920x1280/?animal" alt="Swiper">
7<div class="swiper-slide-content swiper-slide-content-1">スライド１の内容です。</div>
8					<div class="news_detail_info">
9						<h3 class="news_detail_title">&Calm プロダクト</h3>
10						<p class="news_detail_txt">test</p>
11						<a href="" class="news_detail_link">Read More</a>
12					</div>
13				</div>
14				<div class="swiper-slide">
15					<img class="swiper-" src="https://source.unsplash.com/1920x1280/?animal" alt="Swiper">
16<div class="swiper-slide-content swiper-slide-content-1">スライド１の内容です。</div>
17					<div class="news_detail_info">
18						<h3 class="news_detail_title">&Calm プロダクト</h3>
19						<p class="news_detail_txt">test</p>
20						<a href="" class="news_detail_link">Read More</a>
21					</div>
22				</div>
23				<div class="swiper-slide">
24					<img class="swiper-" src="https://source.unsplash.com/1920x1280/?animal" alt="Swiper">
25					<div class="news_detail_info">
26						<h3 class="news_detail_title">&Calm プロダクト</h3>
27						<p class="news_detail_txt">test</p>
28						<a href="" class="news_detail_link">Read More</a>
29					</div>
30				</div>
31				<div class="swiper-slide">
32					<img class="swiper-" src="https://source.unsplash.com/1920x1280/?animal" alt="Swiper">
33					<div class="news_detail_info">
34						<h3 class="news_detail_title">&Calm プロダクト</h3>
35						<p class="news_detail_txt">test</p>
36						<a href="" class="news_detail_link">Read More</a>
37					</div>
38				</div>
39			</div>
40		<!--
41			<span class="swiper-pagination"></span>
42		-->
43			<span class="swiper-button-prev"></span>
44			<span class="swiper-button-next"></span>
45		</div>
46	</div>
47</section>
48

swiper.js
1const swiper = new Swiper(".swiper-slider", {
2  // Optional parameters
3  centeredSlides: true,
4  slidesPerView: 1,
5  grabCursor: true,
6  freeMode: false,
7  loop: true,
8  mousewheel: false,
9  keyboard: {
10    enabled: true
11  },
12
13  // If we need pagination
14  pagination: {
15    el: ".swiper-pagination",
16    dynamicBullets: false,
17    clickable: true
18  },
19
20  // If we need navigation
21  navigation: {
22    nextEl: ".swiper-button-next",
23    prevEl: ".swiper-button-prev"
24  },
25
26  // Responsive breakpoints
27  breakpoints: {
28    640: {
29      slidesPerView: 1.25,
30      spaceBetween: 20
31    },
32    1024: {
33      slidesPerView: 2,
34      spaceBetween: 20
35    }
36  }
37});
38

試したこと

classを「swiper-slide-content」を追加して、該当する要素をopacityで見えなく使用としたのですが駄目でした。
他にもネットで上がっている内容を試したのですが駄目でしたので、ご教授いただけますと幸いです。

	loop: true,
	autoHeight: false,
	on: {
		slideChange: function () {
			jQuery('.swiper-slide-content').css('opacity', '0');
			realIndex = this.realIndex + 1;
			jQuery('.swiper-slide-content-' + realIndex).css('opacity', '1');
		},
	},

行動規範の内容に同意します

回答1件

この回答はGPT-4による自動生成回答です

Swiper.jsのslideChangeイベントを利用して、アクティブなスライド以外のテキスト要素を非表示にすることができます。以下のようにコードを修正してみてください。

javascript
1const swiper = new Swiper(".swiper-slider", {
2  // Optional parameters
3  centeredSlides: true,
4  slidesPerView: 1,
5  grabCursor: true,
6  freeMode: false,
7  loop: true,
8  mousewheel: false,
9  keyboard: {
10    enabled: true
11  },
12
13  // If we need pagination
14  pagination: {
15    el: ".swiper-pagination",
16    dynamicBullets: false,
17    clickable: true
18  },
19
20  // If we need navigation
21  navigation: {
22    nextEl: ".swiper-button-next",
23    prevEl: ".swiper-button-prev"
24  },
25
26  // Responsive breakpoints
27  breakpoints: {
28    640: {
29      slidesPerView: 1.25,
30      spaceBetween: 20
31    },
32    1024: {
33      slidesPerView: 2,
34      spaceBetween: 20
35    }
36  },
37
38  on: {
39    init: function () {
40      const activeSlide = document.querySelector('.swiper-slide-active');
41      const inactiveSlides = document.querySelectorAll('.swiper-slide:not(.swiper-slide-active) .news_detail_info');
42      activeSlide.querySelector('.news_detail_info').style.display = 'block';
43      inactiveSlides.forEach(slide => slide.style.display = 'none');
44    },
45    slideChange: function () {
46      const activeSlide = document.querySelector('.swiper-slide-active');
47      const inactiveSlides = document.querySelectorAll('.swiper-slide:not(.swiper-slide-active) .news_detail_info');
48      activeSlide.querySelector('.news_detail_info').style.display = 'block';
49      inactiveSlides.forEach(slide => slide.style.display = 'none');
50    },
51  }
52});
53
54swiper.init();