Як зробити слайдер на чистому css3 без використання jаvascript.

Відео: Створюємо CSS slider на весь екран

Всім привіт! Сьогодні я покажу, як можна створити слайдер на чистому CSS3 без використання jаvascript.

Бувають випадки, коли ми не можемо використовувати jаvascript, але нам потрібно зробити слайдер. Ось тут і можна скористатися наявними можливостями CSS3.

Відео: Слайдер на CSS

Отже, ось структура

class="Carousel-wrapper"style="height:400px-"gt; 
id="Target-item-1"gt; 
id="Target-item-2"gt; 
id="Target-item-3"gt; 
class="Carousel-item item-1"gt; 
 Item 1 
 Content goes here. 
class="Arrow arrow-prev"href="# Target-item-3"gt; 
class="Arrow arrow-next"href="# Target-item-2"gt; 
 
class="Carousel-item item-2 light"style="background-color: royalblue-"gt; 
 Item 2 
 Content goes here. 
class="Arrow arrow-prev"href="# Target-item-1"gt; 
class="Arrow arrow-next"href="# Target-item-3"gt; 
 
class="Carousel-item item-3"gt; 
 Item 3 
 Content goes here. 
class="Arrow arrow-prev"href="# Target-item-2"gt; 
class="Arrow arrow-next"href="# Target-item-1"gt;

А тепер магія - CSS. У нашому випадку SCSS.

.carousel-wrapper { 
 position: relative- 
.carousel-item { 
 position: absolute- 
 top:0- 
 bottom:0- 
 left:0- 
 right:0- 
 padding:25px50px- 
 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.jpg")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 
 } 
}