помогите пожалуйста сократить css
Был слайдер на 5 картинок. я увеличил его до 10 картинок, но на CSS теперь смотреть не могу. Можно как-то сократить записи вида
/* Show the info box when the user selects the slides */
.slider2 input:nth-of-type(1):checked ~ .slides2 > .tk-museo-sans span:nth-of-type(1) .info,
.slider2 input:nth-of-type(2):checked ~ .slides2 > .tk-museo-sans span:nth-of-type(2) .info,
.slider2 input:nth-of-type(3):checked ~ .slides2 > .tk-museo-sans span:nth-of-type(3) .info,
.slider2 input:nth-of-type(4):checked ~ .slides2 > .tk-museo-sans span:nth-of-type(4) .info,
.slider2 input:nth-of-type(5):checked ~ .slides2 > .tk-museo-sans span:nth-of-type(5) .info,
.slider2 input:nth-of-type(6):checked ~ .slides2 > .tk-museo-sans span:nth-of-type(6) .info,
.slider2 input:nth-of-type(7):checked ~ .slides2 > .tk-museo-sans span:nth-of-type(7) .info,
.slider2 input:nth-of-type(8):checked ~ .slides2 > .tk-museo-sans span:nth-of-type(8) .info,
.slider2 input:nth-of-type(9):checked ~ .slides2 > .tk-museo-sans span:nth-of-type(9) .info,
.slider2 input:nth-of-type(10):checked ~ .slides2 > .tk-museo-sans span:nth-of-type(10) .info
{
bottom: 79px;
}
/* .. and finally, move the slides into the correct position when the user clicks the arrow, so the right
slide is selected */
.slider2 input:nth-of-type(1):checked ~ .slides2 > div > span { left: 5% }
.slider2 input:nth-of-type(2):checked ~ .slides2 > div > span { left: -5% }
.slider2 input:nth-of-type(3):checked ~ .slides2 > div > span { left: -15% }
.slider2 input:nth-of-type(4):checked ~ .slides2 > div > span { left: -25% }
.slider2 input:nth-of-type(5):checked ~ .slides2 > div > span { left: -35% }
.slider2 input:nth-of-type(6):checked ~ .slides2 > div > span { left: -45% }
.slider2 input:nth-of-type(7):checked ~ .slides2 > div > span { left: -55% }
.slider2 input:nth-of-type(8):checked ~ .slides2 > div > span { left: -65% }
.slider2 input:nth-of-type(9):checked ~ .slides2 > div > span { left: -75% }
.slider2 input:nth-of-type(10):checked ~ .slides2 > div > span { left: -85% }
Там много подобного, но никак не пойму как такое можно сократить и сделать слайдер на бесконечное количество картинок. |
Без тестового примера трудно судить...
Но вот это все похоже одинаковое Цитата:
.slider2 input:checked ~ .slides2 > .tk-museo-sans span.info{
bottom: 79px;
}
А это все разное. Без тестового примера что-то другое не предложить... :no: Цитата:
|
вот сам слайдер на 5 картинок http://heeg.ru/test/heeg_testls9.html#slider22
он работает на чистом CSS (без js) сам CSS находится здесь http://heeg.ru/test/heeg_testls9.htm...eSheetTo pic4 CSS можно менять прямо на сайте и вид слайдера будет меняться. Ваша замена сработала. Но если куски с процентами нельзя заменить, значит не получится сделать слайдер на бесконечное количество фото? вот такой кусок ТЕОРИТИЧЕСКИ можно заменить на бесконечный?
/* The next bit is a bit wordy, but it just positions the slides at either side of the selected slide
so we get a cool 3D effect */
.slider2 input:nth-of-type(1):checked ~ .slides2 > .tk-museo-sans span:nth-of-type(2) ,
.slider2 input:nth-of-type(2):checked ~ .slides2 > .tk-museo-sans span:nth-of-type(3) ,
.slider2 input:nth-of-type(3):checked ~ .slides2 > .tk-museo-sans span:nth-of-type(4) ,
.slider2 input:nth-of-type(4):checked ~ .slides2 > .tk-museo-sans span:nth-of-type(5) {
-webkit-transform: rotateY(-10deg) scale(0.8) translateX(-10%);
transform: rotateY(-10deg) scale(0.8) translateX(-10%);
z-index: 0;
}
или это невозможно? |
Цитата:
|
Цитата:
.slider2 input:checked ~ .slides2 > .tk-museo-sans span.info{
bottom: 79px;
}
все нижние подписи пропадают :( |
10:3 Глупый являет глупость свою даже просто идя по дороге, и каждый видит, что он глуп.
10:15 Труд изнуряет глупого настолько, что путь обратный в город он найти не может. Труд для него тяжёл всю жизнь. 10:10 Но мудрость облегчает работу. Трудно рубить тупым топором, и если его не наточишь, то тебе понадобится больше сил. Точно так же и мудрость. Екклезиаст. |
Цитата:
|
sovsem-nub, ты все еще забиваешь персональный left на каждую картинку? Тогда Зигмунд Фрейд купит твою душу по дешевке. )))
Это же анальная фиксация у тебя. https://sites.google.com/site/tohabi...icnosti/stadii |
| Часовой пояс GMT +3, время: 14:25. |