如何将相关项目制作到轮播

Question

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

正如您在轮播图中看到的那样，“evde leziz”处于打开状态，底部（标有黄色）与轮播相关。对于旋转木马，我使用的是 lightslider 库 (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>

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

谢谢...

Answer 1

非常感谢你的问题，这真的很有挑战性我用 JavaScript 做了这个（没有使用 lightslider 库）。

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

如何将相关项目制作到轮播

How to make related item to the carousel

javascript

jquery

slider

carousel