Простая карусель на jQuery. Простая карусель на jQuery D галерея — карусель

В настоящее время слайдер – карусель – функционал, который просто необходимо иметь на сайте для бизнеса, сайте — портфолио или любом другом ресурсе. Наряду с полноэкранными слайдерами изображения, горизонтальные слайдеры – карусели хорошо вписываются в любой веб-дизайн.

Иногда слайдер должен занимать одну треть страницы сайта. Здесь слайдер — карусель используется с эффектами переходов и с адаптивными макетами. Сайты электронной коммерции используют слайдер – карусель для демонстрации множества фото в отдельных публикациях или страницах. Код слайдера можно свободно использовать и изменять его в соответствии с потребностями.

Используя JQuery совместно с HTML5 и CSS3 , можно сделать ваши страницы более интересными, снабдив их уникальными эффектами, и обратить внимание посетителей на конкретную область сайта.

Slick – плагин современного слайдера — карусели

Slick – свободно распространяемый jquery – плагин, разработчики которого утверждают, что их решение удовлетворит все ваши требования к слайдеру. Адаптивный слайдер – карусель может работать в режиме «плитки » для мобильных устройств, и, в режиме «перетаскивания » для десктопной версии.

Содержит эффект перехода «затухание », интересную возможность «режим в центре », ленивую загрузку изображений с автопрокруткой. Обновленный функционал включает в себя добавление слайдов и фильтр слайдов. Все для того, чтобы вы настроили плагин в соответствии с вашими требованиями.

Демо-режим | Скачать

Owl Carousel 2.0 – jQuery — плагин с возможностью использования на сенсорных устройствах

В арсенале этого плагина – большой набор функций, подходящий как для новичков, так и для опытных разработчиков. Это обновленная версия слайдера — карусели. Его предшественник именовался точно также.

Слайдер имеет в своем составе некоторые встроенные плагины для улучшения общего функционала. Анимация, проигрывание видео, автозапуск слайдера, ленивая загрузка, автоматическая корректировка высоты – основные возможности Owl Carousel 2.0 .

Поддержка возможности drag and drop включена для более удобного использования плагина на мобильных устройствах.
Плагин отлично подойдет для отображения больших изображений даже на маленьких экранах мобильных устройств.

Примеры | Скачать

jQuery плагин Silver Track

Довольно маленький, но богатый по функционалу jquery плагин, который позволяет разместить на странице слайдер – карусель, обладающий небольшим ядром и не потребляющий множества ресурсов сайта. Плагин может быть использован для отображения вертикальных и горизонтальных слайдеров, с анимацией и созданием наборов изображений из галереи.

Примеры | Скачать

AnoSlide – Ультра компактный адаптивный jQuery слайдер

Ультра компактный jQuery слайдер – карусель, функционал которого намного больше, чем у обычного слайдера. Он включают в себя предварительный просмотр одного изображения, отображение нескольких изображений в виде карусели и слайдера на основе заголовков.

Примеры | Скачать

Owl Carousel – Jquery слайдер — карусель

Owl carousel – слайдер с поддержкой сенсорных экранов и технологии drag and drop , легко встраиваемый в HTML — код. Плагин является одним из лучших слайдеров, которые позволяют создавать красивые карусели без какой — либо специально подготовленной разметки.

Примеры | Скачать

3D галерея — карусель

Использует 3D – переходы, основанные на CSS – стилях и немного Javascript кода.

Примеры | Скачать

3D карусель с использованием TweenMax.js и jQuery

Великолепная 3D карусель. Похоже, что это еще бета – версия, потому как я обнаружил пару проблем с ней буквально сейчас. Если вы заинтересованы в тестировании и создании ваших собственных слайдеров – эта карусель будет большим подспорьем.

Примеры | Скачать

Карусель с использованием bootstrap

Адаптивный слайдер – карусель с использованием технологии bootstrap как раз для вашего нового веб-сайта.

Примеры | Скачать

Основанный на Bootstrap – фреймворке слайдер — карусель Moving Box

Наиболее востребованный на портфолио и бизнес сайтах. Подобный тип слайдера — карусели часто встречается на сайтах любого типа.

Примеры | Скачать

Tiny Circleslider

Это слайдер крошечного размера готов работать на устройствах с любым разрешением экрана. Слайдер может работать как в круговом, так и карусельном режиме. Tiny circle представлен как альтернатива другим слайдерам подобного типа. Имеется встроенная поддержка операционных систем IOS и Android .

В круговом режиме слайдер выглядит довольно интересно. Отлично реализована поддержка метода drag and drop и система автоматической прокрутки слайдов.

Примеры | Скачать

Слайдер контента Thumbelina

Мощный, адаптивный, слайдер карусельного типа отлично подойдет к современному сайту. Корректно работает на любых устройствах. Имеет горизонтальный и вертикальный режимы. Его размер минимизирован всего до 1 КБ. Ультра компактный плагин ко всему прочему имеет отличные плавные переходы.

Примеры | Скачать

Wow – слайдер — карусель

Содержит более 50 эффектов, что может помочь вам в создании оригинального слайдера для вашего сайта.

Примеры | Скачать

Адаптивный jQuery слайдер контента bxSlider

Измените размер окна браузера, чтобы увидеть, как адаптируется слайдер. Bxslider поставляется более чем с 50 вариантами настроек и демонстрирует свои функции с различными эффектами переходов.

Примеры | Скачать

jCarousel

jCarousel — jQuery плагин, который поможет организовать просмотр ваших изображений. Вы сможете с легкостью создавать пользовательские карусели изображений из основы который показан в примере. Слайдер адаптивный и оптимизирован для работы на мобильных платформах.

Примеры | Скачать

Scrollbox — jQuery плагин

Scrollbox компактный плагин для создания слайдера – карусели или текстовой бегущей строки. Основные функции включают в себя эффект вертикальной и горизонтальной прокрутки с паузой при наведении курсора мыши.

Примеры | Скачать

dbpasCarousel

Простой слайдер – карусель. Если вам нужен быстрый плагин – этот подойдет на 100%. Поставляется только с основными функциями, необходимыми для работы слайдера.

Примеры | Скачать

Flexisel: адаптивный JQuery плагин слайдера — карусели

Создатели Flexisel вдохновились плагином старой школы jCarousel , сделав его копию, ориентированную на корректную работу слайдера на мобильных и планшетных устройствах.

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

Примеры | Скачать

Elastislide – адаптивный слайдер — карусель

Elastislide отлично адаптируется под размер экрана устройства. Вы можете задать минимальное количество отображаемых изображений при определенном разрешении. Хорошо работает в качестве слайдера – карусели с галерей изображений, используя фиксированную обертку совместно с эффектом вертикальной прокрутки.

Пример | Скачать

FlexSlider 2

Свободно распространяемый слайдер от Woothemes . По праву считается одним из лучших адаптивных слайдеров. Плагин содержит несколько шаблонов и будет полезен как начинающим пользователям, так и экспертам.

Пример | Скачать

Amazing Carousel

Amazing Carousel – адаптивный слайдер изображений на jQuery . Поддерживает множество систем управления сайтами, такие как WordPress , Drupal и Joomla . Также поддерживает Android и IOS и настольные варианты операционных систем без каких-либо проблем с совместимостью. Встроенные шаблоны amazing carousel позволяют использовать слайдер в вертикальном, горизонтальном и круговом режимах.

Примеры | Скачать

Owl Carousel - jQuery плагин с поддержкой touch, позволяющий создать отзывчивый (адаптивный) слайдер (карусель).
Это очень удобны, простой и адаптивный плагин для создания слайдеров, каруселей и т.д
В этой статье я постараюсь объяснить и показать вам как он работает.

Установка плагина Owl Carousel
Для начала нам нужно скачать архив с плагином

Ниже я покажу пример установки плагина в шаблон DataLife Engine.

После того как мы скачали архив, открываем его и распределяем файлы следующим образом:
Файл owl.carousel.css и owl.transitions.css помещаем в папку style ну или css.
Файл owl.carousel.js помещаем в папку js

Теперь нам необходимо эти файлы подключить для того чтобы они работали в нашем шаблоне.
Открываем файл main.tpl aперед строкой вписываем следующие строки:
Папку css меняем на ту в которой у вас находятся css стили!
Затем в самом низу перед строкой вписываем такую строку:
Ну вот и всё! С установкой мы закончили.

Теперь нам необходимо вставить и настроить сам слайдер.
Я покажу на примере topnews т.е выведу популярные новости через нашу owl карусель.

На странице с документацией описаны все параметры, демо, и способы использования нашего плагина Owl Carousel.
Переходим по ссылке и выбираем любой понравившийся слайдер.
Для наших topnews я выбрал самый первый с названием Images. Во вкладке jаvascript копируем эти строки:
$(document).ready(function() { $("#owl-demo").owlCarousel({ autoPlay: 3000, items: 4, itemsDesktop: , itemsDesktopSmall: }); }); и вставляем их в файле main.tpl перед строкой

Затем во вкладке CSS копируем строки:
#owl-demo .item{ margin: 3px; } #owl-demo .item img{ display: block; width: 100%; height: auto; } и подключаем их в любой css файл либо в файл main.tpl перед строкой но после строки !
Теперь мы разберем наш HTML код и подключим к topnews. В файле main.tpl в нужное место вставляем тег {topnews} который в свою очередь выводит список популярных новостей, внешний вид которых можно настроить в файле topenews.tpl, об этом чуть ниже.
Наш код с тегом должен выглядеть вот так:
{topnews} Ну и теперь нам осталось настроить сами новости.
Открываем файл t opnews.tpl и в самое начало вписываем:
в самом конце закрываем атрибут

Если вы пользуетесь одним из моих шаблонов с Bootstrap то как вариант можно использовать следующие строки в файле topnews.tpl:
{title limit="55"}

{text limit="100"}

Читать Новости будут выводится в таком виде

Этот плагин можно использовать практически в любом месте, так же и с использованием тега {custom category}
Им же можно заменить и стандартную галерею DLE, об этом я опубликую отдельную статью. Пользуйтесь на здоровье;)

С уважением admin. download Внимание: Достигнут лимит на скачивание. Приходите завтра =)

Одним из эффективных способов привлечения внимания пользователей на странице сайта это создание движущейся анимации. Элементы анимации помогают более наглядно рассказать и показать пользователям о вашем продукте. Последнее время большую популярность получили выезжающие панели, а также ряд других эффектов, которые появляются при прокрутке или нажатии на картинку. Они также известны как слайдеры, карусели и выезжающие панели. В данной статье речь пойдет о создании адаптивного слайдера карусельного типа, с плавным эффектом автопрокрутки.

На сегодняшний день в сети представлено сотни обзоров с ссылками на готовые решения, однако большинство из них содержат множество неиспользуемых функций, которые значительно понижают работоспособность слайдера, также как и замедляют загрузку сайта в целом. Профессиональные веб-разработчики всегда стремились создавать гибкие в настройке программные продукты, с низким порогом вхождения дополнительных библиотек и плагинов. Именно поэтому в работе нашего скрипта задействованы минимальные требования для организации такого слайдера. Функционал работы позволяет задавать интервал переключения, скорость, а также выбор определнного слайда. Ниже приведен ряд перменных, регулирующих работу самого слайдера.

timeList - скорость переключения слайда

TimeView - время показа

RadioBut - кнопки под слайдом, для быстрой навигации. По умолчанию значение true, если использовать false, то кнопки пропадут.

А теперь давайте приступим! Создадим и откроем файл index.htm

В представленном коде как мы видим ничего сложного нет, slider-wrap определяет общее положение и выравнивает слайдер по середине экрана. Параметр active-slide задает размер и высоту картинки согласно ее длине. И slider показывает только активную картинку.

Теперь создадим и откроем файл style.css и пропишем туда нужную нам разметку:

@import url("https://fonts.googleapis.com/css?family=Open+Sans|Roboto"); body { color: #4f4f5a; font-family: "Roboto", sans-serif; font-size: 16px; padding: 0; margin: 0; } #slider-wrap{ max-width:800px; margin: 0 auto; margin-top: 80px; } #active-slide { width: 100%; display: table; position: relative; overflow: hidden; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; } #slider{ position: relative; width: calc(100% * 4); top: 0; left: 0; margin: 0; padding: 0; -webkit-transition: 1s; -o-transition: 1s; transition: 1s; -webkit-transition-timing-function: ease-in-out; -o-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; } .slide{ width: calc(100%/4); list-style: none; display: inline; float: left; } .slide img { width:100%; } .Radio-But{ margin-top:10px; text-align:center; } .Radio-But .ctrl-select { margin:2px; display:inline-block; width:16px; height:16px; overflow:hidden; text-indent:-9999px; background:url(radioBg.png) center bottom no-repeat; } .Radio-But .ctrl-select:hover { cursor:pointer; background-position:center center; } .Radio-But .ctrl-select.active { background-position:center top; } #prewbutton, #nextbutton { display:block; width:40px; height:100%; position:absolute; top:0; overflow:hidden; text-indent:-999px; background: url("arrowBg.png") left center no-repeat; opacity:0.5; z-index:3; outline:none !important; } #prewbutton { left:10px; } #nextbutton { right:10px; background:url(arrowBg.png) right center no-repeat; } #prewbutton:hover, #nextbutton:hover { opacity:1; }

В свойстве стиля slider-wrap пропишите width – максимальную длину ваших картинок.

В свойстве стиля #slider { width: calc(100% * 4); } и .slide { width: calc(100%/4); } укажите количество картинок в вашем слайдере. В нашем примере их 4.

Если стрелки вперед/назад мешают видимости вашего слайдера их можно сделать невидимыми и появляться они будут при наведении. Для этого в параметрах prewBut и nextBut , задайте свойству opacity значение 0.

Теперь создадим и откроем наш файл slider.js , в котором и будет код слайдера. Не забудьте подключить библиотеку jQuery.

$(document).ready(function () { var timeList = 700; var TimeView = 5000; var RadioBut = true; var slideNum = 1; var slideTime; slideCount = $("#slider .slide").length; var animSlide = function(arrow){ clearTimeout(slideTime); if(arrow == "next"){ if(slideNum == slideCount) { slideNum=1; } else{slideNum++} translateWidth = -$("#active-slide").width() * (slideNum - 1); $("#slider").css({"transform": "translate(" + translateWidth + "px, 0)"}); } else if(arrow == "prew") { if(slideNum == 1) { slideNum=slideCount; } else{slideNum-=1} translateWidth = -$("#active-slide").width() * (slideNum - 1); $("#slider").css({"transform": "translate(" + translateWidth + "px, 0)"}); }else{ slideNum = arrow; translateWidth = -$("#active-slide").width() * (slideNum -1); $("#slider").css({"transform": "translate(" + translateWidth + "px, 0)"}); } $(".ctrl-select.active").removeClass("active"); $(".ctrl-select").eq(slideNum - 1).addClass("active"); } if(RadioBut){ var $linkArrow = $("") .prependTo("#active-slide"); $("#nextbutton").click(function(){ animSlide("next"); return false; }) $("#prewbutton").click(function(){ animSlide("prew"); return false; }) } var adderSpan = ""; $(".slide").each(function(index) { adderSpan += "" + index + ""; }); $("" + adderSpan +"").appendTo("#slider-wrap"); $(".ctrl-select:first").addClass("active"); $(".ctrl-select").click(function(){ var goToNum = parseFloat($(this).text()); animSlide(goToNum + 1); }); var pause = false; var rotator = function(){ if(!pause){slideTime = setTimeout(function(){animSlide("next")}, TimeView);} } $("#slider-wrap").hover(function(){clearTimeout(slideTime); pause = true;}, function(){pause = false; rotator(); }); var clicking = false; var prevX; $(".slide").mousedown(function(e){ clicking = true; prevX = e.clientX; }); $(".slide").mouseup(function() { clicking = false; }); $(document).mouseup(function(){ clicking = false; }); $(".slide").mousemove(function(e){ if(clicking == true) { if(e.clientX < prevX) { animSlide("next"); clearTimeout(slideTime); } if(e.clientX > prevX) { animSlide("prew"); clearTimeout(slideTime); } clicking = false; } }); $(".slide").hover().css("cursor", "pointer"); rotator(); });

Функция animSlide принимает три вида значений: next, prew, числовое значение. Параметр next переключает следующий слайд, prew возвращает предыдущий, а числовое значение это определенно заданный слайд, выбранный через радио кнопки под слайдом.

В представленном слайдере использовались картинки с веб-ресурса https://pixabay.com/.

Делать карусель на чистом JS , с нуля и самому? Зачем изобретать велосипед, когда есть готовые решения, slick / owl слайдеры? На это есть, как минимум две причины:

• в учебных целях
• для выполнения тестовых заданий

При трудоустройстве, даже на вакансию HTML верстальщика, вас попросят, не просто сверстать карусель, но и привести её в действие на JS , без использования сторонних библиотек.

Пример карусели Что делает JavaScript с элементами?

Меняет свойства у элементов, с помощью методов, при наступлении событий. Три кита, на которых держится JavaScript :

• свойства
• методы
• события

Пользователь сам запускает событие onclick , при клике по кнопке. Задача программиста, повесить событие клика на нужный элемент и написать инструкции (функцию) для браузера, что должно произойти, при клике.

HTML разметка для карусели

Создадим контейнер для картинок, вставим сами картинки и две кнопки – Вперед / Назад .

Назад
Вперед

CSS стили #gallery{
width: 640px;
margin: 20px auto;
text-align: center;
}

#gallery .photos img{
width: 100%;
display: none;
}

#gallery .photos img:first-child{
display: block;
}

Buttons {
margin-top: 20px;
}

Логика работы карусели

Как вообще писать JS код, когда не понимаешь логики, происходящего. При нажатии на кнопку Вперед , текущая картинка исчезает, а на её месте появляется новая. В области видимости, всегда одна картинка, а где тогда остальные? А остальные, мы спрятали, задали для всех картинок display: none , оставив только первую, задав ей display: block , через псевдокласс first-child .

Как сделать так, чтобы при каждом клике по кнопке Вперед , первая картинка исчезала, а появлялась вторая, а вместо второй, третья. Необходимо, переключать свойство display , между none / block , при клике по кнопке.

JS код Делаем выборку элементов

Получим кнопки Вперед / Назад по селектору, применив метод querySelector и положим их в переменные btn_prev / btn_next .

Let btn_prev = document.querySelector("#gallery .buttons .prev");
let btn_next = document.querySelector("#gallery .buttons .next");

Получим все картинки по селектору, через метод querySelectopAll и так же поместим, их в переменную images .

querySelectopAll – получает массив элементов, то есть все картинки.

Let images = document.querySelectorAll("#gallery .photos img");

В массиве, элементы хранятся, уже в пронумерованном виде, начиная с нуля. Поэтому, мы можем обращаться к ним по номеру. Но сначала, создадим новую переменную и поместим в неё, номер первой картинки, той, которая имеет свойство display: block .

Let i = 0; // номер текущей картинки, на экране

Обращаемся к текущей картинке и меняем ей в стилях, свойство display .

Images[i].style.display = "none"; // прячем текущую картину

Сейчас, на экране нет ни одной картинки. Каким образом, там появится следующая картинка? Нам известно, что номер следующей картинки, всегда будет больше номера предыдущей, на единицу.

I++ ; // увеличиваем переменную i на единицу

images.length – это количество картинок, которое может меняться, поэтому не нужно указывать, что у нас 3 картинки, браузер и так это знает. Мы увеличиваем счетчик i , каждый раз на единицу, до тех пор, пока не покажется последняя картинка, а затем принудительно, заставляем карусель, возвращаться снова на первую картинку. Это называется – зацикливанием.

Прописываем условие, что когда счетчик i , станет больше, чем количество, имеющихся картинок, то произойдет возврат, к текущей картинки, под номером 0.

If(i >= images.length){
i = 0; // переменная i равна 0
}

При листании картинок в обратном порядке, счетчик i , должен уменьшаться на единицу. Если значение переменной, станет меньше нуля, то в неё, надо положить номер последней картинки.

Btn_prev.onclick = function(){
images[i].style.display = "none";
i = i - 1;
if(i < 0){
i = images.length - 1;
}
images[i].style.display = "block";
}

Вычитаем из общего количества images.length , единицу и получаем картинку под номером 2. Это и будет последняя картинка, так как исчисление в программировании, начинается с нуля.

Для прохождения теста, на позицию верстальщика, необходимо уверенное понимание JS, как раз ориентирован на верстальщиков.

1. jQuery карусель «clickCarousel»

Блок с прокруткой анонсов новостей. Для прокрутки блоков используются стрелки влево/вправо. В архиве карусель в двух стилевых оформлениях: светлом и темном.

1. jQuery карусель, плагин «carouFredSel»

Аккуратная свежая карусель изображений на jQuery.

4. jQuery плагин: карусель «Elastislide» 5. Плагин «TinyCarousel»

Отличные слайдеры контента в виде карусели изображений с применением jQuery. На демонстрационной странице описано, как прикрутить эту карусель к своему сайту.

Плагин «Slider Kit», легкая карусель с различными способами прокрутки.

7. javascript карусель 8. jQuery плагин «Grid Navigation Effects»

Оригинальная навигация между миниатюрами изображений. Для просмотра эффекта справа на демонстрационной странице нажмите на кнопки «Вверх» и «Вниз». В этом jQuery решении также предусмотрен эффект при наведении курсора на миниатюру и прокрутка с помощью колеса мыши.

9. Легкая карусель 10. Карусель из блоков «Easy Paginate»

jQuery плагин «Easy Paginate». Каждый прямоугольный блок представляет собой обычный пункт списка li, при этом если пунктов больше трех, то чтобы просмотреть их все необходимо воспользоваться навигацией, подобной слайдеру (с помощью стрелок «вперед», «назад» и с помощью кнопок навигации внизу).

11. Вертикальный ротатор «Vertical Ticker»

Вертикальный ротатор на jQuery: автоматическое прокручивание контента на странице. Предусмотрены кнопки навигации, а также возможность остановить ротацию и запустить ее снова. При наведении курсора мыши движение останавливается. На уровне HTML разметки прокручивающиеся блоки представлены обычными пунктами списка li.

12. javascript CSS прокручивающаяся область

javascript решение «TinyScroller» для создания прокручивающейся области, помещенной в контейнер DIV.

13. jQuery плагин «Smooth Div Scroll»

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

Навигация между слайдами с контентом может осуществляться с помощью стрелок или по нажатию на миниатюру. Снизу есть кнопка «Show», позволяющая скрыть/показать миниатюры или полное описание слайда.

15. Ротатор контента «Circular Content Carousel» 17. Скроллер

Блок со скроллером, появляющимся при наведении курсора. Прокручивать содержимое можно как с помощью полосы прокрутки, так и с помощью колеса мыши.

Подобное jQuery решение было сделано под впечатлением от подобного эффекта на сайте Apple . Разработчики этой корпорации всегда находили интересные решения, которыми вдохновлялись веб-мастера со всего мира. Для демонстрации плагина выберите из какую-нибудь категорию из списка.

19. Потрясающий слайдер

Слайдер генерируется автоматически. Данные с названием товара, описанием, ссылкой и адресом изображения берутся из файла slider.db.txt. Используемые технологии: CSS, PHP, jQuery.

20. Ротация блоков c использованием jQuery

Для того, чтобы просмотреть эффект ротации блоков, нажмите на один из маленьких прямоугольников на демонстрационной странице

Плагин для прокрутки контента, например, можно использовать для показа последних новостей или для показа Twitter летны на сайте.

22. Динамический блок «Отзывы клиентов»

Автоматическая ротация содержимого блока. Используемые технологии: PHP, XML, CSS, jQuery.

Этот плагин прообразовывает пункты списка (ul li) в элементы jQuery карусели.

26. javascript карусель «ImageFlow»

Изображения легко прокручивать с помощью колеса мыши.

27. Прокручивание контента

Компактный блок с анонсом последних материалов на сайте или новостей. В левой колонке отображается разбитый на страницы список из кратких анонсов последних новостей. При выборе одного из них в правой колонке отображается более подробное описание и ссылка на прочтение полного текста публикации. Реализовано с помощью jQuery.

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

33. Прокрутка содержимого, Mootools плагин «Scrollbar»

Прокручивание осуществляется как при помощи полосы прокрутки, так и с помощью колеса мыши.