Для установки слайдера вам требуется добавить данный код в CSS стили вашего сайта (Панель управления — Дизайн — Управление CSS).
/* Слайдер */ .slides { height:300px; margin:50px auto; overflow:hidden; position:relative; width:900px; } .slides ul { list-style:none; position:relative; } /* Кадры анимации #anim_slides */ @-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; list-style:none!important; /* анимация css3 */ -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; } /* Задержки css3 */ .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; } /* Кадры анимации #anim_titles */ @-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; /* Цвет блока с описанием. По умолчанию — черный. */ border-radius:10px 10px 10px 10px; box-shadow:0 0 5px #FFFFFF inset; /* Цвет тени блока с описанием */ color:#FFFFFF; /* Цвет текста */ font-size:26px; /* Размер шрифта */ left:10%; /* Отступ с лева */ margin:0 auto; padding:20px; position:absolute; top:50%; /* Отступ сверху */ width:200px; /* Ширина блока с описанием */ /* Анимация css3 */ -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; }
Далее вам требуется скопировать код:
Не забудьте изменить поле src=" * " на ссылку вашего изображения.
Как узнать ссылку на картинку ?
<div class="slides"> <ul></p> <li><img src="Вставить_ссылку_на_изображение_1" alt="image01" /><div>Описание #1</div></li> <li><img src="Вставить_ссылку_на_изображение_2" alt="image02" /><div>Описание #2</div></li> <li><img src="Вставить_ссылку_на_изображение_3" alt="image03" /><div>Описание #3</div></li> <li><img src="Вставить_ссылку_на_изображение_4" alt="image04" /><div>Описание #4</div></li> </ul> </div>
Код можно вставить в поле: Либо через обычный визуальный редактор нажав на кнопку . У вас появится окно в которое и нужно вставлять данный код.
Установленный слайдер будет отображаться там, куда Вы добавили код.
Как узнать ссылку на изображение для вставки в слайдер ?
- В визуальном редакторе переходите в Файловый менеджер .
- Выбираете изображение которое вам требуется вставить в слайдер
- Правым кликом мышки выбираете «Свойства»
- В свойствах видите строку «Ссылка:»
- Переходите по подчеркнутой ссылке
- Из строки браузера копируете путь до вашего изображения и вставляете данную ссылку в код. Будет это выглядеть так - « <img src="Ссылка_из_строки_вашего_браузера" alt="image01" /> »
Как убрать описание у картинки в слайдере?
Для того, что бы убрать блок с описанием к картинки, удаляем теги "div", которые заключены в тегах "li" Слайдер без описания будет выглядеть так:
<div class="slides"> <ul> <li> <img src="Вставить_ссылку_на_изображение_1" alt="image01" /> </li> <li> <img src="Вставить_ссылку_на_изображение_2" alt="image02" /> </li> <li> <img src="Вставить_ссылку_на_изображение_3" alt="image03" /> </li> <li> <img src="Вставить_ссылку_на_изображение_4" alt="image04" /> </li> </ul> </div>
Поделиться с друзьями: