如何制作相关物品到转盘

编程问答 2022-04-27

问题描述

我有一个多项目轮播，每当它转到另一个项目时，我都想更改内容。

enter image description here

正如您在轮播中的图片中看到的，“evde leziz”处于开启状态，底部（用黄色标记）与轮播相关。对于轮播，我使用的是lightslider library (http://sachinchoolur.github.io/lightslider/)

这是我的基本 html：

<div class="start__carousel">
          <ul id="lightSlider">
            <li>
              <img src="./assets/img/meal1.jpg" />
              <div class="carousel__title">Leziz Detox</div>
            </li>
            <li>
              <img src="./assets/img/meal3.jpg" />
              <div class="carousel__title">Leziz Classic</div>
            </li>
            <li>
              <img src="./assets/img/meal2.jpg" />
              <div class="carousel__title">Leziz Protein</div>
            </li>
          </ul>
        </div>

还有底部：

<section class="delicIoUs">
        <div class="container">
          <div class="row">
            <div class="col-lg-5 col-md-12 col-sm-12">
              <div class="left">
                <div class="title">Leziz Classic</div>
                <div>
                  Lorem ipsum dolor sit amet,consectetur adipiscing elit.
                </div>
              </div>
            </div>
            <div class="col-lg-7 col-md-12 col-sm-12">
              <div class="right">
                <div class="image__area">
                  <img src="./assets/img/delicIoUs.jpg" alt="Meal" />
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

我知道这有点太多了，也许你可能需要看更多，但如果你能帮助我，我会很高兴。

谢谢...

解决方法

非常感谢您的问题，这真的很有挑战性 我用 JavaScript 做到了这一点（没有使用 Lightslider 库）。

Demo here: https://jsfiddle.net/M_Ali2002/df4wkgop/3

carouseljavascriptjquerysliderslider