How to make related item to the carousel

Question

I have a multi items carousels and whenever it goes to another item I want to change the content.

As you see in the picture in the carousel, "evde leziz" is on and the bottom (marked with yellow) is related to the carousel. For the carousel, I am using lightslider library (http://sachinchoolur.github.io/lightslider/)

And here is my basic 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>

And also the bottom part:

<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>

I know it is a little bit too much, maybe you may need to see more but if you can help me with it, I would be really glad.

Thanks...

Answer 1

Thank you very much for your question, it was really challenging I did this with JavaScript (without using lightslider library).

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