Есть ли слайдер-карусель на чистом CSS (без JS)?

Question

[Илья Москвин]

Имеется слайдер на js (с использованием jquery). Выглядит вот так: slim-panels.ru.
Для ускорения загрузки страницы хотел бы отказаться в слайдере от js совсем, так как никакого продвинутого функционала не требуется.
Из готовых решений в сети нашел только вот это cssslider.com, но он не умеет показывать несколько картинок в одном слайде, что критично.
Итак, что нужно.
1. Без js.
2. Несколько картинок в одном слайде.
3. Адаптивность.
4. Если есть плагин для wordpress - было бы здорово, но не принципиально.
Можете что-нибудь порекомендовать? (Платные библиотеки/плагины также подойдут)

Answer 1

[Валерий Столярчук]

Это не рационально без скриптов. Не советовал бы использовать в реальном проекте подобный слайдер

Comments

[Илья Москвин]

Спасибо за комментарий. А можете назвать пару причин? В текущем варианте (со скриптом) загрузка страницы блокируется до загрузки и выполнения скрипта и jquery. Как минимум на это ругается google page speed, "предлагая" перенести скрипты в футер. Если же так сделать, сначала загружается вся страница, а через полсекунды появляется слайдер в ее верхней части. Вариант явно неприемлемый для пользователей. С целью повысить рейтинг в google page speed (а также скорость загрузки, конечно) и возникла идея отказаться от скриптов в слайдере.

[Валерий Столярчук]

jsbin.com/ahemer/17/edit this is carousel on the CSS

[Илья Москвин]

Спасибо, поизучаю. Но тут одно изображение на один слайд. А мне нужно, чтобы их было несколько.

Answer 2

[Chronic 86]

https://www.google.com/webhp?sourceid=chrome-insta...

Comments

[Илья Москвин]

Честно гуглил далеко не один час прежде чем спросить.

Answer 3

[Алексей Тимофеев]

А какая собственно разница?
Что-там, что там будет определённый код, который так или иначе будет грузить браузер...

Скорость загрузки зависит не от кода, а от оптимизации ваших картинок.
Одно дело грузить полноразмерные картинки и совсем другое дело грузить оптимизированные под сеть картинки... ;)

И так, кстати... ;) cssslider врёт что совсем без Java... Ближайшее рассмотрение показывает что всё же есть у них Java...

Comments

[Илья Москвин]

Алексей, благодарю за комментарий.
1. Разумеется, картинки для веба уже оптимизированы.
2. Суть вот в чем. Если слайдер на JS, то скрипты (как скрипт галереи, так и jquery) нужно подключать в head или верхнюю часть body (иначе галерея будет вставляться в уже отрисованную страницу). Соответственно, при анализе страницы браузер, дойдя до скриптов, останавливает анализ и скачивает и выполняет скрипты, а это занимает немалое количество времени. Кроме того, скрипт (равно как и css-файл), блокирующий отрисовку первого экрана страницы, - это плохая практика, по мнению гугл, со всеми вытекающими.
Если же сделать css-слайдер, то css-код (по сравнению с jquery, он совсем небольшой), необходимый для его работы, встраиваем в html-страницу (так называемая приоритизация css, также пропагандируемая гуглом) и получаем отрисовку первого экрана без каких-либо блокировок.
4. cssslider.com/jquery-carousel-slider-33.html вроде работает без js (не смотря на url). Попробуйте отключить в браузере js, ну и в средствах разработчика видим, что нет js... Все их слайдеры не проверял, впрочем, может где-то и есть js.

[Алексей Тимофеев]

Илья Москвин: относительно того что JS нужно подключать в head или верхней части body это не совсем верно... посмотрите как реализовано у самого гугла это... впрочем я это уже не раз встречал и на других сайтах... ставится картинка заглушка, а сам JS подгружается в самом конце...
относительно CSS, лично мне кажется всё валить в CSS тоже плохо, получается или много CSS или один огромный и неповоротливый CSS...
относительно размеров JS и CSS кодов слайдеров, вопрос весьма спорный, по сути в сети болтается масс неоптимизированных или многофункциональных слайдеров, если вы сами сядите и напишите коротенький слайдер исключительно под вашу задачу, то он будет крайне небольшим.
относительно cssslider - большинство их слайдеров вставляются через iframe и когда заглядываешь внутрь этого iframe то легко находишь этот самый JS.... они хитрецы и сильно слукавили...
кстати, интересно, а как гугл относится к iframe???
может это выход???

[Илья Москвин]

1. Идея с картинкой была первой, которая пришла в голову, но показалась неудачной с точки зрения user experience. А где именно можно подсмотреть данную реализацию?
2. По CSS получается процентов 10-15 включено в html (отображение первого экрана), остальное css в одном общем минифицированном файле (подключается в body). Пробовал этот вариант на представленном сайте - работает хорошо.
3. В принципе вариант с маленьким js-слайдером (без jquery) тоже рассматриваю. А можете сказать, чем js-слайдер будет лучше css-ного?
4. Может iframe и вариант, только все равно не могу вот тут cssslider.com/demos.html найти слайдеры с js, про которые Вы говорите? Можете в конкретный url ткнуть, пожалуйста?

[Алексей Тимофеев]

Илья Москвин:
1. Я уже сейчас и не вспомню конкретных адресов... Надо ковыряться искать... Если не ошибаюсь то Ютуб собственно так и делает...
2. Раз пробовали значит уже получилось???
3. Здесь нет лучше или хуже... Есть задачи которые должен выполнять тот или иной язык, CSS это язык стилей.
4. cssslider.com/wordpress-slideshow-32.html - вот например
Если посмотрите код то всё равно грузится JAVA... ;) Причём перед самым контейнером со слайдером...

Кстати а что собственно мешает Java так же частично прописывать в HTML???

Поймите, не важно в чём вы делаете слайдер, это всё равно отвлекает обработчик на тот или иной язык... И не важно на какой, всё равно идёт торможение на переключение с языка на язык...

Я бы сделал динамический CSS в котором внедрял первую картинку слайдера фоном через CSS, а JAVA подгружал бы в самом конце. Как по мне так это наиболее оптимальный вариант.

Хотя могу и заблуждаться, истина где-то посередине... Чорт его знает как лучше...