Карусель для фотографий

Оба варианта рассчитаны на применение их без контейнера (от края до края видимой области) и без каких либо надписей.

Для их реализации используется библиотека jQuery и плагин Owl Carousel 2.3.4

Вариант 1:

HTML:

Ссылки <a href="#link"> ... </a> ставить не обязательно

jQuery:

Подключаем библиотеку jQuery (если не подключена), скрипт плагина owl.carousel.min.js и указанный ниже:

CSS:

Подключаем стили плагина owl.carousel.min.css и указанные ниже:

Т.к обычно фотографии загружаются разного размера, в стилях для них установлена конкретная высота 240px, с обрезанием краев.

Если все фотографии одинаковые, из класса .carousel-1 .owl-pic img нужно удалить строки

Вариант 2:

HTML:

Ссылки <a href="#link"> ... </a> ставить не обязательно.

При их отсутствии, кликая на фотографию, она будет переходить в центр карусели.

jQuery:

Подключаем библиотеку jQuery (если не подключена), скрипт плагина owl.carousel.min.js и указннаый ниже:

CSS:

Подключаем стили плагина owl.carousel.min.css и указанный ниже:

Как и в первом варианте, фотографии обрезаются относительно заданной высоты в 240px, а центральное фото 320px


Более подробную информацию о карусели Owl Carousel 2, ее настройках и возможностях можно посмотреть на странице разработчиков https://owlcarousel2.github.io/OwlCarousel2/


Фотографии взяты с сайта pexels.com

Смотрите также:

Добавить комментарий:

Ваш комментарий отправлен!

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

  • Мария:

    Добрый день. Подскажите, пожалуйста, как реализовать данный слайдер не с готовыми изображениями, а с input type='file'

    Ответить
    • Alexander:

      Если я правильно понял, то посетитель должен загружать фото, и они отображаться таким образом?
      Если да, то тут задача не в слайдере, а в функционале загрузки фото с последующим выводом на экран, а уж потом можно думать как их оформить и показать.

      Ответить
  • Олег:

    Есть кто живой?
    Всё же никак не могу победить стрелки в карусели...
    Как Вы добились того что они по бокам карусели???
    У меня всегда снизу...
    Откройте секрет!

    Ответить
    • Alexander:

      Вопрос решен в ВК при личном общении

      Ответить
  • Станислав:

    Здравствуйте. Александр, а открытие в попапе реально ли сделать в ваших каруселях? листинг это круто, прикрутил, но возникла необходимость открывать в больше размер эти фотки.

    Ответить
    • Alexander:

      Это так и задумывалось, поэтому ссылка стоит на каждом элементе карусели.
      Вам нужно подключить какой-нибудь лайтбокс (если не подключен) и прописать через него ссылки на большие фото.
      Например, если у вас подключен Fancybox, то вместо

      <a href="#link">

      будет

      <a href="big-photo.jpg" data-fancybox="carousel">
      Ответить
  • Alexey:

    Здравствуйте.
    Ни чем воспользоваться не смог хоть и бился всю ночь. Отсюда и вывод что, оно не рабочее.

    Ответить
    • Alexander:

      Тут то работает, отсюда вывод, что что то не правильно делали.
      Или с кодами карусели или jquery

      Ответить
      • Alexey:

        Там вроде и ошибаться не с чем. Ставлю в Head
        link type="text/css" href="css/owl.carousel.min.css" rel="stylesheet" /
        script type="text/javascript" src="js/owl.carousel.min.js"/script
        script type="text/javascript" src="js/jquery-3.6.0.min.js" /script
        в боди ставлю дополнительные стили со скриптом. Что тут не так?

        Ответить
        • Alexander:

          jquery, потом owl.carousel, потом скрипт из примера.
          если опять не работает, смотрим консоль, там будет ошибка, по которой можно определить что не так.

          Ответить
          • Alexey:

            Спасибо, разобрался. Кстати, не хотите исправить ошибки в описании установки CSS Первого варианта и второго. Практически в одном и том же месте.
            Вот предложение; Подключаем стили плагина owl.carousel.min.css и указннАые ниже.

            Ответить
            • Alexander:

              Спасибо, попрпавил 🙂

              Ответить
              • Alexey:

                Здравствуйте ещё раз.
                В первом варианте слайдера поправили, а во втором забыли.)))
                Вот предложение; CSS:
                Подключаем стили плагина owl.carousel.min.css и указннАые ниже:

                Норм сайт. Буду частенько заглядывать.)

              • Alexander:

                Еще раз спасибо 🙂
                Беда у меня с орфографией, и проверка не помогает, т.к. тут коды и все подчеркивается красным.

    • Саня:

      Тут одна шляпа не работающая

      Ответить
      • Alexander:

        Или кто то не умеет читать описание

        Ответить
      • Олег:

        Абсолютно напрасно!!! ЧИТАЙТЕ внимательно, и главное - ДУМАЙТЕ!!! Все что предлагает Александр - полностью рабочее!! Подтверждаю!! Просто при импорте его решения в Ваш код нужно включить мозги!!

        Ответить
  • Alex:

    А как сделать стрелки то?

    Ответить
  • Привет:

    Доброго времени суток! А можно сделать ещё один пример (как вариант №2), только, чтобы ещё был автоматический листинг изображений (с возможностью самостоятельно выставить через какое время будет смена изображений, например, 5 секунд)? Спасибо!

    Ответить
    • Alexander:

      Настройки:
      autoplay, autoplayTimeout и autoplayHoverPause
      например:

      autoplay: true,
      autoplayTimeout: 6000, // по умолчанию 5000
      autoplayHoverPause: true, // пауза при наведении мыши
      Ответить