Как сделать такой слайдер(?) изображений как на изображении?

Question

[Fyodor]

В верстке такая "галерея" есть. поискав не могу найти как такую сделать. ничего похожего найти не получается, а сам не могу прикинуть как тут анимация прокручиваний происходить будет


там откуда взял хотят так, а как работать должно изобразить-сказать не могут
закругленные изображения опять же. с помощью css скруглять не знаю насколько хорошо...загружать с прозрачным фоном - там галерея фоток дохренища весить просто будет.

Answer 1

[Денис Инешин]

Возьмите например такой слайдер: www.bkosborne.com/jquery-feature-carousel
Только картинки сделайте квадратными и примените к ним border-radius: 50%

Скруглять только на CSS! Это даст поддержку IE9+, в старых ИЕ будет разумная деградация до квадратных картинок.

Comments

[Fyodor]

ого, вроде прям в точку, сейчас попробую.

[Fyodor]

ох, скрипт под старый jq сделан с конструкциями типа live( сейчас попробую переделать

[Илья Лесных]

А зачем "скруглять только на CSS"? Нельзя что ли сразу круглые картинки сделать?

[Fyodor]

@Aliance ну это png24. в таком формате каждая картинка около 300кб весит. фоток планируется 12.

[Илья Лесных]

@Richard_Ferlow я не понял к чему эти цифры? просто в фотошопе сделать круглую картинку - явно лучше, чем делать тоже самое на фронтэнде.

[Fyodor]

@Aliance ну как вы круглое изображение с прозрачным фоном на странице использовать будете?

[Денис Инешин]

@Aliance , не путайте людей, скруглять 100 картинок в фотошопе, и потом еще терпеть увеличенный трафик из за пнг-24, это не лучше чем скруглить все одним CSS свойством.

Answer 2

[Vadim Bogomazov]

www.bkosborne.com/jquery-waterwheel-carousel - вот такой нашел я плагин, погуглив. Пригодится может.

Comments

[Fyodor]

выше ровно его же посоветовали уже =)

[Vadim Bogomazov]

Точно( Тогда вот еще пара вариантов:
codecanyon.net/item/jquery-carousel-evolution/full...
www.jcoverflip.com/demo

[Fyodor]

@bogomazov_vadim спасибо, первый очень похож на нужный. сейчас пробую тот что сначала предложили.