• Страница 1 из 1
  • 1
Форум » Веб-разработка » Скрипты для сайтов » Слайдер аккордеон для сайта на HTML + CSS3 (CSS3: Создание слайдера в стиле аккордеона на сайте)
Слайдер аккордеон для сайта на HTML + CSS3
Kosten
Дата: Суббота, 2019-04-20, 21:53 | Сообщение 1
Оффлайн
Администраторы
Сообщений:24666
Награды: 57


Есть разные по функциям слайдеры, если брать этот, то он отличается по своему функционалу и безусловно по дизайну. Слайдер изначально состоит из 4 картинок, которым закреплены ключевые слова виде название.

Где по умолчанию идет пакет сложенных картинок. Но видя название, то здесь наводим клик на выбранное изображение и появляется полноценный снимок, который при желание можно поставить под ссылку на переход.

При открытие страницы, по умолчанию:



Здесь навели клик на один из снимков:



HTML

Код
<div class="zadesuvu_mubedas">
  <ul>
    <!-- 1 элемент слайдера -->
    <li>
      <div class="maxetus_avemipok">
        <a href="/">ZorNet.Ru<br><span> портал для вебмастера №1</span></a>
      </div>
      <a href="/">
        <img src="Ссылка на изображение #1">
      </a>
    </li>
    <!-- 2 элемент слайдера -->
    <li>
      <div class="maxetus_avemipok">
        <a href="/">ZorNet.Ru<br><span> портал для вебмастера №2</span></a>
      </div>
      <a href="/">
        <img src="Ссылка на изображение #2">
      </a>
    </li>
    <!-- 3 элемент слайдера -->
    <li>
      <div class="maxetus_avemipok">
       <a href="/">ZorNet.Ru<br><span> портал для вебмастера №3</span></a>
      </div>
      <a href="/">
        <img src="Ссылка на изображение #3">
      </a>
    </li>
    <!-- 4 элемент слайдера -->
    <li>
      <div class="maxetus_avemipok">
       <a href="/">ZorNet.Ru<br><span> портал для вебмастера №4</span></a>
      </div>
      <a href="/">
        <img src="Ссылка на изображение #3">
      </a>
    </li>       
  </ul>
</div>

CSS

Код
.zadesuvu_mubedas {
width: 990px; height: 375px;
overflow: hidden;
margin: 20px auto;
-webkit-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);
-moz-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);
box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);
}

/*Небольшой хак для предотвращения мелькания на некоторых браузерах*/
.zadesuvu_mubedas ul {
width: 2000px;
padding: 0;
    margin: 0;
}

.zadesuvu_mubedas li {
position: relative;
display: block;
width: 247px;
float: left;
border-left: 1px solid #888;
/* создание тени */     
-webkit-box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);  
box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);
/* Создание анимации с помощью переходов */
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;  
transition: all 0.5s;
}

/* Уменьшить ширину для неактивных изображений */
.zadesuvu_mubedas ul:hover li {
width: 80px;
}

/* Задание ширины изображения при поднесении к ней курсора */
/* Данный стиль (li:hover) переопределит ul:hover */
.zadesuvu_mubedas ul li:hover {
width: 750px;
}

.zadesuvu_mubedas li img {
display: block;
width: 750px;
}

/* Стиль для блока, содержащего ссылку */
.maxetus_avemipok {
background: rgba(0, 0, 0, 0.5);
position: absolute;
left: 0;
bottom: 0;  
width: 750px;   
}

/* Стиль для ссылки */
.maxetus_avemipok a {
display: block;
color: #fff;
font-weight: 200;
text-decoration: none;
padding: 20px;
font-size: 24px;
}
.maxetus_avemipok a span {
    font-size: 18px;
}

Здесь при любых ситуациях можно активировать только одно изображение, а все остальные изображения при этом имеют заданную ширину ширину.

Демонстрация
Прикрепления: 7107130.jpg(63.5 Kb) · 0455679.jpg(81.0 Kb) · zawet.zip(2.3 Kb)
Страна: (RU)
Форум » Веб-разработка » Скрипты для сайтов » Слайдер аккордеон для сайта на HTML + CSS3 (CSS3: Создание слайдера в стиле аккордеона на сайте)
  • Страница 1 из 1
  • 1
Поиск: