0

Как создать слайдер в котором будут не чисто изоображения а блок html, с сохранением его функциональности? стили для сайта и основной код(html) у меня уже прописаны,но js нет. Прошерстил интернет, пробовал "переписать" другие слайдеры, но они не подошли и решил задать тут вопрос.

Нужно чтобы определенный блок (т.к на сайте много таких блоков)

<div class="listArea  html-slider-(номер-слайдера)">
</div>

представлял из себя слайдер, в котором будут не чисто изоображения, а блок(и) html, с сохранением его(их) функциональности.

а блок

<ul class="list html-slider-list"></ul>

будет представлять из себя список "слайдов", и блок

    <li class="html-slider-slide" data-id="">
      <div class="thumbArea">
        <p class="thumb_base"><img src="/assets/img/common/movie_base.png" alt=""></p>
        <div class="thumb"><img src="/assets/img/common/movie_thumb.png" alt=""><div class="inner"></div></div>
      </div>
      <div class="caption">
        <p>1</p>
      </div>
    </li>

представлял из себя отдельный слайд.

И переход на следующий "слайд" будет осуществляться при на жатии кнопок и/или свайпе(на мобильных устройствах) ,расположенных по сереидине по бокам слайдера. Кнопки будут представлять из себя изоображения. + на одной странице может быть не один такой слайдер.

Заранее спсибо.

Осовной код:

<article class="movie">
          <h2 class="pageTitle"><span class="frame_bg"><span></span></span></h2>
          <div class="listArea">
            <ul class="list">

              <li data-id="">
                <div class="thumbArea">
                  <p class="thumb_base"><img src="/assets/img/common/movie_base.png" alt=""></p>
                  <div class="thumb"><img src="/assets/img/common/movie_thumb.png" alt=""><div class="inner"></div></div>
                </div>
                <div class="caption">
                  <p>1</p>
                </div>
              </li>

             <li data-id="">
                <div class="thumbArea">
                  <p class="thumb_base"><img src="/assets/img/common/movie_base.png" alt=""></p>
                  <div class="thumb"><img src="/assets/img/common/movie_thumb.png" alt=""><div class="inner"></div></div>
                </div>
                <div class="caption">
                  <p>2</p>
                </div>
              </li>


              <li data-id="">
                <div class="thumbArea">
                  <p class="thumb_base"><img src="/assets/img/common/movie_base.png" alt=""></p>
                  <div class="thumb"><img src="/assets/img/common/movie_thumb.png" alt=""><div class="inner"></div></div>
                </div>
                <div class="caption">
                  <p>3</p>
                </div>
              </li>

              <li data-id="">
                <div class="thumbArea">
                  <p class="thumb_base"><img src="/assets/img/common/movie_base.png" alt=""></p>
                  <div class="thumb" style="background:url('//img.example.com/maxresdefault.jpg') center center no-repeat;background-size: 100% auto;"><img src="/assets/img/common/movie_thumb.png" alt=""><div class="inner"></div></div>
                </div>
                <div class="caption">
                  <p>4</p>
                </div>
              </li>



                          </ul>
          </div>
        </article>

1 ответ 1

0

Раз уж вы уже брались переписывать слайдеры, то возможно, для решения вашей задачи, вам подойдёт owl.carousel. В ней без труда можно создать слайдер, с HTML блокам, который будет скролится пальцем и управляться с кнопок

Ссылка для быстрого старта в owl.carousel на Русском языке

С использованием Qwl.Carousel ваш код будет выглядеть примерно так:

<ul id="js-carousel-1" class="owl-carousel">
  <li class="carousel-item">[YOUT_HTML_THIS]</li>
  <li class="carousel-item">[YOUT_HTML_THIS]</li>
  <li class="carousel-item">[YOUT_HTML_THIS]</li>
  ...
  <li class="carousel-item">[YOUT_HTML_THIS]</li>
  <li class="carousel-item">[YOUT_HTML_THIS]</li>
</ul>
2
  • Спасибо. Owl.carousel тоже пробовал переписать. И когда вставляю код слайдера на сайт, код Owl.carousel мне почему-то ломает весь frontend сайта.
    – icovr
    Commented 22 апр. 2020 в 1:02
  • Надо видеть стили DOOM элемента, в который помещаете oml.carusel. Да и стили дочерних элементов тоже . Скорее всего всё упирается в свойства FLOAT или FLEX. По опыту могу сказать, что это весьма легкая в настройки и установки карсель. Попробуйте создать отдельную HTML страницу с каруселью. Запустить там карусель и начать заполнять её своим HTML контентом, попутно прописывая стили. Возможно, это поможет Вам понять, какие именно элементы ломают фронтенд страницы Commented 22 апр. 2020 в 15:28

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.