Работа скрипта при изменение разрешение
У меня есть такой скрипт.
Он работает по следующему принципу, смешает блоки на определенные расстоянии. И работает нормально. НО! если я начинаю менять разрешение то работа рушится, если обновлю то все нормально Как сделать что бы при изменение разрешение все нормально было !!! Не знаю как сделать что бы было видно сразу три картинки. По умолчанию видно три картинки, и там нет элементов управления, когда начинаю уменьшить разрешение становится две картинки, еще уменьшаю одна картинка, при этом появляются элементы управление.
<!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 = []; // массив элементов
window.addEventListener('resize', function() {
_wrapperWidth = parseFloat(getComputedStyle(_sliderWrapper).width); // ширина обёртки
_itemWidth = parseFloat(getComputedStyle(_sliderItems[0]).width); // ширина одного элемента
_positionLeftItem = 1; // позиция левого активного элемента
_step = _itemWidth / _wrapperWidth * 100; // величина шага (для трансформации)
_transform = -_step; // значение транфсоформации .slider_wrapper
_transformItem('left');
});
// наполнение массива _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>
|
рони,
Спасибо я Вам как всегда очень признателен ))) |
А почему центральная картинка всегда в центре? То есть по идеи нужно идти слева направо. То есть когда две картинки, то это первые две, когда одна картинка то это самая первая. А тут всегда центральная.
|
Цитата:
_transformItem('right'); _transformItem('left'); |
Сергей Ракипов,
пост #3 изменён window.addEventListener('resize', .... |
рони,
ВЫ не представляете сколько благодарности у меня к вам за все эти годы Спасибо) |
| Часовой пояс GMT +3, время: 08:16. |