В предишна статия обсъдихме как да наложи един прост слайдер с CSS без JS-скриптове. Сега Нека разгледаме друг вариант слайдер дизайн - с бутоните "напред" и "назад".
Обикновено плъзгача на CSS с бутони "напред" и "назад"
Преди да продължите да четете статията, аз препоръчвам ви да прочетете предишната статия. който беше обсъден подробно кода обикновен слайдер.
Но CSS може да взриви малко мозък:
Ние ще разбере какво се случва тук. Ние молим за бутон квадратен размер на блок (ширина и височина 80 пиксела) и използване на свойствата на граничен радиус го превърне в един кръг. то Позициониране напълно, така че лявата половина на границата на блок на контейнера. Поради преливане на имота: скрит контейнера, всичко, което е отишло отвъд своите граници, е отрязана. Така че ние се два полукръга.
За да центрирате бутон височина, използвайте следния метод. Expose най-горното копче: 50%. По този начин, горната граница на бутона ще бъде в средата на контейнера. Също така посочва трансформация - компенсиране на височина от 50%: трансформиране: translateY (-50%). Процентите, посочени в преобразуването, не са измерени от размера на елемента родител (контейнер) и размера на блока. По този начин, блокът е изместена от половината от височината му нагоре. В резултат на центъра на блока е подравнен с височината на центъра на контейнера.
По-нататък във вътрешността на бутоните, необходими за да се направи една стрелка към лявата и дясна стрелка. Използване на псевдо-: след това, и начертайте стрелка във формата на съответните Unicode символи.
Подравняване регулиране стрелка, като се използва друга техника вертикално подравняване: предварително определена височина, равна на височината на редовете на контейнера (линия височина: 80px).
Разгледани как да се показва на бутона. Сега промените кода на плъзгача от предишната статия за използването на такива ключове.
Отделните двойки ключове от които се нуждаем, за всеки един от плъзгачите рамка. В първия кадър, "Назад", за да се активира последния кадър, и бутона "Напред" - втория фрейм. Във втория кадър "Back" бутон активира първия кадър, и бутона "Напред" - трета рамка. И така нататък. Оказва се следния код:
премахнем всичко, свързано със стари бутони и добавяне на нови бутони от горния пример на стила лист от предходната плъзгача:
Резултатът тук е слайдер:
Изгрев над острова
Свързани статии