Как сделать скролл картинок в html

Прокрутка CSS

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

ожившая картинка мечеклюв тигры мишки

посмотреть код

 .scrolling < margin: 0 auto; width: 30em; height: 10em; overflow-x: scroll; overflow-y: hidden; white-space: nowrap; /* чтобы картинки стояли в одну линию, не переходя на другую строку */ word-wrap: normal; /* то же для IE */ > .scrolling img src="http://shpargalkablog.ru/2012/12/%D0%B0%D0%B4%D1%80%D0%B5%D1%81_%D0%B8%D0%B7%D0%BE" alt="Как сделать скролл картинок в html"/> src="http://shpargalkablog.ru/2012/12/%D0%B0%D0%B4%D1%80%D0%B5%D1%81_%D0%B8%D0%B7%D0%BE" alt="Как сделать скролл картинок в html"/> src="http://shpargalkablog.ru/2012/12/%D0%B0%D0%B4%D1%80%D0%B5%D1%81_%D0%B8%D0%B7%D0%BE" alt="Как сделать скролл картинок в html"/> src="http://shpargalkablog.ru/2012/12/%D0%B0%D0%B4%D1%80%D0%B5%D1%81_%D0%B8%D0%B7%D0%BE" alt="Как сделать скролл картинок в html"/> src="http://shpargalkablog.ru/2012/12/%D0%B0%D0%B4%D1%80%D0%B5%D1%81_%D0%B8%D0%B7%D0%BE" alt="Как сделать скролл картинок в html"/>

На слайдере или галереи изображений часто можно увидеть стрелочки, смещающие блок div с картинками. Когда по нажатию на кнопку одно фото прячется, его место занимает следующее, а позади появляется скрытый рисунок.

пёс ожившая картинка мечеклюв тигры мишки

посмотреть код

 .element < margin: 0 auto; width: 30em; height: 10em; overflow: hidden; white-space: nowrap; word-wrap: normal; >.element img < width: 10em; height: 10em; transition: 999999s; /* чтобы не дать элементу вернуться в исходное состояние, время обратного смещения очень велико */ > .left:active ~ .element img, .right:active ~ .element img transition: 2s linear;> .left:active ~ .element img .right:active ~ .element img  src="http://shpargalkablog.ru/2012/12/%D0%B0%D0%B4%D1%80%D0%B5%D1%81_%D0%B8%D0%B7%D0%BE" alt="Как сделать скролл картинок в html"/> src="http://shpargalkablog.ru/2012/12/%D0%B0%D0%B4%D1%80%D0%B5%D1%81_%D0%B8%D0%B7%D0%BE" alt="Как сделать скролл картинок в html"/> src="http://shpargalkablog.ru/2012/12/%D0%B0%D0%B4%D1%80%D0%B5%D1%81_%D0%B8%D0%B7%D0%BE" alt="Как сделать скролл картинок в html"/> src="http://shpargalkablog.ru/2012/12/%D0%B0%D0%B4%D1%80%D0%B5%D1%81_%D0%B8%D0%B7%D0%BE" alt="Как сделать скролл картинок в html"/> src="http://shpargalkablog.ru/2012/12/%D0%B0%D0%B4%D1%80%D0%B5%D1%81_%D0%B8%D0%B7%D0%BE" alt="Как сделать скролл картинок в html"/>

Для того, чтобы плавно прокручивалась вся фотография целиком.

пёс ожившая картинка мечеклюв тигры мишки Юрий Гагарин МКС Белка и Стрелка макет ракеты Восток Земля

посмотреть код

 [class^="scroll"] < position: relative; height: 10em; line-height: 10em; padding: 0 3em; >[class^="scroll"] input < display: none; >[class^="scroll"] div < height: 100%; overflow: hidden; white-space: nowrap; word-wrap: normal; font-size: 0; >[class^="scroll"] img < position: relative; right: 0em; width: 25%; height: 100%; transition: .5s; >[class^="scroll"] label < cursor: pointer; font-weight: 600; font-size: 3em; >[class^="scroll"] input:nth-of-type(1):checked ~ label:nth-of-type(2):after, [class^="scroll"] input:nth-of-type(2):checked ~ label:nth-of-type(3):after, [class^="scroll"] input:nth-of-type(3):checked ~ label:nth-of-type(4):after, [class^="scroll"] input:nth-of-type(4):checked ~ label:nth-of-type(5):after, [class^="scroll"] input:nth-of-type(5):checked ~ label:nth-of-type(6):after, [class^="scroll"] input:nth-of-type(6):checked ~ label:nth-of-type(7):after < content: "\3009"; position: absolute; right: 0; >[class^="scroll"] input:nth-of-type(2):checked ~ label:nth-of-type(1):after, [class^="scroll"] input:nth-of-type(3):checked ~ label:nth-of-type(2):after, [class^="scroll"] input:nth-of-type(4):checked ~ label:nth-of-type(3):after, [class^="scroll"] input:nth-of-type(5):checked ~ label:nth-of-type(4):after, [class^="scroll"] input:nth-of-type(6):checked ~ label:nth-of-type(5):after, [class^="scroll"] input:nth-of-type(7):checked ~ label:nth-of-type(6):after < content: "\3008"; position: absolute; left: 0; >[class^="scroll"] input:nth-of-type(2):checked ~ div img [class^="scroll"] input:nth-of-type(3):checked ~ div img [class^="scroll"] input:nth-of-type(4):checked ~ div img [class^="scroll"] input:nth-of-type(5):checked ~ div img [class^="scroll"] input:nth-of-type(6):checked ~ div img [class^="scroll"] input:nth-of-type(7):checked ~ div img

Красивый вертикальный скроллинг

Если нет необходимости в скролле, то тень не будет видна. Автор.

посмотреть код

Убрать сдвиг сайта при появлении полосы прокрутки
Индикаторы HTML
Индикатор прокрутки CSS
Увеличение части HTML-картинки при наведении курсора мышки
CSS слайдер для сайта
transition CSS
Что лучше display или visibility?
CSS transform
Cелекторы CSS

23 комментария:

К М Г Не работает 🙁 NMitra Где именно? В IE? Там transition да transform с 10 версии будет работать, выход которой не за горами. Можно заменить transform на margin или position: relative; — результат будет тем же. Megapotato В хроме не работает, а в опере работает. NMitra Я, честно говоря, поленилась продублировать выше названные свойства с префиксом -webkit-. Все другие браузеры их (префиксы) уже убрали (IE, Опера, Мозила), а вот браузеры на основе WebKit (Chromium, Safari) пока нет. Также это просто вопрос ближайшего времени. Я решила немного на опережение сделать, чтобы потом не править статью. К М Г У меня, да, хром, и всё мёртвое. К М Г И в опере всё мёртвое ._.

только в мазилке работает. NMitra В Опере у меня всё в порядке. Для Хрома добавила -webkit- для transition и transform. Посмотрите снова. К М Г Спасибо, теперь работает 🙂 Анонимный что-то нажимаю на «посмотреть код», но ничего не происходит NMitra В каком браузере на каком устройстве? Анонимный угу. В Maxthon4 (Webkit) на ПК. Под Firefox нормально.. спасибо, посмотрел. Анонимный Кстати вопрос на засыпку.. Реально ли учинить такую вот прокрутку варианта №3 в миниатюры вашей вот этой темы http://shpargalkablog.ru/2013/01/gallery-foto.html ? 🙂 Думаю что это было бы актуально.
Владислав Кондрашов А как сделать, что бы слайды не кончались с одной стороны, а по кругу шли? NMitra Третий вариант можно. http://shpargalkablog.ru/2013/07/slayder-dlya-sayta.html Мария Дмитриева Что нужно дописывать, чтобы добавлять больше картинок?
И можно ли сделать, чтобы картинки шли в три ряда? Мария Дмитриева забыла упомянуть, что говорю о третьем варианте (что со стрелками) NMitra Код изменила. Теперь лучше видны логические связи. Если нужно два ряда и более (id, for для id, name для одной строки должны быть индивидуальными):

Мария Дмитриева Спасибо огромное, теперь все стало намного понятнее!
Но у меня еще один вопрос — можно ли таким же образом сделать прокрутку не картинок, а div’ов с различным содержимым? NMitra Почему нет. Все img замените на figure. Мария Дмитриева Спасибо большое еще раз, отличные прокрутки, очень помогли!)) Космо Мизраил Горыныч Возможно, скоро добавят скроллинг по страницам через ЦСС — то-есть по жмяку на стрелочки у ползунка (или на клаве) контент будет смещаться на экран. Или на размер блока.

Идея была предложена ещё оперой в 2011 году http://people.opera.com/howcome/2011/reader/ , но сейчас интерес к газетному оформлению страниц возрос.
NMitra Было бы интересно. Но пока а мобильных устройствах тормозит даже onscroll. Космо Мизраил Горыныч Тормозит потому, что это методы яваскрипт, и его события «onscroll» срабатывают по несколько десятков раз в секунду, пока страница плавно прокручивается на мобильном устройстве, генерируя для плавности массу ненужных событий и убивая быстродействие несчастного браузера для дохленьких телефонов.

Нативная поддержка в цсс никак бы не тормозила)

Прокрутка изображений

Горизонтальная или вертикальная прокрутка миниатюр изображений. Использует jQuery и опционально easing плагин для эффектов.

HTML

Рассмотрим на примере первой Демки.

CSS

Только для Демо 1:

#outer_container #thumbScroller #thumbScroller #thumbScroller, #thumbScroller .container, #thumbScroller .content #thumbScroller #thumbScroller .container #thumbScroller .content #thumbScroller .content div #thumbScroller img

jаvascript

Подключаем в шапке jQuery, в некоторых демках, дополнительно подключается плагин easing:

В теле страницы, перед закрывающим тегом body вставляем скрипт, который будет взависимости от положения курсора обеспечивать прокрутку изображений:

$outer_container=$("#outer_container"); $thumbScroller=$("#thumbScroller"); $thumbScroller_container=$("#thumbScroller .container"); $thumbScroller_content=$("#thumbScroller .content"); $thumbScroller_thumb=$("#thumbScroller .thumb"); var sliderWidth=$thumbScroller.width(); var itemWidth=$thumbScroller_content.width(); $thumbScroller_content.each(function (i) < totalContent=i*itemWidth; $thumbScroller_container.css("width",totalContent+itemWidth); >); $thumbScroller.mousemove(function(e) < var mouseCoords=(e.pageX - this.offsetLeft); var mousePercentY=mouseCoords/sliderWidth; var destY=-(((totalContent-(sliderWidth-itemWidth))-sliderWidth)*(mousePercentY)); var thePosA=mouseCoords-destY; var thePosB=destY-mouseCoords; if(mouseCoords==destY)< $thumbScroller_container.stop(); >if(mouseCoords>destY) < $thumbScroller_container.css("left",-thePosA); >if(mouseCoords >); var fadeSpeed=300; $thumbScroller_thumb.each(function () < var $this=$(this); $this.fadeTo(fadeSpeed, 0.5); >); $thumbScroller_thumb.hover( function()< //mouse over var $this=$(this); $this.stop().fadeTo(fadeSpeed, 1); >, function() < //mouse out var $this=$(this); $this.stop().fadeTo(fadeSpeed, 0.5); >);

Для вертикального варианта прокрутки, скрипт будет несколько другим.

Как сделать скролл в html

Для создания блока фиксированного размера с возможностью прокрутки по горизонтали и вертикали необходимо использовать свойство overflow .

Overflow может принимать следующие значения:

visible: По умолчанию. Содержимое не обрезается, может отображаться снаружи блока, в котором оно расположено.
hidden: Контент обрезается, без предоставления прокрутки.
scroll: Содержимое обрезается и браузер использует элементы прокрутки, не важно было ли обрезано содержимое или нет. Это избегает многих проблем касательно появления прокруток и их исчезновения в динамичной среде. Принтеры могут печатать переполненное содержимое.
auto: Зависит от агента пользователя. Браузеры такие как Firefox предоставляют прокрутку, если содержимое переполняет блок.

Исходный HTML документ:

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

div  border: 1px solid #000; width: 200px; height: 50px; /* Включаем отображение полос прокрутки по горизонтали и по вертикали */ overflow: auto; padding: 20px; >

auto-scroll

Результат:

Как сделать скролл картинок по горизонтали?

Пример

Как сделать, что бы картинки располагались как на примере И что бы при нажатии на стрелочки картинки проматывались, есть ли готовое решение? Или нужно делать свой слайдер?

Отслеживать

задан 23 ноя 2019 в 11:18

Knurl360259 Knurl360259

154 1 1 серебряный знак 8 8 бронзовых знаков

3 ответа 3

Сортировка: Сброс на вариант по умолчанию

Легче и не придумаешь )

var leftBtn = document.querySelector('#left'); var rightBtn = document.querySelector('#right'); leftBtn.addEventListener('click', slide); rightBtn.addEventListener('click', slide); function slide(e) < e.target.id === 'left' ? scroll(100) : scroll(-100); >function scroll(val) < document.querySelector('ul').scrollBy(< left: val, behavior: 'smooth' >); >

* < margin: 0; padding: 0; >body < height: 100vh; display: flex; align-items: center; >div < width: 100%; display: grid; grid-gap: 5rem; grid-template-columns: 60px 1fr 60px; grid-template-rows: 50px; >ul < width: 100%; display: grid; grid-gap: 1rem; grid-template-columns: repeat(20, 100px); list-style: none; overflow: hidden; scroll-snap-type: x mandatory; >li < background-color: #c62828; scroll-snap-align: center; >button < background-color: #212121; border: none; cursor: pointer; >#left < clip-path: polygon(100% 0, 0 50%, 100% 100%); >#right

Отслеживать

ответ дан 23 ноя 2019 в 12:45

user355286 user355286

Так задумано что клик по стрелки слева скролл идет вправо ?

23 ноя 2019 в 13:23

Это можно поменять вот тут scroll(100) : scroll(-100);

– user355286

23 ноя 2019 в 13:28

понятно на мой взгляд надо исправить . P.S. почему не придумаешь ? CTRL + C и CTRL + V

23 ноя 2019 в 13:31

Я не понимаю о чем ты.

– user355286

23 ноя 2019 в 13:43

23 ноя 2019 в 14:01

Почему не придумаешь CTRL + C и CTRL + V

 let i = 1; for(let li of carousel.querySelectorAll('li')) < li.style.position = 'relative'; li.insertAdjacentHTML('beforeend', `$ `); i++; > /* конфигурация */ let width = 130; // ширина картинки let count = 3; // видимое количество изображений let list = carousel.querySelector('ul'); let listElems = carousel.querySelectorAll('li'); let position = 0; // положение ленты прокрутки carousel.querySelector('.prev').onclick = function() < // сдвиг влево position += width * count; // последнее передвижение влево может быть не на 3, а на 2 или 1 элемент position = Math.min(position, 0) list.style.marginLeft = position + 'px'; >; carousel.querySelector('.next').onclick = function() < // сдвиг вправо position -= width * count; // последнее передвижение вправо может быть не на 3, а на 2 или 1 элемент position = Math.max(position, -width * (listElems.length - count)); list.style.marginLeft = position + 'px'; >;

body < padding: 10px; >.carousel < position: relative; width: 398px; padding: 10px 40px; border: 1px solid #CCC; border-radius: 15px; background: #eee; >.carousel img < width: 130px; height: 130px; /* делаем этот элемент блочным, чтобы убрать лишнее пространство вокруг картинок */ display: block; >.arrow < position: absolute; top: 60px; padding: 0; background: #ddd; border-radius: 15px; border: 1px solid gray; font-size: 24px; line-height: 24px; color: #444; display: block; >.arrow:focus < outline: none; >.arrow:hover < background: #ccc; cursor: pointer; >.prev < left: 7px; >.next < right: 7px; >.gallery < width: 390px; overflow: hidden; >.gallery ul < height: 130px; width: 9999px; margin: 0; padding: 0; list-style: none; transition: margin-left 250ms; /* удаляем пустое пространство между элементами li, у которых установлен inline-block */ /* http://davidwalsh.name/remove-whitespace-inline-block */ font-size: 0; >.gallery li