как построить треугольный слайдер?

Question

Добрый день!

У меня есть треугольный дизайн слайдер, но не HTML: triangular slider design at the bottom

Как это функционирует:

• если вы наведите курсор мыши на слайде (а triagle) слайд grows a bit like this
• если вы щелкните по нему откроется лайтбокс
• , если вы нажмете на стрелки серого следующего/предыдущего, появится еще один набор из 6 изображений

Я пытался использовать

• CSS пограничные треугольники + границы изображение
• вращающимся отдельные изображения треугольника вперед и их контейнер обратно
• карты тегов для висения и нажмите

но не настоящее решение. Я ценю чью-либо помощь.

Answer 1

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

Я скопировал один из моих dabblet в liveweave.com, так что вы можете открыть его в IE8, если вы хотите: http://liveweave.com/UU2oOZ

это не ваше решение, это меню вертикально), но это пример, который может помочь вам начать соприкосновение.

Answer 2

Вы пытаетесь провести весь параллелограмм взад-вперед или отдельные изображения треугольника? Возможно, если у вас есть пример того, как будет выглядеть следующий слайд, это было бы полезно.

Answer 3

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