如何实现lightslider轮播项切换时同步更新下方关联内容

实现方案 #

你可以通过lightslider自带的滑动回调事件完成关联内容同步，具体操作如下：

方法一：单独维护内容数组

1. 按照轮播项的排列顺序，预先定义所有轮播项对应的关联内容：

const carouselRelatedContent = [
  // 第一个轮播项对应内容
  {
    title: 'Leziz Detox',
    description: '此处填写Leziz Detox对应的描述文本',
    coverImg: './assets/img/detox-related.jpg'
  },
  // 第二个轮播项对应内容
  {
    title: 'Leziz Classic',
    description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
    coverImg: './assets/img/delicious.jpg'
  },
  // 第三个轮播项对应内容
  {
    title: 'Leziz Protein',
    description: '此处填写Leziz Protein对应的描述文本',
    coverImg: './assets/img/protein-related.jpg'
  }
]

2. 初始化lightslider时添加onAfterSlide回调，每次滑动结束后同步更新下方关联区域：

$('#lightSlider').lightSlider({
  // 你原本的轮播配置（如item、loop、auto、speed等参数）保持不变
  onAfterSlide: function (slider) {
    // 获取当前轮播项的0基准索引
    const currentIndex = slider.getCurrentSlideCount() - 1
    const currentContent = carouselRelatedContent[currentIndex]
    // 批量更新关联区域内容
    const $relatedArea = $('.delicious')
    $relatedArea.find('.left .title').text(currentContent.title)
    $relatedArea.find('.left .title + div').text(currentContent.description)
    $relatedArea.find('.right img').attr('src', currentContent.coverImg)
  }
})

方法二：自定义DOM属性绑定内容

如果不想单独维护数组，可以直接把关联内容存在轮播项的自定义属性中，修改轮播HTML代码：

<li 
  data-title="Leziz Detox" 
  data-desc="此处填写Leziz Detox对应的描述文本" 
  data-img="./assets/img/detox-related.jpg"
>
  <img src="./assets/img/meal1.jpg" />
  <div class="carousel__title">Leziz Detox</div>
</li>
<li 
  data-title="Leziz Classic" 
  data-desc="Lorem ipsum dolor sit amet, consectetur adipiscing elit." 
  data-img="./assets/img/delicious.jpg"
>
  <img src="./assets/img/meal3.jpg" />
  <div class="carousel__title">Leziz Classic</div>
</li>
<li 
  data-title="Leziz Protein" 
  data-desc="此处填写Leziz Protein对应的描述文本" 
  data-img="./assets/img/protein-related.jpg"
>
  <img src="./assets/img/meal2.jpg" />
  <div class="carousel__title">Leziz Protein</div>
</li>

对应的回调逻辑改为直接读取当前轮播项的属性即可：

$('#lightSlider').lightSlider({
  // 原有配置不变
  onAfterSlide: function (slider) {
    const currentIndex = slider.getCurrentSlideCount() - 1
    const $currentSlide = $(slider.find('li').eq(currentIndex))
    const $relatedArea = $('.delicious')
    $relatedArea.find('.left .title').text($currentSlide.data('title'))
    $relatedArea.find('.left .title + div').text($currentSlide.data('desc'))
    $relatedArea.find('.right img').attr('src', $currentSlide.data('img'))
  }
})

如果需要滑动前就提前更新内容，把onAfterSlide替换为onBeforeSlide即可，两种方案都兼容循环轮播的场景。

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