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

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

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

Вариант 1:

HTML:

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

<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>

</div>

</a>

</div>

</a>

</div>

jQuery:

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

$('.carousel-1').owlCarousel({
    loop:true,
    stagePadding: 70,
    nav:true,
    dots: false,
    navText: ['&lsaquo;', '&rsaquo;'],
    responsive:{
        0:{items:1},
        500:{items:2},
        992:{items:3},
        1200:{items:4},
        1600:{items:5}		
    }
});

$('.carousel-1').owlCarousel({

loop:true,

stagePadding: 70,

nav:true,

dots: false,

navText: ['&lsaquo;', '&rsaquo;'],

responsive:{

0:{items:1},

500:{items:2},

992:{items:3},

1200:{items:4},

1600:{items:5}

}

});

CSS:

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

.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));
}

.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 нужно удалить строки

height: 240px;
object-fit: cover;

1 2	height: 240px; object-fit: cover;

Вариант 2:

HTML:

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

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

<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>

</div>

</a>

</div>

</a>

</div>

jQuery:

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

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: ['&lsaquo;', '&rsaquo;'],
    responsive:{
        0:{items:1},
        600:{items:2},
        992:{items:3},
        1200:{items:4},
        1600:{items:5}			
	}
});

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: ['&lsaquo;', '&rsaquo;'],

responsive:{

0:{items:1},

600:{items:2},

992:{items:3},

1200:{items:4},

1600:{items:5}

}

});

CSS:

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

.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;
}

.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

Подписывайтесь на публикации Там наиболее интересные заметки без рекламы и другой ненужной информации.

Протестировать на смартфоне Открыть QR-код для перехода на эту страницу с телефона

Помощь по установке кода Ответы на часто задаваемые вопросы и решение типовых ошибок и проблем

Страница находится в стадии разработки

Поддержать блог Любые Ваши (пусть даже и скромные) суммы значительно повышают мотивацию развивать блог, делиться наработками и придумывать новые.

Опубликовано: 23.02.2022 / Обновлено: 26.05.2024
Рубрики: Слайдеры и карусели
Метки: jQuery, OwlCarousel
14084 просмотра

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

Слайдер с меняющимися фото на CSS

Слайдер с меняющимися фотографиями и их описанием на чистом CSS

3D-карусель Cloud 9 Carousel

jQuery/Zepto плагин Cloud 9 Carousel для создания 3D-карусели изображений или блоков

Слайдер для radio кнопок

jQuery плагин radios-to-slider для создания слайдера из radio кнопок

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

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

Мария: 25.05.2024 в 17:32

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

Ответить
- Alexander: 26.05.2024 в 19:24
  
  Если я правильно понял, то посетитель должен загружать фото, и они отображаться таким образом?
  Если да, то тут задача не в слайдере, а в функционале загрузки фото с последующим выводом на экран, а уж потом можно думать как их оформить и показать.
  
  Ответить
Олег: 15.06.2023 в 13:31

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

Ответить
- Alexander: 15.06.2023 в 17:33
  
  Вопрос решен в ВК при личном общении
  
  Ответить
Станислав: 16.09.2022 в 12:29

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

Ответить
- Alexander: 17.09.2022 в 17:16
  Это так и задумывалось, поэтому ссылка стоит на каждом элементе карусели.
  Вам нужно подключить какой-нибудь лайтбокс (если не подключен) и прописать через него ссылки на большие фото.
  Например, если у вас подключен Fancybox, то вместо
  
  <a href="#link">
  
  будет
  
  <a href="big-photo.jpg" data-fancybox="carousel">
  Ответить
Alexey: 24.07.2022 в 10:28

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

Ответить
- Alexander: 24.07.2022 в 12:41
  
  Тут то работает, отсюда вывод, что что то не правильно делали.
  Или с кодами карусели или jquery
  
  Ответить
  - Alexey: 24.07.2022 в 13:26
    
    Там вроде и ошибаться не с чем. Ставлю в 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: 24.07.2022 в 14:44
      
      jquery, потом owl.carousel, потом скрипт из примера.
      если опять не работает, смотрим консоль, там будет ошибка, по которой можно определить что не так.
      
      Ответить
      - Alexey: 24.07.2022 в 19:26
        
        Спасибо, разобрался. Кстати, не хотите исправить ошибки в описании установки CSS Первого варианта и второго. Практически в одном и том же месте.
        Вот предложение; Подключаем стили плагина owl.carousel.min.css и указннАые ниже.
        
        Ответить
        
        Alexander: 25.07.2022 в 08:44
        
        Спасибо, попрпавил 🙂
        
        Ответить
        
        Alexey: 27.07.2022 в 08:33
        
        Здравствуйте ещё раз.
        В первом варианте слайдера поправили, а во втором забыли.)))
        Вот предложение; CSS:
        Подключаем стили плагина owl.carousel.min.css и указннАые ниже:
        
        Норм сайт. Буду частенько заглядывать.)
        
        Alexander: 27.07.2022 в 10:00
        
        Еще раз спасибо 🙂
        Беда у меня с орфографией, и проверка не помогает, т.к. тут коды и все подчеркивается красным.
- Саня: 13.09.2022 в 21:45
  
  Тут одна шляпа не работающая
  
  Ответить
  - Alexander: 14.09.2022 в 13:14
    
    Или кто то не умеет читать описание
    
    Ответить
  - Олег: 27.06.2023 в 22:12
    
    Абсолютно напрасно!!! ЧИТАЙТЕ внимательно, и главное - ДУМАЙТЕ!!! Все что предлагает Александр - полностью рабочее!! Подтверждаю!! Просто при импорте его решения в Ваш код нужно включить мозги!!
    
    Ответить
Alex: 04.07.2022 в 17:12

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

Ответить
- Alexander: 07.07.2022 в 10:52
  
  Так они есть
  
  Ответить
Привет: 01.03.2022 в 16:27

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

Ответить
- Alexander: 02.03.2022 в 13:16
  Настройки:
  autoplay, autoplayTimeout и autoplayHoverPause
  например:
  
  autoplay: true, autoplayTimeout: 6000, // по умолчанию 5000 autoplayHoverPause: true, // пауза при наведении мыши
  Ответить

Вариант 1:

HTML:

jQuery:

CSS:

Вариант 2:

HTML:

jQuery:

CSS:

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

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

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