Owl Carousel v2.2.1左文右图轮播 文字随图同步切换问题求助

当前代码把左侧文字区域放在了Owl Carousel轮播容器外部，只有右侧图片被纳入轮播切换逻辑，轮播触发时不会关联操作外部的静态文字，自然无法实现同步切换。

以下两种方案都适配Owl Carousel v2.2.1版本，优先选择第一种，稳定性最高。

方案1：将图文组纳入同一个轮播实例（推荐） #

把每一组匹配的文字+图片作为单个轮播项，在轮播项内部通过栅格实现左文右图布局，轮播切换时整组内容同步滑动，不需要额外写事件监听，完全不会出现不同步的问题。

修改后的HTML结构代码：

<div style="background-color: #faf9f8;">
    <div id="design" class="section md-padding bg-white">
        <div class="container">
            <div class="row" style="padding-top:10vh">
                <!-- 轮播容器占满整行，每个轮播项内部做左右分栏 -->
                <div class="col-md-12">
                    <div id="about-slider" class="owl-carousel owl-theme">
                        <!-- 第一组图文 -->
                        <div class="row">
                            <div class="col-md-6">
                                <div class="section-header">
                                    <h2 class="title">Latest News & Events</h2>
                                </div>
                                <p>RELACOM SERVICES AS AN AUTHORIZED VEEAM RESELLER</p>
                                <p>Veeam Software recognizes Relacom Services (Pvt.) Limited as an authorized Veeam reseller in Pakistan. Contact us if you are looking for a backup and disaster recovery solution for your business</p>
                            </div>
                            <div class="col-md-6">
                                <img class="img-responsive" src="img/newsevents/0001.jpg" alt="">
                            </div>
                        </div>
                        <!-- 第二组图文，替换为对应内容即可 -->
                        <div class="row">
                            <div class="col-md-6">
                                <div class="section-header">
                                    <h2 class="title">Latest News & Events</h2>
                                </div>
                                <p>第二条新闻标题</p>
                                <p>第二条新闻对应的详细描述内容</p>
                            </div>
                            <div class="col-md-6">
                                <img class="img-responsive" src="img/newsevents/0005.jpg" alt="">
                            </div>
                        </div>
                        <!-- 后续图文组按上述格式继续追加即可 -->
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

轮播初始化代码和原有配置基本一致，不需要额外添加参数：

$(function(){
    $('#about-slider').owlCarousel({
        loop: true,
        margin: 0,
        nav: true,
        dots: true,
        items: 1, // 每次仅展示1组图文
        autoplay: true // 如需自动播放可开启
    })
})

方案2：保留现有DOM结构，通过轮播事件同步文字 #

如果不想调整现有DOM结构，可以提前将所有轮播项对应的文字按顺序存储，监听Owl的切换事件，在轮播滑动时动态替换左侧文字内容。

1. 首先给左侧文字容器加固定ID，方便DOM操作：

<div class="col-md-6" id="text-container">
    <!-- 默认展示第一组文字 -->
    <div class="section-header">
        <h2 class="title">Latest News & Events</h2>
    </div>
    <p class="news-title">RELACOM SERVICES AS AN AUTHORIZED VEEAM RESELLER</p>
    <p class="news-desc">Veeam Software recognizes Relacom Services (Pvt.) Limited as an authorized Veeam reseller in Pakistan. Contact us if you are looking for a backup and disaster recovery solution for your business</p>
</div>

2. 初始化轮播时绑定切换事件，完成文字同步：

$(function(){
    // 按右侧图片的顺序存储对应文字，索引0对应第一张图，索引1对应第二张，以此类推
    const textList = [
        {
            title: 'RELACOM SERVICES AS AN AUTHORIZED VEEAM RESELLER',
            desc: 'Veeam Software recognizes Relacom Services (Pvt.) Limited as an authorized Veeam reseller in Pakistan. Contact us if you are looking for a backup and disaster recovery solution for your business'
        },
        {
            title: '第二条新闻标题',
            desc: '第二条新闻的详细描述内容'
        },
        {
            title: '第三条新闻标题',
            desc: '第三条新闻的详细描述内容'
        }
    ]

    $('#about-slider').owlCarousel({
        loop: true,
        margin: 0,
        nav: true,
        dots: true,
        items: 1,
        autoplay: true,
        // 轮播切换完成后触发
        onChanged: function(event) {
            // 计算当前真实展示的轮播项索引，处理loop模式下克隆项导致的索引偏移
            const cloneCount = event.relatedTarget._clones.length / 2;
            const totalCount = event.item.count;
            let currentIndex = event.item.index - cloneCount;
            currentIndex = (currentIndex % totalCount + totalCount) % totalCount;
            // 替换左侧文字内容
            $('#text-container .news-title').text(textList[currentIndex].title)
            $('#text-container .news-desc').text(textList[currentIndex].desc)
        }
    })
})

• 优先使用方案1，不需要手动处理索引计算，不会出现图文切换不同步的问题
• 若使用方案2，必须保证textList数组的内容顺序和右侧轮播图片的顺序完全一致，否则会出现图文不匹配的问题
• 原代码中标签<P>建议统一改为小写<p>，符合HTML规范，避免样式匹配异常

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