如何用JS实现桌面端@media屏幕导航按钮的交互功能？

我已经在平板端实现了导航按钮的交互功能，点击按钮可左右滑动图片与评价内容。希望在桌面端实现相同效果，但桌面端的评价区域布局与平板端不同，请问对应的正确JS脚本是什么？

平板端与桌面端HTML结构 #

<!-- 平板端结构 -->
<div class="MainDiv_tablet"> 
    <h2>Lees</h2> <h2 class="bold">Testimonials</h2>
    <div class="SecondDiv_tablet"> 

        <div class="testimonials main"> 
            <img class="couple" id="Testimonial1" src="./Assets/Testimonials_1_mobile.png" alt="Testimonial 1">
            <div class="testimonial1">
                <p class="testimonial">
                        We hoorden Strings 4 Weddings spelen op de bruiloft van onze vrienden. Het optreden was zo gaaf, dat het ons dagen is bijgebleven. Wij besloten ook klassieke muziek aan onze bruiloft toe te voegen. Toen we zelf gingen trouwen hebben we direct contact gezocht met Strings 4 Weddings. De organisatie verliep erg prettig en de uitvoering was fantastisch. Onze bruiloft zou nooit hetzelfde zijn geweest zonder jullie, erg bedankt!
                </p>
            </div> 
        </div>

        <div class="testimonials"> 
            <img class="couple" id="Testimonial2" src="./Assets/Testimonials_2_mobile.png" alt="Testimonial 1">
            <div class="testimonial2">
                <p class="testimonial">
                        TESTTESTTEST
                </p>
            </div>  
        </div>

        <div class="testimonials"> 
            <img class="couple" id="Testimonial3" src="./Assets/Testimonials_3_mobile.png" alt="Testimonial 1">
            <div class="testimonial3">
                <p class="testimonial">We hoorden Strings 4 Weddings spelen op de bruiloft van onze vrienden. Het optreden was zo gaaf, dat het ons dagen is bijgebleven. Wij besloten ook klassieke muziek aan onze bruiloft toe te voegen. Toen we zelf gingen trouwen hebben we direct contact gezocht met Strings 4 Weddings. De organisatie verliep erg prettig en de uitvoering was fantastisch. Onze bruiloft zou nooit hetzelfde zijn geweest zonder jullie, erg bedankt!
                </p>
            </div>  

        </div>

        <div class="navigation-buttons">
            <div class="previous nav-btn"><i class="material-icons" style="font-size: 48px">chevron_left</i></div>
            <div class="next nav-btn"><i class="material-icons" style="font-size: 48px">chevron_right</i></div>
        </div>

    </div>
</div>


<!-- 桌面端结构 -->
<div class="Title_desktop">
    <h2>Lees</h2> <h2 class="bold">Testimonials</h2>
</div>
<div class="MainDiv_desktop"></div> 
<div class="SecondDiv_desktop">

    <div class="TestimonialDiv_desktop">  
        <div class="testimonials main">
            <img class="couple" id="Testimonial1" src="./Assets/Testimonials_1_mobile.png" alt="Testimonial 1">
        </div> 
        <div class="testimonials">
            <img class="couple" id="Testimonial2" src="./Assets/Testimonials_2_mobile.png" alt="Testimonial 2">
        </div>
        <div class="testimonials">
            <img class="couple" id="Testimonial3" src="./Assets/Testimonials_3_mobile.png" alt="Testimonial 3">
        </div>
    </div>

    
    <div class="Horizontal_swipe">
    
        <div class="navigation-buttons">
            <div class="previous nav-btn"><i class="material-icons" style="font-size: 48px">chevron_left</i></div>
        </div>
        <div class="testimonials_text first">
                <p class="testimonial">
                    We hoorden Strings 4 Weddings spelen op de bruiloft van onze vrienden. Het optreden was zo gaaf, dat het ons dagen is bijgebleven. Wij besloten ook klassieke muziek aan onze bruiloft toe te voegen. Toen we zelf gingen trouwen hebben we direct contact gezocht met Strings 4 Weddings. De organisatie verliep erg prettig en de uitvoering was fantastisch. Onze bruiloft zou nooit hetzelfde zijn geweest zonder jullie, erg bedankt!
                </p>
                <p class="referral">
                    <bold>Bram van Schagen</bold><br>
                    <i>2021 - married Brechtje de Koning, van Schagen</i>
                </p>
        </div>
         <div class="navigation-buttons">
            <div class="next nav-btn"><i class="material-icons" style="font-size: 48px">chevron_right</i></div>
        </div>

    </div>

    <div class="testimonials_text">
        <p class="testimonial">
            TESTTESTTEST
        </p>
    </div>
    <div class="testimonials_text">
        <p class="testimonial">
            We hoorden Strings 4 Weddings spelen op de bruiloft van onze vrienden. Het optreden was zo gaaf, dat het ons dagen is bijgebleven. Wij besloten ook klassieke muziek aan onze bruiloft toe te voegen. Toen we zelf gingen trouwen hebben we direct contact gezocht met Strings 4 Weddings. De organisatie verliep erg prettig en de uitvoering was fantastisch. Onze bruiloft zou nooit hetzelfde zijn geweest zonder jullie, erg bedankt!
        </p>
    </div>

</div>

原脚本问题分析 #

1. 选择器错误：桌面端图片选择器.SecondDiv_desktop > TestimonialDiv_desktop > .testimonials中，TestimonialDiv_desktop是类名，遗漏了前缀.，正确应为.SecondDiv_desktop > .TestimonialDiv_desktop > .testimonials。
2. 未同步评价文本：桌面端图片与评价文本是分离的，原脚本仅处理了图片的main类切换，未同步控制评价文本的显示状态。

修正后的桌面端JS脚本 #

// 桌面端脚本
const previousDesktop = document.querySelector('.SecondDiv_desktop .previous');
const nextDesktop = document.querySelector('.SecondDiv_desktop .next');
const desktopImages = document.querySelectorAll('.SecondDiv_desktop > .TestimonialDiv_desktop > .testimonials');
const desktopTexts = document.querySelectorAll('.SecondDiv_desktop .testimonials_text');
const totalItems = desktopImages.length;
let currentDesktopIndex = 0;

// 初始化：隐藏非默认显示的文本
desktopTexts.forEach((text, index) => {
    if (index !== currentDesktopIndex) {
        text.classList.remove('first');
        text.style.display = 'none';
    }
});

// 绑定按钮事件
previousDesktop.addEventListener('click', previousDesktopItem);
nextDesktop.addEventListener('click', nextDesktopItem);

// 下一项切换
function nextDesktopItem() {
    // 移除当前项的激活状态
    desktopImages[currentDesktopIndex].classList.remove('main');
    desktopTexts[currentDesktopIndex].classList.remove('first');
    desktopTexts[currentDesktopIndex].style.display = 'none';

    // 更新索引
    currentDesktopIndex = currentDesktopIndex === totalItems - 1 ? 0 : currentDesktopIndex + 1;

    // 添加新项的激活状态
    desktopImages[currentDesktopIndex].classList.add('main');
    desktopTexts[currentDesktopIndex].classList.add('first');
    desktopTexts[currentDesktopIndex].style.display = 'block';
}

// 上一项切换
function previousDesktopItem() {
    // 移除当前项的激活状态
    desktopImages[currentDesktopIndex].classList.remove('main');
    desktopTexts[currentDesktopIndex].classList.remove('first');
    desktopTexts[currentDesktopIndex].style.display = 'none';

    // 更新索引
    currentDesktopIndex = currentDesktopIndex === 0 ? totalItems - 1 : currentDesktopIndex - 1;

    // 添加新项的激活状态
    desktopImages[currentDesktopIndex].classList.add('main');
    desktopTexts[currentDesktopIndex].classList.add('first');
    desktopTexts[currentDesktopIndex].style.display = 'block';
}

配合CSS说明 #

确保CSS中默认隐藏非激活状态的内容，示例：

.SecondDiv_desktop .testimonials:not(.main) {
    display: none; /* 或使用你平板端的滑动隐藏样式 */
}
.SecondDiv_desktop .testimonials_text:not(.first) {
    display: none;
}

内容的提问来源于stack exchange，提问作者lLizzy