Question

Добрый день, обладаю базовыми знаниями в области html  и css, но этого недостаточно, чтобы сделать в верхней части сайта сладер, который будет постоянно менять фоновую картинку именно это верхней части сайта. На картинке ниже в виде креста как раз отображено место где должен располагаться слайдер. Подскажите как можно реализовать слайдер из 5-6 фоновых картинок?

Answer 1

есть слайдер на сss сам подгонишь под свой сайт?  так выглядит=> http://testerbeta.moy.su/

Comments

Как сделать чтобы чёрная кнопка которая то появляется на слайдере, то исчезает стала прозрачная?

---

> Как сделать чтобы чёрная кнопка которая то появляется на слайдере, то исчезает стала прозрачная?

>> где можно увидеть сам слайдер? у вас на сайте я не увидел слайдера.

---

Следующий код ставим в свой 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;

  /* анимация 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;
 }

и этод код с указаним пути картинок вставляем где нужно вывести слайдер

 

 

<div class="slides">
  <ul> <!-- Слайды -->
  <li><img src="images/pic1.jpg" alt="image01" />
  <div>Описание #1</div>
  </li>
  <li><img src="images/pic2.jpg" alt="image02" />
  <div>Описание #2</div>
  </li>
  <li><img src="images/pic3.jpg" alt="image03" />
  <div>Описание #3</div>
  </li>
  <li><img src="images/pic4.jpg" alt="image04" />
  <div>Описание #4</div>
  </li>
  </ul>
 </div>

 

 

---

Адрес сайта вот: http://www.ognebiozachita.ru.

Чёрная кнопка её надо сделать прозрачной так чтобы надпись на слайдере появлялась и уходила как это сейчас происходит.

---

В стилях строка номер 599:

 .slides ul li div { 
 background-color: rgba(0, 0, 0, 0.6);  текущий фон заменить на этот
 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; 
 }

---

спасибо за помощь