Интересный и одновременно простой слайдер на чистом CSS3

[Skreep]

Просто. Зачем?

[homm]

— Зачем?
— Просто.

[eyeless_watcher]

Надо добавить кадр в слайдер — побежали править css. Не надо так.

[PositiveAlex]

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

Данное решение можно использовать, например, в генераторе статик сайтов. Написал код один раз, дальше он генерит этот css без необходимости правки кода: добавил картинку в папку, код увидел больше картинок, для каждой перегенерил css.

Какие плюсы с точки зрения браузера: я лично не особо опытный, поэтому плюсов никаких не вижу. Наверное, если браузер старый, то тут уже ничего не поможет.

Если брать, например, работу в joomla 2.5, то из-за того, что там mootools, там постоянно возникают проблемы со слайдами из jquery из-за конфликтующих функций. С этой позиции — не будет конфликта js.

Буду признателен, если кто-то поделится своим взглядом и опытом. Спасибо.

[pepelsbey]

То же самое, только универсально и без необходимости редактировать CSS для каждой новой картинки: jsbin.com/miwuke/

.slider {
	position:relative;
	width:700px;
	padding-top:370px;
	text-align:center;
	}
	.slider__check {
		position:absolute;
		clip:rect(0 0 0 0);
		overflow:hidden;
		}
	.slider__image {
		position:absolute;
		top:0;
		left:0;
		}
	.slider__label {
		overflow:hidden;
		display:inline-block;
		width:20px;
		height:20px;
		background:#069;
		border-radius:50%;
		text-indent:-9999px;
		}

/* Display */
.slider__image {
	display:none;
	}
.slider__check:checked + .slider__label + .slider__image {
	display:block;
	}

/* Current */
.slider__check:checked + .slider__label {
	background:#C00;
	}

Добавьте анимации по вкусу.

[nicuini]

Можно еще на animation сделать автоматическую смену кадров.
Только по-моему, гораздо более интересной задачей было бы сделать именно что слайдер, то есть «приезжание» из-за границы родительского блока. Без js

[pepelsbey]

В сторону: тем, кто кладёт картинки в виде фона, хочется оторвать руки. Я всё равно до них доберусь, если захочу сохранить, но потрачу лишнее время.

[firya]

Вы в самом деле думаете что это делается чтобы «защитить» изображения?

[pepelsbey]

Я не вижу других причин, озвучьте.

[Finesse]

Растягивание изображение на весь размер блока с сохранением пропорций

[pepelsbey]

Этого легко добиться позиционированием img внутри контейнера.

[Finesse]

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

Я согласен с Вами, что вставлять изображения через img лучше по ряду причин, поэтому предпочитаю использовать img.

[GeFFest]

Вот есть, например, такое отличное свойство object-fit. Позволяет делать с картинками все то же самое, что и позиционирование внутри background-image. Но при взгляде на его поддержку, сразу же ухудшается настроение: его не поддерживает даже Edge caniuse.com/#feat=object-fit
Вот и получается, если нужно добиться такого результата, который дают background-size: cover / contain; проще всего их и использовать. Как вариант, адрес картинки поместить в инлайновые стили, а остальные свойства — в CSS. По-моему, решение хоть и не самое красивое, но самое простое и рабочее.

[a553]

Тупо потому что для <img/> нельзя указать src из CSS?

[jab]

Это делается просто потому, что у background больше возможностей, чем у img.

[stalkerg]

Камень в огород W3C. У background ещё есть куча ограничений для Safari в iOS к примеру.

[pepelsbey]

Каких?

[SerDIDG]

background-attachment: fixed не работает ни в safari под ios, ни в chrome под андоид вместе с background-size: cover.

[stalkerg]

Да там банально ещё есть ограничение на размер. У нас картинка просто не показывалась когда была больше 1024x1024 (при наличии других картинок в системе). Но у нас ещё осложнялось тем, что это был не сам Safari а WebView…

Как я понял, если картинка висит в background то всегда в памяти (причём видео), что бы потом можно было производить манипуляции на лету. Img же рендрится в сам контекст и вгружается в память только по требованию перерисовки (изменение размера или видимо скругление углов). У смартфонов что с памятью, что с GPU тухло от сюда и ограничения.

[SerDIDG]

Сегодня словили глитч в chrome на андроид (nexus 7 2013), когда картинка в 16 мегапикселей просто вытягивалась как будто в 1000 раз по ширине, с неким набором стилей.

[stalkerg]

Тут не в реализации дело. Иначе это реализовать трудно, что бы ещё и быстро работало. По сути это неявные ограничения для background.

ЗЫ не знаю как, сейчас но одно время смотрел как картинки в background влияют на скорость отрисовки, и на десктопе оно так прилично просаживало

[Serator]

У img есть object-fit / object-position / image-orientation / image-rendering / image-resolution… Так что возможностей тоже хватает, правда не везде оно пока что поддерживается.

[stalkerg]

Мдя… ещё пару лет чую нельзя будет это юзать. Если object-fit IE боится то object-position даже safari, а image-orientation кажется только FF любит.

[GeFFest]

Оно начисто игнорируется даже, казалось бы, современным браузером Edge (популярность которого, как мне кажется, сейчас начнет стремительно расти, потому что в нем, в принципе есть все, что нужно обычному юзеру, а значит его нельзя списывать со счетов).
Так что вряд ли разумно использовать сейчас эти свойства: достаточно много людей увидят вместо того, что вы верстали, растянутую и уродливую картинку.

[pepelsbey]

Расскажите о конкретных примерах, когда содержимое страницы (если мы говорим про эту галерею) нужно засунуть в оформление и сделать его недоступным пользователю.

[SerDIDG]

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

screencloud.net/v/wwXW

[pepelsbey]

можно задавать какое-либо небольшое количество опций слайда

Честно говоря, я не понял задачи и тем более, почему фон здесь лучше, чем img

[SerDIDG]

Сделайте, чтобы картинка повторялась. Сделайте, чтобы картинка занимала всё пространство с сохранением пропорций без жс. Сделайте паралакс без жс.

[SerDIDG]

С вас такой верстальщик смотрю, как и комментатор. То есть хреновый.

1. Имелось ввиду background-size: cover. Картинка заполняет собой всё пространство, масштабируется по меньшей стороне, а лишнее обрезается. К тому же пример в тостере крайней плохой, и в сафари не работает — screencloud.net/v/fE7f
2. Такой метод не применим к живым сайтам, в которых может редактироваться контент. В которых блоки занимают не определённую высоту и позицию. А тем более это не применимо к слайдеру.

[SerDIDG]

Ну вот, а говорите верстать умеете, а живых сайтов не делали, и требований клиентов не знаете. Дальше говорит не о чем. Типичный кодер тимфорестера.

[SerDIDG]

На личности перешли вы. Но как и прежде, видно ваши «глубокие» знания, особенно про object-fit. А так же, все реальные задачи, с которым сталкиваются кодеры в реальной жизни для вас странные — не лицо не хватка опыта.

PS. background-size caniuse.com/#feat=background-img-opts, object-fit — caniuse.com/#feat=object-fit. Рас старые кодеры не умеют гуглить и не знают где и как работают те или иные свойста. Представляю какой малины вы учите в ваших статьях.

[SerDIDG]

Под контентом слайдера я имел текст внутри слайда.

[polRk]

Только это не слайдер, а tabbar. Слайдер должен уметь перелистываться, отвечать на свайпы