У этого слайдера есть несколько плюсов. Первый из них заключается в том, что это слайдер организован с помощью СSS без использования jQuery. Он очень простенький и легко устанавливается. Количество слайдов, можно добавлять сколько нужно. В этом слайдере нет кнопок управления - Вперед/Назад, но я считаю, что это не большой недостаток.
В примере видно, что слайдер представляет из себя меняющиеся картинки и блоки с сопровождающим текстом. Чтобы подключить у себя слайдер, сначала добавьте html-разметку
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <div class="slides"> <ul> <li><img src="img1.jpg" title="Заголовок для изображения #1" alt="" /> <div>Текст для слайдера #1</div> </li> <li><img src="img2.jpg" title="Заголовок для изображения #2" alt="" /> <div>Текст для слайдера #2</div> </li> <li><img src="img3.jpg" title="Заголовок для изображения #3" alt="" /> <div>Текст для слайдера #3</div> </li> <li><img src="img4.jpg" title="Заголовок для изображения #4" alt="" /> <div>Текст для слайдера #4</div> </li> </ul></div> |
Изображения подключаются через img, так что укажите правильный путь к ним.
Слайды подключаются в виде ul-списка, так что для того, чтобы добавить новый слайд просто добавьте следующий по-порядку - li с подключением нового изображения и текстового описания. Потом еще нужно будет добавить и в стилях.
1 2 3 | <li><img src="img5.jpg" title="Заголовок для изображения #5" alt="" /> <div>Текст для слайдера #5</div></li> |
Теперь, чтобы осуществить анимацию, Вам нужно добавить CSS стили и анимацию.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 | /*Слайдер*/.slides {height:150px;margin:50px auto;overflow:hidden;position:relative;width:400px;}.slides ul {list-style:none;position:relative;} @-webkit-keyframes anim_slides {0% {opacity:0;}6% {opacity:1;}24% {opacity:1;}30% {opacity:0;}100% {opacity:0;}}@-moz-keyframes anim_slides {0% {opacity:0;}6% {opacity:1;}24% {opacity:1;}30% {opacity:0;}100% {opacity:0;}} .slides ul li {opacity:0;position:absolute;top:0; -webkit-animation-name: anim_slides;-webkit-animation-duration: 24.0s;-webkit-animation-timing-function: linear;-webkit-animation-iteration-count: infinite;-webkit-animation-direction: normal;-webkit-animation-delay: 0;-webkit-animation-play-state: running;-webkit-animation-fill-mode: forwards; -moz-animation-name: anim_slides;-moz-animation-duration: 24.0s;-moz-animation-timing-function: linear;-moz-animation-iteration-count: infinite;-moz-animation-direction: normal;-moz-animation-delay: 0;-moz-animation-play-state: running;-moz-animation-fill-mode: forwards;} .slides ul li:nth-child(2), .slides ul li:nth-child(2) div {-webkit-animation-delay: 6.0s;-moz-animation-delay: 6.0s;}.slides ul li:nth-child(3), .slides ul li:nth-child(3) div {-webkit-animation-delay: 12.0s;-moz-animation-delay: 12.0s;}.slides ul li:nth-child(4), .slides ul li:nth-child(4) div {-webkit-animation-delay: 18.0s;-moz-animation-delay: 18.0s;}.slides ul li img {display:block;} @-webkit-keyframes anim_titles {0% {left:100%;opacity:0;}5% {left:10%;opacity:1;}20% {left:10%;opacity:1;}25% {left:100%;opacity:0;}100% {left:100%;opacity:0;}}@-moz-keyframes anim_titles {0% {left:100%;opacity:0;}5% {left:10%;opacity:1;}20% {left:10%;opacity:1;}25% {left:100%;opacity:0;}100% {left:100%;opacity:0;}} .slides ul li div {background-color:#000000;color:#FFFFFF;font-size:14px;left:10%;padding:10px;position:absolute;top:25%;width:100px; -webkit-animation-name: anim_titles;-webkit-animation-duration: 24.0s;-webkit-animation-timing-function: linear;-webkit-animation-iteration-count: infinite;-webkit-animation-direction: normal;-webkit-animation-delay: 0;-webkit-animation-play-state: running;-webkit-animation-fill-mode: forwards; -moz-animation-name: anim_titles;-moz-animation-duration: 24.0s;-moz-animation-timing-function: linear;-moz-animation-iteration-count: infinite;-moz-animation-direction: normal;-moz-animation-delay: 0;-moz-animation-play-state: running;-moz-animation-fill-mode: forwards;} |
Самый первый класс - .slides - это класс, с помощью которого можете настроить размер слайдера и его позиционирование. Сейчас размер 150 на 400 пикселей. Просто измените на нужній и под него создайте изображения.
.slides ul li div - это блок с текстом, который тоже можно корректировать под себя.
Также в стилях вы найдете значение - 24.0s. Это общее время анимации. Присутствуют стили для каждого li-элемента, как например для второго по счету - .slides ul li:nth-child(2), .slides ul li:nth-child(2) div {. Еще есть под номером 3 и 4. Чтобы добавить под номером 5, дублируйте например четвертый и измените 4 на 5. Также установите время начала анимации.
Для каждого li-элемента задано свое время анимации. У первого по умолчанию 0, тут настройки не нужны, а вот у каждого последующего на 6 секунд больше. Поэтому у второго 6 секунд, третьего - 12, а у четвертого - 18 и длится до 24, как и писал раньше потом все сначала. Так что, если добавите 5 слайд то нужно указать ему время 24 а общее изменить на 30 секунд. Если шестой слайд, то по том же пути.
Для 5 слайда стили будут такими:
1 2 3 4 | .slides ul li:nth-child(5), .slides ul li:nth-child(5) div {-webkit-animation-delay: 24.0s;-moz-animation-delay: 24.0s;} |
Также, Вы можете изменить время анимации, только правильно посчитайте. Например, если Вам надо не 6, а 4 секунды задержки, то время общей анимации для 4 слайдов будет не 24 секунды, а 16. Получается для второго слайда - 4, для третьего 8, а для четвертого - 12. Думаю, это понятно.
Установив и настроив правильно свой слайдер, получите отличный результат.
На этом все, спасибо за внимание. 🙂
