Как сделать слайдер на чистом CSS3 без использования JavaScript.
Всем привет! Сегодня я покажу, как можно создать слайдер на чистом CSS3 без использования javascript.
Бывают случаи, когда мы не можем использовать javascript, но нам нужно сделать слайдер. Вот здесь и можно использовать возможности CSS3.
Итак, вот структура
<div class="carousel-wrapper" style="height: 400px;">
<span id="target-item-1"></span>
<span id="target-item-2"></span>
<span id="target-item-3"></span>
<div class="carousel-item item-1">
<h2>Item 1</h2>
<p>Content goes here.</p>
<a class="arrow arrow-prev" href="#target-item-3"></a>
<a class="arrow arrow-next" href="#target-item-2"></a>
</div>
<div class="carousel-item item-2 light" style="background-color: royalblue;">
<h2>Item 2</h2>
<p>Content goes here.</p>
<a class="arrow arrow-prev" href="#target-item-1"></a>
<a class="arrow arrow-next" href="#target-item-3"></a>
</div>
<div class="carousel-item item-3">
<h2>Item 3</h2>
<p>Content goes here.</p>
<a class="arrow arrow-prev" href="#target-item-2"></a>
<a class="arrow arrow-next" href="#target-item-1"></a>
</div>
</div>
А теперь магия - CSS. В нашем случае SCSS.
.carousel-wrapper {
position: relative;
.carousel-item {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
padding: 25px 50px;
opacity: 0;
transition: all 0.5s ease-in-out;
.arrow {
position: absolute;
top: 0;
display: block;
width: 50px;
height: 100%;
-webkit-tap-highlight-color: rgba(0,0,0,0);
background: url("/carousel-arrow-dark.png") 50% 50% / 20px no-repeat;
&.arrow-prev {
left: 0;
}
&.arrow-next {
right: 0;
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
}
&.light {
color: white;
.arrow {
background: url("/carousel-arrow-light.png") 50% 50% / 20px no-repeat;
}
}
@media (max-width: 480px) {
.arrow, &.light .arrow {
background-size: 10px;
background-position: 10px 50%;
}
}
}
[id^="target-item"] {
display: none;
}
.item-1 {
z-index: 2;
opacity: 1;
}
*:target ~ .item-1 {
opacity: 0;
}
#target-item-1:target ~ .item-1 {
opacity: 1;
}
#target-item-2:target ~ .item-2, #target-item-3:target ~ .item-3 {
z-index: 3;
opacity: 1;
}
}
Вот и все! Добавьте свои картинки стрелочек, картинки слайдов и текст и пользуйтесь!
Спасибо за внимание!
-
Создано 26.05.2015 19:00:00
-
Михаил Русаков
Комментарии (8):
Михаил не работает (
Ответить
Вы точно запятую не забыли?
Ответить
Не, реально не работает. http://jsfiddle.net/sxybc8LL/
Ответить
Я решил попробовать - тоже не вышло(( Потом на profipages сделал
Ответить
...нда...реально не работает!!! Сам разбираться не стал, легче самому по новому сделать! Если Михаил все же появишься здесь у себя на сайте, то может исправишь для своих подписчиков...?
Ответить
Насколько сильно уступает слайдер на CSS тому, что можно сделать на JS?
Ответить
Можно после каждой статьи пример на песочницах (jsfiddle, codepen и т.д.)
Ответить
http://jsfiddle.net/sxybc8LL/ скопировал вставил весь код. РЕАЛЬНО НЕ РАБОТАЕТ!!!
Ответить
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.