Прокрутка карусели по элементам
У меня на сайте есть карусель. Когда я нажимаю кнопку со стрелкой вправо или влево, происходит прокрутка до последнего или первого элемента карусели. Как я могу прокручивать элемент за элементом, нажимая кнопки со стрелкой вправо или влево?
Я использую этот код:
// scroll to left
$(rightPaddle).on('click', function() {
$('.menu').animate({scrollLeft: '+=1000'}, 600);
});
// scroll to right
$(leftPaddle).on('click', function() {
$('.menu').animate({scrollLeft: '0'}, 600);
});
Вот рабочий пример:
// duration of scroll animation
var scrollDuration = 300;
// paddles
var leftPaddle = document.getElementsByClassName('left-paddle');
var rightPaddle = document.getElementsByClassName('right-paddle');
// get items dimensions
var itemsLength = $('.container-menu').length;
var itemSize = $('.container-menu').outerWidth(true);
// get some relevant size for the paddle triggering point
var paddleMargin = 20;
// get wrapper width
var getMenuWrapperSize = function() {
return $('.menu-wrapper').outerWidth();
}
var menuWrapperSize = getMenuWrapperSize();
// the wrapper is responsive
$(window).on('resize', function() {
menuWrapperSize = getMenuWrapperSize();
});
// size of the visible part of the menu is equal as the wrapper size
var menuVisibleSize = menuWrapperSize;
// get total width of all menu items
var getMenuSize = function() {
return itemsLength * itemSize;
};
var menuSize = getMenuSize();
// get how much of menu is invisible
var menuInvisibleSize = menuSize - menuWrapperSize;
// get how much have we scrolled to the left
var getMenuPosition = function() {
return $('.menu').scrollLeft();
};
// finally, what happens when we are actually scrolling the menu
$('.menu').on('scroll', function() {
// get how much of menu is invisible
menuInvisibleSize = menuSize - menuWrapperSize;
// get how much have we scrolled so far
var menuPosition = getMenuPosition();
var menuEndOffset = menuInvisibleSize - paddleMargin;
// show & hide the paddles
// depending on scroll position
if (menuPosition <= paddleMargin) {
$(leftPaddle).addClass('hidden');
$(rightPaddle).removeClass('hidden');
} else if (menuPosition < menuEndOffset) {
// show both paddles in the middle
$(leftPaddle).removeClass('hidden');
$(rightPaddle).addClass('hidden');
} else if (menuPosition >= menuEndOffset) {
$(leftPaddle).removeClass('hidden');
$(rightPaddle).addClass('hidden');
}
});
// scroll to left
$(rightPaddle).on('click', function() {
$('.menu').animate({
scrollLeft: '+=1000'
}, 600);
});
// scroll to right
$(leftPaddle).on('click', function() {
$('.menu').animate({
scrollLeft: '0'
}, 600);
});body {
margin: 100px
}
.menu-wrapper {
position: relative;
max-width: 1119px;
height: 100%;
margin: 0;
}
.menu {
box-sizing: border-box;
white-space: nowrap;
overflow: hidden;
margin: 0;
padding: 0;
}
.paddle {
position: absolute;
top: 0;
bottom: 0;
cursor: pointer;
z-index: 999;
width: 50px;
height: 50px;
border-radius: 50%;
border: 0;
background: white;
box-shadow: 1px 1px 6px #d0d0d0;
}
.left-paddle {
left: -24px;
top: 92px;
z-index: 9999;
position: absolute;
color: #e21b22;
font-size: 20px;
text-align: center;
}
.right-paddle {
right: -24px;
top: 92px;
z-index: 9999;
position: absolute;
color: #e21b22;
font-size: 20px;
text-align: center;
}
.paddles .fas {
margin: 0;
}
.hidden {
display: none;
}
.container-menu {
display: inline-block;
width: 209px;
margin-right: 11.7px;
box-shadow: 0 0 10px #d4d4d4;
border: 1px solid #E6E6E6;
overflow: hidden;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
background: #FFF;
}
.menu-body {
float: left;
text-align: left;
}
.item-image {
float: left;
}
.item-image img {
width: 100%;
float: left;
}
.item-info {
float: left;
padding: 10px 22px 15px;
color: #737373;
font-weight: 500;
}
.item-name h1 {
margin: 0;
padding: 0 0 6px;
font-size: 15px;
-webkit-line-clamp: 2;
-moz-line-clamp: 2;
-ms-line-clamp: 2;
display: -webkit-box!important;
-o-line-clamp: 2;
-moz-box-orient: vertical;
-ms-box-orient: vertical;
-o-box-orient: vertical;
box-orient: vertical;
line-clamp: 2;
white-space: normal;
height: 40px;
min-height: 40px;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
line-height: 23px;
font-weight: 500;
}
.item-description {
margin: 8px 0;
border-top: 1px solid #E6E6E6;
font-weight: normal;
}
#ml-1 p {
color: #717070;
text-shadow: none;
}
.item-checkout {
margin-bottom: 15px;
font-size: 13px;
font-family: Roboto;
font-weight: 400;
}
.item-checkout i {
color: #f4c150;
font-size: 15px;
}<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/fontawesome-iconpicker/3.2.0/js/fontawesome-iconpicker.min.js"></script>
<div class='programacao-category'>
<h3><i class='fas fa-laptop-code' /> Programação</h3>
<div class='menu-wrapper'>
<ul class='menu'>
<li class='container-menu'>
<div class='menu-body'>
<div class='item-image'>
<img src='https://udemy-images.udemy.com/course/240x135/849470_788a_2.jpg' />
</div>
<div class='item-info'>
<div class='item-name'>
<h1>Curso de Língua Inglêsa: AgoraEuFalo - English Club</h1>
</div>
<div class='item-description'>
<p>por AmoCursos</p>
</div>
<div class='item-checkout'>
<i class='fas fa-star' /><i class='fas fa-star' /><i class='fas fa-star' /><i class='fas fa-star' /><i class='fas fa-star' />5,0 (479)
</div>
<div class='item-price'>R$ 235,90</div>
</div>
</div>
</li>
<li class='container-menu'>
<div class='menu-block'>
<div class='menu-body'>
<div class='item-image'>
<img src='https://udemy-images.udemy.com/course/240x135/1383810_0c42.jpg' />
</div>
<div class='item-info'>
<div class='item-name'>
<h1>Curso de Língua Espanhola: Espanhol do Juan</h1>
</div>
<div class='item-description'>
<p>por AmoCursos</p>
</div>
<div class='item-checkout'>
<i class='fas fa-star' /><i class='fas fa-star' /><i class='fas fa-star' /><i class='fas fa-star' /><i class='fas fa-star-half-alt' />4,5 (214)
</div>
<div class='item-price'>R$ 55,90</div>
</div>
</div>
</div>
</li>
<li class='container-menu'>
<div class='menu-block'>
<div class='menu-body'>
<div class='item-image'>
<img src='https://udemy-images.udemy.com/course/240x135/566284_7465_2.jpg' />
</div>
<div class='item-info'>
<div class='item-name'>
<h1>Curso de Língua Italiana: Gente Italiana</h1>
</div>
<div class='item-description'>
<p>por AmoCursos</p>
</div>
<div class='item-checkout'>
<i class='fas fa-star' /><i class='fas fa-star' /><i class='fas fa-star' /><i class='far fa-star' /><i class='far fa-star' /> 3,0 (479)
</div>
<div class='item-price'>R$ 119,50</div>
</div>
</div>
</div>
</li>
<li class='container-menu'>
<div class='menu-body'>
<div class='item-image'>
<img src='https://udemy-images.udemy.com/course/240x135/1292876_f2f6_23.jpg' />
</div>
<div class='item-info'>
<div class='item-name'>
<h1>Curso de Microsoft Excel: Do Básico ao Intermediário</h1>
</div>
<div class='item-description'>
<p>por AmoCursos</p>
</div>
<div class='item-checkout'>
<i class='fas fa-star' /><i class='fas fa-star' /><i class='fas fa-star' /><i class='fas fa-star' /><i class='fas fa-star' />5,0 (479)
</div>
<div class='item-price'>R$ 499,90</div>
</div>
</div>
</li>
<li class='container-menu'>
<div class='menu-body'>
<div class='item-image'>
<img src='https://udemy-images.udemy.com/course/240x135/1654366_a64e.jpg' />
</div>
<div class='item-info'>
<div class='item-name'>
<h1>Curso de Adobe Photoshop</h1>
</div>
<div class='item-description'>
<p>por AmoCursos</p>
</div>
<div class='item-checkout'>
<i class='fas fa-star' /><i class='fas fa-star' /><i class='fas fa-star' /><i class='fas fa-star' /><i class='fas fa-star' />5,0 (479)
</div>
<div class='item-price'>R$ 25,90</div>
</div>
</div>
</li>
<li class='container-menu'>
<div class='menu-body'>
<div class='item-image'>
<img src='https://lh6.googleusercontent.com/proxy/zYkKv6L5PN7vtHubvW8gYqJKgq-2nv72oaznwz5iKBl__JlOljFqKQvkovjy--pt3A5Ofprc_EG_XmTRweicbu9ePEecvyTSWjgA2n1htnc0F6VaGskAPOqbDtsT9vk7UPw5tC0=s0-d' />
</div>
<div class='item-info'>
<div class='item-name'>
<h1>Curso de Violão - Você Pode Tocar</h1>
</div>
<div class='item-description'>
<p>por AmoCursos</p>
</div>
<div class='item-checkout'>
<i class='fas fa-star' /><i class='fas fa-star' /><i class='fas fa-star' /><i class='fas fa-star' /><i class='fas fa-star' />5,0 (479)
</div>
<div class='item-price'>R$ 195,90</div>
</div>
</div>
</li>
<li class='container-menu'>
<div class='menu-body'>
<div class='item-image'>
<img src='https://lh3.googleusercontent.com/proxy/WBaYqULb8NJoyKd30phU3dHnC1o6iJ5eNe7T98u1PPxBE616yhfbHy6aR1Ao6cI2UphnprtvrujpSGFdAfmBUvM4K1h-E-9y-3DlKGjnmIweFM1SJmJD4MAIEALmUe3CT58NiUvTmA=s0-d' />
</div>
<div class='item-info'>
<div class='item-name'>
<h1>Curso de Desenho Realista com Alexandre Porto</h1>
</div>
<div class='item-description'>
<p>por AmoCursos</p>
</div>
<div class='item-checkout'>
<i class='fas fa-star' /><i class='fas fa-star' /><i class='fas fa-star' /><i class='fas fa-star' /><i class='fas fa-star' />5,0 (479)
</div>
<div class='item-price'>R$ 510,50</div>
</div>
</div>
</li>
</ul>
<div class='paddles'>
<button class='left-paddle paddle hidden'><i class='fas fa-chevron-left'/></button>
<button class='right-paddle paddle'><i class='fas fa-chevron-right'/></button>
</div>
</div>
</div>
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
0
412
1
Перейти к ответу
Данный вопрос помечен как решенный
Ответы 1
Ответ принят как подходящий
Я рекомендую использовать определенную переменную itemSize как меру перемещения ползунка. Поскольку itemSize - это ширина одного элемента, ползунок будет прокручиваться на эту величину.
scrollLeft: '+=' + itemSize
scrollLeft: '-=' + itemSize
Также я обновил логику, которая показывает / скрывает стрелки. В вашем коде, даже если menuPosition < menuEndOffset, стрелка «далее» все еще скрыта. Я изменил это.
... else if (menuPosition < menuEndOffset) {
// show both paddles in the middle
$(leftPaddle).removeClass('hidden');
$(rightPaddle).removeClass('hidden');
} ...
Вот рабочий пример:
// duration of scroll animation
var scrollDuration = 300;
// paddles
var leftPaddle = document.getElementsByClassName('left-paddle');
var rightPaddle = document.getElementsByClassName('right-paddle');
// get items dimensions
var itemsLength = $('.container-menu').length;
var itemSize = $('.container-menu').outerWidth(true);
// get some relevant size for the paddle triggering point
var paddleMargin = 20;
// get wrapper width
var getMenuWrapperSize = function() {
return $('.menu-wrapper').outerWidth();
}
var menuWrapperSize = getMenuWrapperSize();
// the wrapper is responsive
$(window).on('resize', function() {
menuWrapperSize = getMenuWrapperSize();
});
// size of the visible part of the menu is equal as the wrapper size
var menuVisibleSize = menuWrapperSize;
// get total width of all menu items
var getMenuSize = function() {
return itemsLength * itemSize;
};
var menuSize = getMenuSize();
// get how much of menu is invisible
var menuInvisibleSize = menuSize - menuWrapperSize;
// get how much have we scrolled to the left
var getMenuPosition = function() {
return $('.menu').scrollLeft();
};
// finally, what happens when we are actually scrolling the menu
$('.menu').on('scroll', function() {
// get how much of menu is invisible
menuInvisibleSize = menuSize - menuWrapperSize;
// get how much have we scrolled so far
var menuPosition = getMenuPosition();
var menuEndOffset = menuInvisibleSize - paddleMargin;
// show & hide the paddles
// depending on scroll position
if (menuPosition <= paddleMargin) {
$(leftPaddle).addClass('hidden');
$(rightPaddle).removeClass('hidden');
} else if (menuPosition < menuEndOffset) {
// show both paddles in the middle
$(leftPaddle).removeClass('hidden');
$(rightPaddle).removeClass('hidden');
} else if (menuPosition >= menuEndOffset) {
$(leftPaddle).removeClass('hidden');
$(rightPaddle).addClass('hidden');
}
});
// scroll to left
$(rightPaddle).on('click', function() {
$('.menu').animate({
scrollLeft: '+=' + itemSize
}, 600);
});
// scroll to right
$(leftPaddle).on('click', function() {
$('.menu').animate({
scrollLeft: '-=' + itemSize
}, 600);
});body {
margin:0;
}
.menu-wrapper {
position: relative;
max-width: 1119px;
height: 100%;
margin: 0;
}
.menu {
box-sizing: border-box;
white-space: nowrap;
overflow: hidden;
margin: 0;
padding: 0;
}
.paddle {
position: absolute;
top: 0;
bottom: 0;
cursor: pointer;
z-index: 999;
width: 50px;
height: 50px;
border-radius: 50%;
border: 0;
background: white;
box-shadow: 1px 1px 6px #d0d0d0;
}
.left-paddle {
left: -24px;
top: 92px;
z-index: 9999;
position: absolute;
color: #e21b22;
font-size: 20px;
text-align: center;
}
.right-paddle {
right: -24px;
top: 92px;
z-index: 9999;
position: absolute;
color: #e21b22;
font-size: 20px;
text-align: center;
}
.paddles .fas {
margin: 0;
}
.hidden {
display: none;
}
.container-menu {
display: inline-block;
width: 209px;
margin-right: 11.7px;
box-shadow: 0 0 10px #d4d4d4;
border: 1px solid #E6E6E6;
overflow: hidden;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
background: #FFF;
}
.menu-body {
float: left;
text-align: left;
}
.item-image {
float: left;
}
.item-image img {
width: 100%;
float: left;
}
.item-info {
float: left;
padding: 10px 22px 15px;
color: #737373;
font-weight: 500;
}
.item-name h1 {
margin: 0;
padding: 0 0 6px;
font-size: 15px;
-webkit-line-clamp: 2;
-moz-line-clamp: 2;
-ms-line-clamp: 2;
display: -webkit-box!important;
-o-line-clamp: 2;
-moz-box-orient: vertical;
-ms-box-orient: vertical;
-o-box-orient: vertical;
box-orient: vertical;
line-clamp: 2;
white-space: normal;
height: 40px;
min-height: 40px;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
line-height: 23px;
font-weight: 500;
}
.item-description {
margin: 8px 0;
border-top: 1px solid #E6E6E6;
font-weight: normal;
}
#ml-1 p {
color: #717070;
text-shadow: none;
}
.item-checkout {
margin-bottom: 15px;
font-size: 13px;
font-family: Roboto;
font-weight: 400;
}
.item-checkout i {
color: #f4c150;
font-size: 15px;
}<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/fontawesome-iconpicker/3.2.0/js/fontawesome-iconpicker.min.js"></script>
<div class='programacao-category'>
<h3><i class='fas fa-laptop-code' /> Programação</h3>
<div class='menu-wrapper'>
<ul class='menu'>
<li class='container-menu'>
<div class='menu-body'>
<div class='item-image'>
<img src='https://udemy-images.udemy.com/course/240x135/849470_788a_2.jpg' />
</div>
<div class='item-info'>
<div class='item-name'>
<h1>Curso de Língua Inglêsa: AgoraEuFalo - English Club</h1>
</div>
<div class='item-description'>
<p>por AmoCursos</p>
</div>
<div class='item-checkout'>
<i class='fas fa-star' /><i class='fas fa-star' /><i class='fas fa-star' /><i class='fas fa-star' /><i class='fas fa-star' />5,0 (479)
</div>
<div class='item-price'>R$ 235,90</div>
</div>
</div>
</li>
<li class='container-menu'>
<div class='menu-block'>
<div class='menu-body'>
<div class='item-image'>
<img src='https://udemy-images.udemy.com/course/240x135/1383810_0c42.jpg' />
</div>
<div class='item-info'>
<div class='item-name'>
<h1>Curso de Língua Espanhola: Espanhol do Juan</h1>
</div>
<div class='item-description'>
<p>por AmoCursos</p>
</div>
<div class='item-checkout'>
<i class='fas fa-star' /><i class='fas fa-star' /><i class='fas fa-star' /><i class='fas fa-star' /><i class='fas fa-star-half-alt' />4,5 (214)
</div>
<div class='item-price'>R$ 55,90</div>
</div>
</div>
</div>
</li>
<li class='container-menu'>
<div class='menu-block'>
<div class='menu-body'>
<div class='item-image'>
<img src='https://udemy-images.udemy.com/course/240x135/566284_7465_2.jpg' />
</div>
<div class='item-info'>
<div class='item-name'>
<h1>Curso de Língua Italiana: Gente Italiana</h1>
</div>
<div class='item-description'>
<p>por AmoCursos</p>
</div>
<div class='item-checkout'>
<i class='fas fa-star' /><i class='fas fa-star' /><i class='fas fa-star' /><i class='far fa-star' /><i class='far fa-star' /> 3,0 (479)
</div>
<div class='item-price'>R$ 119,50</div>
</div>
</div>
</div>
</li>
<li class='container-menu'>
<div class='menu-body'>
<div class='item-image'>
<img src='https://udemy-images.udemy.com/course/240x135/1292876_f2f6_23.jpg' />
</div>
<div class='item-info'>
<div class='item-name'>
<h1>Curso de Microsoft Excel: Do Básico ao Intermediário</h1>
</div>
<div class='item-description'>
<p>por AmoCursos</p>
</div>
<div class='item-checkout'>
<i class='fas fa-star' /><i class='fas fa-star' /><i class='fas fa-star' /><i class='fas fa-star' /><i class='fas fa-star' />5,0 (479)
</div>
<div class='item-price'>R$ 499,90</div>
</div>
</div>
</li>
<li class='container-menu'>
<div class='menu-body'>
<div class='item-image'>
<img src='https://udemy-images.udemy.com/course/240x135/1654366_a64e.jpg' />
</div>
<div class='item-info'>
<div class='item-name'>
<h1>Curso de Adobe Photoshop</h1>
</div>
<div class='item-description'>
<p>por AmoCursos</p>
</div>
<div class='item-checkout'>
<i class='fas fa-star' /><i class='fas fa-star' /><i class='fas fa-star' /><i class='fas fa-star' /><i class='fas fa-star' />5,0 (479)
</div>
<div class='item-price'>R$ 25,90</div>
</div>
</div>
</li>
<li class='container-menu'>
<div class='menu-body'>
<div class='item-image'>
<img src='https://lh6.googleusercontent.com/proxy/zYkKv6L5PN7vtHubvW8gYqJKgq-2nv72oaznwz5iKBl__JlOljFqKQvkovjy--pt3A5Ofprc_EG_XmTRweicbu9ePEecvyTSWjgA2n1htnc0F6VaGskAPOqbDtsT9vk7UPw5tC0=s0-d' />
</div>
<div class='item-info'>
<div class='item-name'>
<h1>Curso de Violão - Você Pode Tocar</h1>
</div>
<div class='item-description'>
<p>por AmoCursos</p>
</div>
<div class='item-checkout'>
<i class='fas fa-star' /><i class='fas fa-star' /><i class='fas fa-star' /><i class='fas fa-star' /><i class='fas fa-star' />5,0 (479)
</div>
<div class='item-price'>R$ 195,90</div>
</div>
</div>
</li>
<li class='container-menu'>
<div class='menu-body'>
<div class='item-image'>
<img src='https://lh3.googleusercontent.com/proxy/WBaYqULb8NJoyKd30phU3dHnC1o6iJ5eNe7T98u1PPxBE616yhfbHy6aR1Ao6cI2UphnprtvrujpSGFdAfmBUvM4K1h-E-9y-3DlKGjnmIweFM1SJmJD4MAIEALmUe3CT58NiUvTmA=s0-d' />
</div>
<div class='item-info'>
<div class='item-name'>
<h1>Curso de Desenho Realista com Alexandre Porto</h1>
</div>
<div class='item-description'>
<p>por AmoCursos</p>
</div>
<div class='item-checkout'>
<i class='fas fa-star' /><i class='fas fa-star' /><i class='fas fa-star' /><i class='fas fa-star' /><i class='fas fa-star' />5,0 (479)
</div>
<div class='item-price'>R$ 510,50</div>
</div>
</div>
</li>
</ul>
<div class='paddles'>
<button class='left-paddle paddle hidden'><i class='fas fa-chevron-left'/></button>
<button class='right-paddle paddle'><i class='fas fa-chevron-right'/></button>
</div>
</div>
</div>Другие вопросы по теме
Ошибка при отправке массива в массиве с использованием AJAX
Скрыть / показать div, если отмечен (с удалением)
Как получить события мыши на всех слоях?
Код работает во время отладки, но без него - Javascript / Jquery
JQuery, как отформатировать JSON запрос с авторизацией?
Нажатие на элемент запускает все тот же класс вместо того, на котором щелкнули
Может ли отключенный элемент формы разделять столбец с активным элементом формы?
Получение звукового тега и его src с помощью Jq, а затем воспроизведение его, щелкнув btn
Передать переменную для ссылки в представлении загрузки в div
Jquery различное затухание для разного наведения
Похожие вопросы
Как я могу предварительно инициализировать состояние с помощью хуков в React?
Можно ли создать узлы d3 с несколькими граничными портами?
Массив объектов - вычислить средние значения свойств?
NodeJS завершает запись файла с конвейером, прежде чем продолжить следующую итерацию
Добавление onclick () в ссылку в drupal 7
Javascript для каждой путаницы в функциях
Скрыть / показать div, если отмечен (с удалением)
Как получить события мыши на всех слоях?
Линейный график Highcharts - не отображать линию
Как выбрать сегодняшнюю дату и время (+ 15 минут) из выбора даты в селене
Отлично, сработало хорошо! Просто сомневаюсь: свойство itemSize не учитывает границы слева и справа от общего размера элемента?