Оба варианта рассчитаны на применение их без контейнера (от края до края видимой области) и без каких либо надписей.
Для их реализации используется библиотека jQuery и плагин Owl Carousel 2.3.4
Оба варианта рассчитаны на применение их без контейнера (от края до края видимой области) и без каких либо надписей.
Для их реализации используется библиотека jQuery и плагин Owl Carousel 2.3.4
Ссылки <a href="#link"> ... </a>
ставить не обязательно
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<div class="carousel-1 owl-carousel"> <a href="#link"> <div class="owl-pic"> <img src="photo.jpg" alt="" /> </div> </a> <!-- Еще Фотографии --> <a href="#link"> <div class="owl-pic"> <img src="photo.jpg" alt="" /> </div> </a> </div> |
Подключаем библиотеку jQuery (если не подключена), скрипт плагина owl.carousel.min.js и указанный ниже:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
$('.carousel-1').owlCarousel({ loop:true, stagePadding: 70, nav:true, dots: false, navText: ['‹', '›'], responsive:{ 0:{items:1}, 500:{items:2}, 992:{items:3}, 1200:{items:4}, 1600:{items:5} } }); |
Подключаем стили плагина owl.carousel.min.css и указанные ниже:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 |
.carousel-1 { margin: 20px 0; box-shadow: 0 8px 18px rgba(0,0,0,0.3), 0 16px 20px rgba(0,0,0,0.2); background: #111; padding: 5px 0; } .carousel-1 .owl-pic { border: 5px solid #111; overflow: hidden; transform: skew(-10deg); } .carousel-1 .owl-pic img { width: 100%; transform: skew(10deg) scale(1.2); transition: 0.3s opacity ease, 0.3s transform ease; opacity: 0.6; height: 240px; object-fit: cover; } @media (max-width: 768px) { .carousel-1 .owl-pic img { opacity: 1; } } .carousel-1 .owl-pic:hover img { opacity: 1; transform: skew(10deg) scale(1.3); } .carousel-1 .owl-nav .owl-prev, .carousel-1 .owl-nav .owl-next { position: absolute; cursor: pointer; font-size: 60px!important; color: #FFF!important; top: 0; height: 100%; width: 70px; transition: 0.3s opacity ease; opacity: 0.2; margin: 0; padding: 0; } .carousel-1 .owl-nav .owl-prev:hover, .carousel-1 .owl-nav .owl-next:hover { opacity: 1; } .carousel-1 .owl-nav .owl-prev, .carousel-1 .owl-nav .owl-prev:hover { left: 0; background: linear-gradient(to right, #131313, rgba(19, 19, 19, 0)); } .carousel-1 .owl-nav .owl-next, .carousel-1 .owl-nav .owl-next:hover { right: 0; background: linear-gradient(to left, #131313, rgba(19, 19, 19, 0)); } |
Т.к обычно фотографии загружаются разного размера, в стилях для них установлена конкретная высота 240px, с обрезанием краев.
Если все фотографии одинаковые, из класса .carousel-1 .owl-pic img
нужно удалить строки
1 2 |
height: 240px; object-fit: cover; |
Ссылки <a href="#link"> ... </a>
ставить не обязательно.
При их отсутствии, кликая на фотографию, она будет переходить в центр карусели.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<div class="carousel-2 owl-carousel"> <a href="#link"> <div class="owl-pic"> <img src="photo.jpg" alt="" /> </div> </a> <!-- Еще Фотографии --> <a href="#link"> <div class="owl-pic"> <img src="photo.jpg" alt="" /> </div> </a> </div> |
Подключаем библиотеку jQuery (если не подключена), скрипт плагина owl.carousel.min.js и указннаый ниже:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
let $owl = $('.carousel-2'); $owl.children().each( function( index ) { $(this).attr( 'data-position', index ); }); $(document).on('click', '.owl-item>div', function() { let $speed = 300; $owl.trigger('to.owl.carousel', [$(this).data( 'position' ), $speed] ); }); $owl.owlCarousel({ loop:true, center: true, stagePadding: 70, nav: true, dots: false, navText: ['‹', '›'], responsive:{ 0:{items:1}, 600:{items:2}, 992:{items:3}, 1200:{items:4}, 1600:{items:5} } }); |
Подключаем стили плагина owl.carousel.min.css и указанный ниже:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 |
.carousel-2 .owl-item { padding: 10px 0 30px 0; } .carousel-2 .owl-pic { background: #000; margin: 40px 0; border: 5px solid #000; border-top: 10px solid #000; border-bottom: 10px solid #000; transition: all 0.4s ease; height: 240px; box-shadow: 0 8px 18px rgba(0,0,0,0.3), 0 16px 20px rgba(0,0,0,0.2); } .carousel-2 .owl-item.center .owl-pic { opacity: 1; border: 8px solid #BFE2FF; margin: 0 0 0 -15%; width: 130%; height: 320px; } .carousel-2 .owl-item.center + .owl-item { position: relative; z-index: -1; } .carousel-2 .owl-pic img { width: 100%; height: 100%; transition: 0.3s opacity ease, 0.3s transform ease; opacity: 0.6; object-fit: cover; } .carousel-2 .owl-item .owl-pic:hover img, .carousel-2 .owl-item.center .owl-pic img { opacity: 1; } .carousel-2 .owl-nav button.owl-prev, .carousel-2 .owl-nav button.owl-next { position: absolute; cursor: pointer; font-size: 60px!important; color: #FFF!important; top: 0; height: 100%; width: 70px; transition: 0.3s opacity ease; opacity: 0.6; margin: 0; padding-bottom: 30px!important; } .carousel-2 .owl-nav button.owl-prev:hover, .carousel-2 .owl-nav button.owl-next:hover { opacity: 1; } .carousel-2 .owl-nav button.owl-prev, .carousel-2 .owl-nav button.owl-prev:hover { left: 0; } .carousel-2 .owl-nav button.owl-next, .carousel-2 .owl-nav button.owl-next:hover { right: 0; } |
Как и в первом варианте, фотографии обрезаются относительно заданной высоты в 240px, а центральное фото 320px
Более подробную информацию о карусели Owl Carousel 2, ее настройках и возможностях можно посмотреть на странице разработчиков https://owlcarousel2.github.io/OwlCarousel2/
Фотографии взяты с сайта pexels.com
Небольшой скрипт на jQuery реализующий слайдер со сменой по диагонали фотографий
Слайдер с меняющимися фотографиями и их описанием на чистом CSS
Скрипт на jQuery и jQuery UI для смены одной фотографии на другую
Добрый день. Подскажите, пожалуйста, как реализовать данный слайдер не с готовыми изображениями, а с input type='file'
Если я правильно понял, то посетитель должен загружать фото, и они отображаться таким образом?
Если да, то тут задача не в слайдере, а в функционале загрузки фото с последующим выводом на экран, а уж потом можно думать как их оформить и показать.
Есть кто живой?
Всё же никак не могу победить стрелки в карусели...
Как Вы добились того что они по бокам карусели???
У меня всегда снизу...
Откройте секрет!
Вопрос решен в ВК при личном общении
Здравствуйте. Александр, а открытие в попапе реально ли сделать в ваших каруселях? листинг это круто, прикрутил, но возникла необходимость открывать в больше размер эти фотки.
Это так и задумывалось, поэтому ссылка стоит на каждом элементе карусели.
Вам нужно подключить какой-нибудь лайтбокс (если не подключен) и прописать через него ссылки на большие фото.
Например, если у вас подключен Fancybox, то вместо
будет
Здравствуйте.
Ни чем воспользоваться не смог хоть и бился всю ночь. Отсюда и вывод что, оно не рабочее.
Тут то работает, отсюда вывод, что что то не правильно делали.
Или с кодами карусели или jquery
Там вроде и ошибаться не с чем. Ставлю в 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
в боди ставлю дополнительные стили со скриптом. Что тут не так?
jquery, потом owl.carousel, потом скрипт из примера.
если опять не работает, смотрим консоль, там будет ошибка, по которой можно определить что не так.
Спасибо, разобрался. Кстати, не хотите исправить ошибки в описании установки CSS Первого варианта и второго. Практически в одном и том же месте.
Вот предложение; Подключаем стили плагина owl.carousel.min.css и указннАые ниже.
Спасибо, попрпавил 🙂
Здравствуйте ещё раз.
В первом варианте слайдера поправили, а во втором забыли.)))
Вот предложение; CSS:
Подключаем стили плагина owl.carousel.min.css и указннАые ниже:
Норм сайт. Буду частенько заглядывать.)
Еще раз спасибо 🙂
Беда у меня с орфографией, и проверка не помогает, т.к. тут коды и все подчеркивается красным.
Тут одна шляпа не работающая
Или кто то не умеет читать описание
Абсолютно напрасно!!! ЧИТАЙТЕ внимательно, и главное - ДУМАЙТЕ!!! Все что предлагает Александр - полностью рабочее!! Подтверждаю!! Просто при импорте его решения в Ваш код нужно включить мозги!!
А как сделать стрелки то?
Так они есть
Доброго времени суток! А можно сделать ещё один пример (как вариант №2), только, чтобы ещё был автоматический листинг изображений (с возможностью самостоятельно выставить через какое время будет смена изображений, например, 5 секунд)? Спасибо!
Настройки:
autoplay, autoplayTimeout и autoplayHoverPause
например: