Сергей Ракипов
22.05.2022, 11:35
У меня есть такой скрипт.
Он работает по следующему принципу, смешает блоки на определенные расстоянии. И работает нормально. НО! если я начинаю менять разрешение то работа рушится, если обновлю то все нормально
Как сделать что бы при изменение разрешение все нормально было
!!! Не знаю как сделать что бы было видно сразу три картинки. По умолчанию видно три картинки, и там нет элементов управления, когда начинаю уменьшить разрешение становится две картинки, еще уменьшаю одна картинка, при этом появляются элементы управление.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.slider {
position: relative;
overflow: hidden;
width: 910px;
margin: 0 auto;
}
.slider__wrapper {
display: flex;
transition: transform 0.6s ease;
}
.slider__item {
flex: 0 0 50;
max-width: 100%;
/* margin: 0px 10px 0px 10px; */
}
.slider__control {
position: absolute;
top: 0px;
display: none;
align-items: center;
justify-content: center;
width: 40px;
color: #fff;
text-align: center;
opacity: 0.5;
transform: translateY(-50%);
background: rgba(0, 0, 0, .5);
}
.slider__control_show {
display: flex;
}
.slider__control:hover,
.slider__control:focus {
color: #fff;
text-decoration: none;
outline: 0;
opacity: .9;
}
.slider__control_left {
left: 0;
}
.slider__control_right {
right: 0;
}
.slider__control::before {
content: '';
display: inline-block;
background: transparent no-repeat center center;
background-size: 100% 100%;
}
.slider__control_left::before {
width: 40px;
height: 598px;
position: absolute;
top: 0px;
left: 0px;
cursor: pointer;
background-image: url(https://www.rakipov.ru/files/strelka_2.svg);
background-repeat: no-repeat;
background-position: top left;
opacity: .8;
z-index: 10;
}
.slider__control_right::before {
width: 40px;
height: 598px;
position: absolute;
top: 0px;
right: 0px;
cursor: pointer;
background-image: url(https://www.rakipov.ru/files/strelka_2.svg);
background-repeat: no-repeat;
background-position: top right;
opacity: .8;
transform: rotate(180deg);
z-index: 10;
}
.slider__item>div {
line-height: 598px;
}
@media (max-width:1360px){
.slider {
position: relative;
overflow: hidden;
width: 580px;
margin: 0 auto;
}
}
@media (max-width:1020px){
.slider {
position: relative;
overflow: hidden;
width: 290px;
margin: 0 auto;
}
}
</style>
</head>
<body>
<div class="slider">
<div class="slider__wrapper">
<div class="slider__item">
<img src="https://www.rakipov.ru/files/str2-1.jpg" height="598" width="290" alt="">
</div>
<div class="slider__item">
<img src="https://www.rakipov.ru/files/str2-2.jpg" height="598" width="290" alt="">
</div>
<div class="slider__item">
<img src="https://www.rakipov.ru/files/str2-3.jpg" height="598" width="290" alt="">
</div>
</div>
<a class="slider__control slider__control_left" href="#" role="button"></a>
<a class="slider__control slider__control_right slider__control_show" href="#" role="button"></a>
</div>
<script>
'use strict';
var multiItemSlider = ( function () {
return function ( selector, config ) {
var
_mainElement = document.querySelector( selector ), // основный элемент блока
_sliderWrapper = _mainElement.querySelector( '.slider__wrapper' ), // обертка для .slider-item
_sliderItems = _mainElement.querySelectorAll( '.slider__item' ), // элементы (.slider-item)
_sliderControls = _mainElement.querySelectorAll( '.slider__control' ), // элементы управления
_sliderControlLeft = _mainElement.querySelector( '.slider__control_left' ), // кнопка "LEFT"
_sliderControlRight = _mainElement.querySelector( '.slider__control_right' ), // кнопка "RIGHT"
_wrapperWidth = parseFloat( getComputedStyle( _sliderWrapper ).width ), // ширина обёртки
_itemWidth = parseFloat( getComputedStyle( _sliderItems[ 0 ] ).width ), // ширина одного элемента
_positionLeftItem = 0, // позиция левого активного элемента
_transform = 0, // значение транфсофрмации .slider_wrapper
_step = _itemWidth / _wrapperWidth * 100, // величина шага (для трансформации)
_items = []; // массив элементов
// наполнение массива _items
_sliderItems.forEach( function ( item, index ) {
_items.push( {
item: item,
position: index,
transform: 0
} );
} );
var position = {
getMin: 0,
getMax: _items.length - 1,
}
var _transformItem = function ( direction ) {
if ( direction === 'right' ) {
if ( ( _positionLeftItem + _wrapperWidth / _itemWidth - 1 ) >= position.getMax ) {
return;
}
if ( !_sliderControlLeft.classList.contains( 'slider__control_show' ) ) {
_sliderControlLeft.classList.add( 'slider__control_show' );
}
if ( _sliderControlRight.classList.contains( 'slider__control_show' ) && ( _positionLeftItem +
_wrapperWidth / _itemWidth ) >= position.getMax ) {
_sliderControlRight.classList.remove( 'slider__control_show' );
}
_positionLeftItem++;
_transform -= _step;
}
if ( direction === 'left' ) {
if ( _positionLeftItem <= position.getMin ) {
return;
}
if ( !_sliderControlRight.classList.contains( 'slider__control_show' ) ) {
_sliderControlRight.classList.add( 'slider__control_show' );
}
if ( _sliderControlLeft.classList.contains( 'slider__control_show' ) && _positionLeftItem - 1 <=
position.getMin ) {
_sliderControlLeft.classList.remove( 'slider__control_show' );
}
_positionLeftItem--;
_transform += _step;
}
_sliderWrapper.style.transform = 'translateX(' + _transform + '%)';
}
// обработчик события click для кнопок "назад" и "вперед"
var _controlClick = function ( e ) {
if ( e.target.classList.contains( 'slider__control' ) ) {
e.preventDefault();
var direction = e.target.classList.contains( 'slider__control_right' ) ? 'right' : 'left';
_transformItem( direction );
}
};
var _setUpListeners = function () {
// добавление к кнопкам "назад" и "вперед" обрботчика _controlClick для событя click
_sliderControls.forEach( function ( item ) {
item.addEventListener( 'click', _controlClick );
} );
}
// инициализация
_setUpListeners();
return {
right: function () { // метод right
_transformItem( 'right' );
},
left: function () { // метод left
_transformItem( 'left' );
}
}
}
}() );
var slider = multiItemSlider( '.slider' )
</script>
</body>
</html>
Он работает по следующему принципу, смешает блоки на определенные расстоянии. И работает нормально. НО! если я начинаю менять разрешение то работа рушится, если обновлю то все нормально
Как сделать что бы при изменение разрешение все нормально было
!!! Не знаю как сделать что бы было видно сразу три картинки. По умолчанию видно три картинки, и там нет элементов управления, когда начинаю уменьшить разрешение становится две картинки, еще уменьшаю одна картинка, при этом появляются элементы управление.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.slider {
position: relative;
overflow: hidden;
width: 910px;
margin: 0 auto;
}
.slider__wrapper {
display: flex;
transition: transform 0.6s ease;
}
.slider__item {
flex: 0 0 50;
max-width: 100%;
/* margin: 0px 10px 0px 10px; */
}
.slider__control {
position: absolute;
top: 0px;
display: none;
align-items: center;
justify-content: center;
width: 40px;
color: #fff;
text-align: center;
opacity: 0.5;
transform: translateY(-50%);
background: rgba(0, 0, 0, .5);
}
.slider__control_show {
display: flex;
}
.slider__control:hover,
.slider__control:focus {
color: #fff;
text-decoration: none;
outline: 0;
opacity: .9;
}
.slider__control_left {
left: 0;
}
.slider__control_right {
right: 0;
}
.slider__control::before {
content: '';
display: inline-block;
background: transparent no-repeat center center;
background-size: 100% 100%;
}
.slider__control_left::before {
width: 40px;
height: 598px;
position: absolute;
top: 0px;
left: 0px;
cursor: pointer;
background-image: url(https://www.rakipov.ru/files/strelka_2.svg);
background-repeat: no-repeat;
background-position: top left;
opacity: .8;
z-index: 10;
}
.slider__control_right::before {
width: 40px;
height: 598px;
position: absolute;
top: 0px;
right: 0px;
cursor: pointer;
background-image: url(https://www.rakipov.ru/files/strelka_2.svg);
background-repeat: no-repeat;
background-position: top right;
opacity: .8;
transform: rotate(180deg);
z-index: 10;
}
.slider__item>div {
line-height: 598px;
}
@media (max-width:1360px){
.slider {
position: relative;
overflow: hidden;
width: 580px;
margin: 0 auto;
}
}
@media (max-width:1020px){
.slider {
position: relative;
overflow: hidden;
width: 290px;
margin: 0 auto;
}
}
</style>
</head>
<body>
<div class="slider">
<div class="slider__wrapper">
<div class="slider__item">
<img src="https://www.rakipov.ru/files/str2-1.jpg" height="598" width="290" alt="">
</div>
<div class="slider__item">
<img src="https://www.rakipov.ru/files/str2-2.jpg" height="598" width="290" alt="">
</div>
<div class="slider__item">
<img src="https://www.rakipov.ru/files/str2-3.jpg" height="598" width="290" alt="">
</div>
</div>
<a class="slider__control slider__control_left" href="#" role="button"></a>
<a class="slider__control slider__control_right slider__control_show" href="#" role="button"></a>
</div>
<script>
'use strict';
var multiItemSlider = ( function () {
return function ( selector, config ) {
var
_mainElement = document.querySelector( selector ), // основный элемент блока
_sliderWrapper = _mainElement.querySelector( '.slider__wrapper' ), // обертка для .slider-item
_sliderItems = _mainElement.querySelectorAll( '.slider__item' ), // элементы (.slider-item)
_sliderControls = _mainElement.querySelectorAll( '.slider__control' ), // элементы управления
_sliderControlLeft = _mainElement.querySelector( '.slider__control_left' ), // кнопка "LEFT"
_sliderControlRight = _mainElement.querySelector( '.slider__control_right' ), // кнопка "RIGHT"
_wrapperWidth = parseFloat( getComputedStyle( _sliderWrapper ).width ), // ширина обёртки
_itemWidth = parseFloat( getComputedStyle( _sliderItems[ 0 ] ).width ), // ширина одного элемента
_positionLeftItem = 0, // позиция левого активного элемента
_transform = 0, // значение транфсофрмации .slider_wrapper
_step = _itemWidth / _wrapperWidth * 100, // величина шага (для трансформации)
_items = []; // массив элементов
// наполнение массива _items
_sliderItems.forEach( function ( item, index ) {
_items.push( {
item: item,
position: index,
transform: 0
} );
} );
var position = {
getMin: 0,
getMax: _items.length - 1,
}
var _transformItem = function ( direction ) {
if ( direction === 'right' ) {
if ( ( _positionLeftItem + _wrapperWidth / _itemWidth - 1 ) >= position.getMax ) {
return;
}
if ( !_sliderControlLeft.classList.contains( 'slider__control_show' ) ) {
_sliderControlLeft.classList.add( 'slider__control_show' );
}
if ( _sliderControlRight.classList.contains( 'slider__control_show' ) && ( _positionLeftItem +
_wrapperWidth / _itemWidth ) >= position.getMax ) {
_sliderControlRight.classList.remove( 'slider__control_show' );
}
_positionLeftItem++;
_transform -= _step;
}
if ( direction === 'left' ) {
if ( _positionLeftItem <= position.getMin ) {
return;
}
if ( !_sliderControlRight.classList.contains( 'slider__control_show' ) ) {
_sliderControlRight.classList.add( 'slider__control_show' );
}
if ( _sliderControlLeft.classList.contains( 'slider__control_show' ) && _positionLeftItem - 1 <=
position.getMin ) {
_sliderControlLeft.classList.remove( 'slider__control_show' );
}
_positionLeftItem--;
_transform += _step;
}
_sliderWrapper.style.transform = 'translateX(' + _transform + '%)';
}
// обработчик события click для кнопок "назад" и "вперед"
var _controlClick = function ( e ) {
if ( e.target.classList.contains( 'slider__control' ) ) {
e.preventDefault();
var direction = e.target.classList.contains( 'slider__control_right' ) ? 'right' : 'left';
_transformItem( direction );
}
};
var _setUpListeners = function () {
// добавление к кнопкам "назад" и "вперед" обрботчика _controlClick для событя click
_sliderControls.forEach( function ( item ) {
item.addEventListener( 'click', _controlClick );
} );
}
// инициализация
_setUpListeners();
return {
right: function () { // метод right
_transformItem( 'right' );
},
left: function () { // метод left
_transformItem( 'left' );
}
}
}
}() );
var slider = multiItemSlider( '.slider' )
</script>
</body>
</html>