0

Порекомендуйте как сделать подобный слайдер. По нажатию на 1 из 3 миниатюр раскрывается слева картинка введите сюда описание изображения

3
  • 1
    Можно считывать src миниатюры и вставлять в основное
    – Dmytro
    26 янв 2018 в 18:31
  • 1
    Я отвечал на подобный вопрос пару дней назад. Смотрите тут Это на чистом JS. Можно сделать аналогичное и на jQuery.
    – user262779
    26 янв 2018 в 18:55
  • 1
    Прилепить плагин не всегда лучшее решение. Рано или поздно в плагине придется копаться и т.д. Проще один раз самому написать костяк, а далее лишь менять в зависимости от потребностей проекта. Зато так вы ни от кого не зависите.
    – user262779
    26 янв 2018 в 19:02

3 ответа 3

0

Используй Bootstrap

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

В HTML:

<div data-bs-ride="carousel" class="carousel slide" id="carousel-1">
<div class="carousel-inner">
    <div class="carousel-item active"><img class="w-100 d-block" src="https://cdn.bootstrapstudio.io/placeholders/1400x800.png" alt="Slide Image" /></div>
    <div class="carousel-item"><img class="w-100 d-block" src="https://cdn.bootstrapstudio.io/placeholders/1400x800.png" alt="Slide Image" /></div>
    <div class="carousel-item"><img class="w-100 d-block" src="https://cdn.bootstrapstudio.io/placeholders/1400x800.png" alt="Slide Image" /></div>
</div>
<div><a href="#carousel-1" role="button" data-bs-slide="prev" class="carousel-control-prev"><span aria-hidden="true" class="carousel-control-prev-icon"></span><span class="visually-hidden">Previous</span></a><a href="#carousel-1" role="button" data-bs-slide="next" class="carousel-control-next"><span aria-hidden="true" class="carousel-control-next-icon"></span><span class="visually-hidden">Next</span></a></div>
<ol class="carousel-indicators">
    <li data-bs-target="#carousel-1" data-bs-slide-to="0" class="active"></li>
    <li data-bs-target="#carousel-1" data-bs-slide-to="1"></li>
    <li data-bs-target="#carousel-1" data-bs-slide-to="2"></li>
</ol>
  • carousel-inner - используется для хранения всего содержимого изображения.

  • carousel-indicators - используется для отображения всех индикаторов внизу.

Результат введите сюда описание изображения

Я добавил дополнительные вещи: введите сюда описание изображения

Вот весь исходный код:

<div class="container" style="margin-top: 30px;">
<div class="row">
    <div class="col-md-12 col-lg-7">
        <div data-bs-ride="carousel" class="carousel slide" id="carousel-1">
            <div class="carousel-inner">
                <div class="carousel-item active"><img class="w-100 d-block" src="https://cdn.bootstrapstudio.io/placeholders/1400x800.png" alt="Slide Image" /></div>
                <div class="carousel-item"><img class="w-100 d-block" src="https://cdn.bootstrapstudio.io/placeholders/1400x800.png" alt="Slide Image" /></div>
                <div class="carousel-item"><img class="w-100 d-block" src="https://cdn.bootstrapstudio.io/placeholders/1400x800.png" alt="Slide Image" /></div>
            </div>
            <div><a href="#carousel-1" role="button" data-bs-slide="prev" class="carousel-control-prev"><span aria-hidden="true" class="carousel-control-prev-icon"></span><span class="visually-hidden">Previous</span></a><a href="#carousel-1" role="button" data-bs-slide="next" class="carousel-control-next"><span aria-hidden="true" class="carousel-control-next-icon"></span><span class="visually-hidden">Next</span></a></div>
            <ol class="carousel-indicators">
                <li data-bs-target="#carousel-1" data-bs-slide-to="0" class="active"></li>
                <li data-bs-target="#carousel-1" data-bs-slide-to="1"></li>
                <li data-bs-target="#carousel-1" data-bs-slide-to="2"></li>
            </ol>
        </div>
    </div>
    <div class="col">
        <h1>Heading</h1>
        <p>Paragraph</p>
    </div>
</div>
-2

Можно сделать типа слайдшоу на jquery

$(function() {
$('.slideshow__thumbs-link').on('click', function(e) {
    e.preventDefault();
    var
      th = $(this),
      path = th.attr('href'), // путь до миниатюры
      item = th.closest('.slideshow__thumbs-item'),
      container = item.closest('.slideshow'),
      imgFullSize = container.find('.slideshow__display'),
      flag = false;
    duration = 600;
    if (flag) {
      return;
    }
    if (!item.hasClass('active')) {
      imgFullSize.fadeOut(duration, function() {
        $(this).attr("src", path) // меняем путь до картинки
          .fadeIn(duration);
      });
      flag = true;
    }); item.addClass('active')
  .siblings()
  .removeClass('active');
}
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slideshow">
  <div class="slideshow__fullsize">
    <img src="img/1.jpeg" alt="" class="slideshow__display">
  </div>
  <ul class="slideshow__thumbs">
    <li class="slideshow__thumbs-item active">
      <a href="img/1.jpeg" class="slideshow__thumbs-link">
        <img src="img/1.jpeg" class="slideshow__thumbs-img" alt="">
      </a>
    </li>
    <li class="slideshow__thumbs-item">
      <a href="img/2.jpeg" class="slideshow__thumbs-link">
        <img src="img/2.jpeg" class="slideshow__thumbs-img" alt="">
      </a>
    </li>
    <li class="slideshow__thumbs-item">
      <a href="img/3.jpeg" class="slideshow__thumbs-link">
        <img src="img/3.jpeg" class="slideshow__thumbs-img" alt="">
      </a>
    </li>
  </ul>
</div>

1
  • Что-то у вас тут ошибки сыпет вовсю...
    – user262779
    26 янв 2018 в 20:08
-3

а зачем делать? все и так готово

http://kenwheeler.github.io/slick/

посмотрите предпоследний пример

3
  • тоже думал - как вариант. Но там по структуре нет похожих, чтобы были точки внизу и одновременно переключение изображений на каждом слайде
    – stiv
    26 янв 2018 в 18:37
  • У данного слайдера есть дока, которая позволит настроить его на любой вкус
    –  DemoGosha
    26 янв 2018 в 18:41
  • Так структура легко меняется.
    – user262779
    26 янв 2018 в 18:58

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

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