Это блок собственного кода. Перейдите в режим Предпросмотра или опубликуйте страницу, чтобы проверить работу кода.
Нажмите дважды, чтобы изменить
<style>
ol,
ul,
dl {
margin-top: 0;
margin-bottom: 1rem;
}
.slider {
position: relative;
display: block;
margin: 0 auto;
max-width: 960px;
font-family: Helvetica, "Helvetica Neue", Arial, sans-serif;
}
.slider__items {
position: relative;
width: 100%;
overflow: hidden;
}
.slider__item {
position: relative;
display: none;
width: 100%;
transition: transform 0.6s ease;
backface-visibility: hidden;
}
.slider__item_active,
.slider__item_next,
.slider__item_prev {
display: block;
}
.slider__item_next,
.slider__item_prev {
position: absolute;
top: 0;
}
.slider__item_next.slider__item_left,
.slider__item_prev.slider__item_right {
transform: translateX(0);
}
.slider__item_next,
.slider__item_right.slider__item_active {
transform: translateX(100%);
}
.slider__item_prev,
.slider__item_left.slider__item_active {
transform: translateX(-100%);
}
.slider__control {
position: absolute;
top: 0;
bottom: 0;
display: flex;
align-items: center;
justify-content: center;
width: 8%;
color: #fff;
text-align: center;
opacity: 0.5;
}
.slider__control:hover,
.slider__control:focus {
color: #fff;
text-decoration: none;
outline: 0;
opacity: .9;
}
.slider__control_prev {
left: 0;
}
.slider__control_next {
right: 0;
}
.slider__control::before {
content: '';
display: inline-block;
width: 20px;
height: 20px;
background: transparent no-repeat center center;
background-size: 100% 100%;
}
.slider__control_prev::before {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E");
}
.slider__control_next::before {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E");
}
.slider__indicators {
position: absolute;
right: 0;
bottom: 10px;
left: 0;
z-index: 15;
display: flex;
justify-content: center;
padding-left: 0;
margin-right: 15%;
margin-left: 15%;
list-style: none;
}
.slider__indicator {
position: relative;
flex: 0 1 auto;
width: 30px;
height: 3px;
margin-right: 3px;
margin-left: 3px;
text-indent: -999px;
cursor: pointer;
background-color: rgba(255, 255, 255, 0.5);
border-radius: 6px;
}
.slider__indicator::before {
position: absolute;
top: -10px;
left: 0;
display: inline-block;
width: 100%;
height: 10px;
content: "";
}
.slider__indicator::after {
position: absolute;
bottom: -10px;
left: 0;
display: inline-block;
width: 100%;
height: 10px;
content: "";
}
.slider__indicator_active {
background-color: #fff;
}
img {
display: inline-block;
height: auto;
max-width: 100%;
}
.slider__item {}
/* .slider__item_1 {
background: linear-gradient(45deg, #085078 10%, #85d8ce 90%);
}
.slider__item_2 {
background: linear-gradient(to right, #dd1818, #333333);
}
.slider__item_3 {
background: linear-gradient(to right, #093028, #237a57);
}
.slider__item_4 {
background: linear-gradient(to right, #243B55, #141E30);
}
.slider__item_5{
background: linear-gradient(to right, #243B55, #dddddd);
}
.slider__item_5 {
background: linear-gradient(to right, #243B55, #00ff00);
background: linear-gradient(to right, #243B55, #00ff00);
}*/
/* .slider__item_inner {
position: absolute;
right: 15%;
bottom: 30px;
left: 15%;
z-index: 10;
padding-top: 20px;
padding-bottom: 20px;
color: #fff;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}*/
.slider__item {
height: 320px;
overflow: hidden;
}
.slider__item_inner {
position: absolute;
left: 8%;
right: 8%;
top: 36px;
bottom: 36px;
overflow: hidden;
color: #fff;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
overflow: visible;
}
.slider__item_img {
flex: 0 0 100px;
max-width: 100px;
}
.slider__item_testimonial {
flex: 1 0 0;
display: flex;
flex-direction: column;
text-align: center;
}
.slider__item_name {
font-size: 20px;
margin-bottom: 8px;
color: rgba(255, 255, 255, 0.8);
}
.slider__item_post {
font-size: 14px;
margin-bottom: 8px;
color: rgba(255, 255, 255, 0.8);
display: none;
}
.slider__item_text {
font-size: 16px;
color: rgba(255, 255, 255, 0.5);
margin-bottom: 12px;
display: none;
}
@media (min-width: 576px) {
.slider__item {
height: 310px;
}
.slider__item_inner {
flex-direction: row;
overflow: visible;
}
.slider__item_testimonial {
margin-left: 15px;
}
.slider__item_img {
flex: 0 0 150px;
max-width: 150px;
height: 200px;
}
.slider__item_testimonial {
text-align: left;
}
.slider__item_post,
.slider__item_text {
display: block;
}
}
.btn {
display: block;
font-weight: 400;
text-align: center;
white-space: nowrap;
vertical-align: middle;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
border: 1px solid transparent;
padding: .375rem .75rem;
font-size: 1rem;
line-height: 1.5;
transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
color: #fff;
background-color: rgba(255, 255, 255, 0.2);
text-decoration: none;
}
.btn:hover {
color: #fff;
background-color: rgba(255, 255, 255, .5);
}
</style>
<div>
<div id="slider" class="slider">
<ol class="slider__indicators">
<li class="slider__indicator slider__indicator_active" data-slide-to="0"></li>
<li class="slider__indicator" data-slide-to="1"></li>
<li class="slider__indicator" data-slide-to="2"></li>
<li class="slider__indicator" data-slide-to="3"></li>
<li class="slider__indicator" data-slide-to="4"></li>
</ol>
<div class="slider__items">
<div class="slider__item slider__item_1 slider__item_active">
<span class="slider__item_inner"> <iframe width="560" height="315" src="https://www.youtube.com/embed/Id15Ip9G4i8" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<!--span class="slider__item_img">
<img class="slider__item_photo" src="/examples/images/book-cover-1.jpg" alt="">
</span-->
<span class="slider__item_testimonial">
<span class="slider__item_name">Кораблева Наталья Петровна</span>
<span class="slider__item_post">Пластический хирург,д.м.н., зав.кафедрой пластической и реконструктивной хирургии СПБГПМУ, действительный член РОПРЭХ, ISAPS, ASAPS, Rhinoplasty Society of Europe (RSE)</span>
<!--span class="slider__item_text">
</span>
<span class="slider__item_action">
<a class="btn" href="#">Купить за 769р.</a>
</span-->
</span>
</span>
</div>
<div class="slider__item slider__item_2">
<span class="slider__item_inner"> <iframe width="560" height="315" src="https://www.youtube.com/embed/GmGCMBrmQI8" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<!--span class="slider__item_img">
<img class="slider__item_photo" src="/examples/images/book-cover-1.jpg" alt="">
</span-->
<span class="slider__item_testimonial">
<span class="slider__item_name">Мария Владимировна Ермощенкова</span>
<span class="slider__item_post">Врач-хирург, онколог, кандидат медицинских наук</span>
<!--span class="slider__item_text">
</span>
<span class="slider__item_action">
<a class="btn" href="#">Купить за 769р.</a>
</span-->
</span>
</span>
</div>
<div class="slider__item slider__item_3">
<span class="slider__item_inner"> <iframe width="560" height="315" src="https://www.youtube.com/embed/nQIDkUtn-RQ" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<!--span class="slider__item_img">
<img class="slider__item_photo" src="/examples/images/book-cover-1.jpg" alt="">
</span-->
<span class="slider__item_testimonial">
<span class="slider__item_name">Неробеев Александр Иванович</span>
<span class="slider__item_post">профессор, д.м.н. Научный руководитель отдела разработки высокотехнологичных методов реконструктивной челюстно-лицевой хирургии. Лауреат премии правительства России</span>
<!--span class="slider__item_text">
</span>
<span class="slider__item_action">
<a class="btn" href="#">Купить за 769р.</a>
</span-->
</span>
</span>
</div>
<div class="slider__item slider__item_4">
<span class="slider__item_inner"> <iframe width="560" height="315" src="https://www.youtube.com/embed/e4zRHgBFbh0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<!--span class="slider__item_img">
<img class="slider__item_photo" src="/examples/images/book-cover-1.jpg" alt="">
</span-->
<span class="slider__item_testimonial">
<span class="slider__item_name">Липский Константин Борисович</span>
<span class="slider__item_post">к.м.н., доцент Кафедры пластической хирургии 1МГМУ им. И.М.Сеченова.
Президент РОПРЭХ</span>
<!--span class="slider__item_text">
</span>
<span class="slider__item_action">
<a class="btn" href="#">Купить за 769р.</a>
</span-->
</span>
</span>
</div>
<div class="slider__item slider__item_5">
<span class="slider__item_inner">
<!--span class="slider__item_img">
<img class="slider__item_photo" src="/examples/images/book-cover-1.jpg" alt="">
</span>
<span class="slider__item_testimonial">
<span class="slider__item_name">JavaScript. Карманный справочник</span>
<span class="slider__item_post">Дэвид Флэнаган, 2015</span>
<span class="slider__item_text">
Представлены самые важные сведения о синтаксисе языка и показаны примеры его применения....
</span-->
<span class="slider__item_action">
<a class="btn" href="https://www.youtube.com/playlist?list=PLyvE1RUbE3dyArVWYMPipjFFBKFen04FX" target="_blank">Смотреть все интервью</a>
</span>
</span>
<!--/span-->
</div>
</div>
<a class="slider__control slider__control_prev" href="#" role="button"></a>
<a class="slider__control slider__control_next" href="#" role="button"></a>
</div>
<script>
'use strict';
var slider = (function (config) {
const ClassName = {
INDICATOR_ACTIVE: 'slider__indicator_active',
ITEM: 'slider__item',
ITEM_LEFT: 'slider__item_left',
ITEM_RIGHT: 'slider__item_right',
ITEM_PREV: 'slider__item_prev',
ITEM_NEXT: 'slider__item_next',
ITEM_ACTIVE: 'slider__item_active'
}
var
_isSliding = false, // индикация процесса смены слайда
_interval = 0, // числовой идентификатор таймера
_transitionDuration = 700, // длительность перехода
_slider = {}, // DOM элемент слайдера
_items = {}, // .slider-item (массив слайдов)
_sliderIndicators = {}, // [data-slide-to] (индикаторы)
_config = {
selector: '', // селектор слайдера
isCycling: true, // автоматическая смена слайдов
direction: 'next', // направление смены слайдов
interval: 5000, // интервал между автоматической сменой слайдов
pause: true // устанавливать ли паузу при поднесении курсора к слайдеру
};
var
// функция для получения порядкового индекса элемента
_getItemIndex = function (_currentItem) {
var result;
_items.forEach(function (item, index) {
if (item === _currentItem) {
result = index;
}
});
return result;
},
// функция для подсветки активного индикатора
_setActiveIndicator = function (_activeIndex, _targetIndex) {
if (_sliderIndicators.length !== _items.length) {
return;
}
_sliderIndicators[_activeIndex].classList.remove(ClassName.INDICATOR_ACTIVE);
_sliderIndicators[_targetIndex].classList.add(ClassName.INDICATOR_ACTIVE);
},
// функция для смены слайда
_slide = function (direction, activeItemIndex, targetItemIndex) {
var
directionalClassName = ClassName.ITEM_RIGHT,
orderClassName = ClassName.ITEM_PREV,
activeItem = _items[activeItemIndex], // текущий элемент
targetItem = _items[targetItemIndex]; // следующий элемент
var _slideEndTransition = function () {
activeItem.classList.remove(ClassName.ITEM_ACTIVE);
activeItem.classList.remove(directionalClassName);
targetItem.classList.remove(orderClassName);
targetItem.classList.remove(directionalClassName);
targetItem.classList.add(ClassName.ITEM_ACTIVE);
window.setTimeout(function () {
if (_config.isCycling) {
clearInterval(_interval);
_cycle();
}
_isSliding = false;
activeItem.removeEventListener('transitionend', _slideEndTransition);
}, _transitionDuration);
};
if (_isSliding) {
return; // завершаем выполнение функции если идёт процесс смены слайда
}
_isSliding = true; // устанавливаем переменной значение true (идёт процесс смены слайда)
if (direction === "next") { // устанавливаем значение классов в зависимости от направления
directionalClassName = ClassName.ITEM_LEFT;
orderClassName = ClassName.ITEM_NEXT;
}
targetItem.classList.add(orderClassName); // устанавливаем положение элемента перед трансформацией
_setActiveIndicator(activeItemIndex, targetItemIndex); // устанавливаем активный индикатор
window.setTimeout(function () { // запускаем трансформацию
targetItem.classList.add(directionalClassName);
activeItem.classList.add(directionalClassName);
activeItem.addEventListener('transitionend', _slideEndTransition);
}, 0);
},
// функция для перехода к предыдущему или следующему слайду
_slideTo = function (direction) {
var
activeItem = _slider.querySelector('.' + ClassName.ITEM_ACTIVE), // текущий элемент
activeItemIndex = _getItemIndex(activeItem), // индекс текущего элемента
lastItemIndex = _items.length - 1, // индекс последнего элемента
targetItemIndex = activeItemIndex === 0 ? lastItemIndex : activeItemIndex - 1;
if (direction === "next") { // определяем индекс следующего слайда в зависимости от направления
targetItemIndex = activeItemIndex == lastItemIndex ? 0 : activeItemIndex + 1;
}
_slide(direction, activeItemIndex, targetItemIndex);
},
// функция для запуска автоматической смены слайдов в указанном направлении
_cycle = function () {
if (_config.isCycling) {
_interval = window.setInterval(function () {
_slideTo(_config.direction);
}, _config.interval);
}
},
// обработка события click
_actionClick = function (e) {
var
activeItem = _slider.querySelector('.' + ClassName.ITEM_ACTIVE), // текущий элемент
activeItemIndex = _getItemIndex(activeItem), // индекс текущего элемента
targetItemIndex = e.target.getAttribute('data-slide-to');
if (!(e.target.hasAttribute('data-slide-to') || e.target.classList.contains('slider__control'))) {
return; // завершаем если клик пришёлся на не соответствующие элементы
}
if (e.target.hasAttribute('data-slide-to')) {// осуществляем переход на указанный сдайд
if (activeItemIndex === targetItemIndex) {
return;
}
_slide((targetItemIndex > activeItemIndex) ? 'next' : 'prev', activeItemIndex, targetItemIndex);
} else {
e.preventDefault();
_slideTo(e.target.classList.contains('slider__control_next') ? 'next' : 'prev');
}
},
// установка обработчиков событий
_setupListeners = function () {
// добавление к слайдеру обработчика события click
_slider.addEventListener('click', _actionClick);
// остановка автоматической смены слайдов (при нахождении курсора над слайдером)
if (_config.pause && _config.isCycling) {
_slider.addEventListener('mouseenter', function (e) {
clearInterval(_interval);
});
_slider.addEventListener('mouseleave', function (e) {
clearInterval(_interval);
_cycle();
});
}
};
// init (инициализация слайдера)
for (var key in config) {
if (key in _config) {
_config[key] = config[key];
}
}
_slider = (typeof _config.selector === 'string' ? document.querySelector(_config.selector) : _config.selector);
_items = _slider.querySelectorAll('.' + ClassName.ITEM);
_sliderIndicators = _slider.querySelectorAll('[data-slide-to]');
// запуск функции cycle
_cycle();
_setupListeners();
return {
next: function () { // метод next
_slideTo('next');
},
prev: function () { // метод prev
_slideTo('prev');
},
stop: function () { // метод stop
clearInterval(_interval);
},
cycle: function () { // метод cycle
clearInterval(_interval);
_cycle();
}
}
}({
selector: '.slider',
isCycling: false,
direction: 'next',
interval: 5000,
pause: true
}));
</script>
</div>
