Блог

Главная - Вопросы по программированию - Как сделать связанный элемент в карусели

Как сделать связанный элемент в карусели

#javascript #jquery #slider #carousel

Вопрос:

У меня есть карусели с несколькими элементами, и всякий раз, когда они переходят к другому элементу, я хочу изменить содержимое.введите описание изображения здесь

Как вы видите на картинке в карусели, «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>

Я знаю, что это немного чересчур, может быть, вам нужно увидеть больше, но если вы можете мне в этом помочь, я был бы очень рад.

Спасибо…

Комментарии:

1. вам нужно поддерживать какую-то связь между слайдом карусели и содержимым ниже. Я не использовал эту карусель, но, просматривая документацию, которую вы предоставили, есть определенные события, например onBeforeNextSlide , или onBeforePrevSlide которые, как я полагаю, вы можете использовать, учитывая, что у вас есть определенная связь между слайдом и контентом, который вы хотите изменить на основе слайда. Поддержание связи зависит от того, является ли это статической или динамической страницей, поэтому на основе выбранного слайда вы можете извлекать соответствующие данные из БД/API, а если статическая, вы можете показывать/скрывать соответствующие разделы/контейнеры

2. Итак, я пытаюсь сделать следующее: когда это meal1, я хочу показать <класс раздела=»вкусно»><класс раздела=»вкусно»></раздел>, А если это meal2, я хочу показать </раздел><класс раздела=»вкусно 2″><класс раздела=»вкусно 2″></раздел>

3. да, нужно какое-то сопоставление , например, если это статический сайт, вы можете создать объект JS или что-то, что определяет отношения, например var mappings = {"id-of-carousel-slide": "bottom-content-section-id"} , затем используйте этот объект, чтобы определить раздел для отображения на основе текущего слайда карусели

4. Я не понял эту часть: затем используйте этот объект, чтобы определить раздел для отображения на основе текущего слайда карусели

5. Объект JS по сути представляет собой набор key : value пар, где ключи должны быть точными идентификаторами слайдов карусели, а значение должно быть идентификаторами разделов, которые вам нужно показать для каждого слайда. Таким образом, как только вы узнаете идентификатор активного слайда, вы можете выполнить итерацию по объекту JS и получить значение (идентификатор раздела), где ключ = идентификатор текущего слайда . отображение/скрытие раздела, когда у вас есть идентификатор раздела (значение из объекта JS), — это всего лишь вопрос использования встроенных функций jquery. вы можете легко найти примеры кода, которые позволяют выполнять итерацию по объекту JS

Ответ №1:

Большое вам спасибо за ваш вопрос, это было действительно сложно, я сделал это с помощью JavaScript (без использования библиотеки lightslider).

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

Метки: