Skip to content

Commit

Permalink
Update slider
Browse files Browse the repository at this point in the history
  • Loading branch information
@itchief
itchief committed Dec 1, 2019
1 parent be2624e commit 8f9e170
Show file tree
Hide file tree
Showing 3 changed files with 222 additions and 270 deletions.
42 changes: 21 additions & 21 deletions slider/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,33 +10,33 @@

<body>

<div id="slider" class="slider">
<ol class="slider__indicators">
<li class="slider__indicator slider__indicator_active" data-slide-to="0"></li>
<li class="slider__indicator" data-slide-to="1"></li>
<li class="slider__indicator" data-slide-to="2"></li>
<li class="slider__indicator" data-slide-to="3"></li>
</ol>
<div class="slider__items">
<div class="slider__item slider__item_active">
<div style="height: 250px; background: orange;"></div>
</div>
<div class="slider__item">
<div style="height: 250px; background: green;"></div>
</div>
<div class="slider__item">
<div style="height: 250px; background: violet;"></div>
</div>
<div class="slider__item">
<div style="height: 250px; background: coral;"></div>
<div class="slider">
<div class="slider__wrapper">
<div class="slider__items">
<div class="slider__item">
<div style="height: 250px; background: orange;"></div>
</div>
<div class="slider__item">
<div style="height: 250px; background: green;"></div>
</div>
<div class="slider__item">
<div style="height: 250px; background: violet;"></div>
</div>
<div class="slider__item">
<div style="height: 250px; background: coral;"></div>
</div>
</div>
</div>
<a class="slider__control slider__control_prev" href="#" role="button"></a>
<a class="slider__control slider__control_next" href="#" role="button"></a>
<a class="slider__control slider__control_next slider__control_show" href="#" role="button"></a>
</div>

<script src="main.js"></script>

<script>
slideShow('.slider', {
isAutoplay: true
});
</script>
</body>

</html>
122 changes: 39 additions & 83 deletions slider/main.css
View file
Original file line number Diff line number Diff line change
@@ -1,94 +1,67 @@
/*!
* Slider (https://github.com/itchief/how-to/tree/master/slider)
* Copyright 2018 Alexander Maltsev
* Copyright 2019 Alexander Maltsev
* Licensed under MIT (https://github.com/itchief/how-to/blob/master/LICENSE)
* Forked from Bootstrap, licensed MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
*/

/* стили для элемента body */
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif,
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
color: #fff;
height: 3000px;
}

/* стили основного контейнера слайдера */
.slider {
/* устанавливаем относительное позиционирование элементу */
position: relative;
overflow: hidden;
max-width: 600px;
margin-left: auto;
margin-right: auto;
}

.slider__items {
/* устанавливаем относительное позиционирование элементу */
/* стили для обёртки, в которой заключены слайды */
.slider__wrapper {
position: relative;
/* устанавливаем элементу ширину, равную 100% */
width: 100%;
overflow: hidden;
}

.slider__item {
/* устанавливаем относительное позиционирование элементу */
position: relative;
/* отключаем по умолчанию отображение всех слайдов */
display: none;
/* устанавливаем элементу ширину, равную 100% */
width: 100%;
/* длительность анимации трансформации */
/* стили для контейнера слайдов */
.slider__items {
display: flex;
transition: transform 0.6s ease;
/* не показывать обратную сторону трансформируемого элемента */
backface-visibility: hidden;
}

.slider__item_active,
.slider__item_next,
.slider__item_prev {
/* отображаем слайд, если он имеет один из этих классов */
display: block;
}

.slider__item_next,
.slider__item_prev {
/* устанавливаем абсолютное позиционирование для элемента, на который будет сменяться слайд (на время трансформации) */
position: absolute;
/* устанавливаем положение элемента, т.е. координату top */
top: 0;
}

.slider__item_next.slider__item_left,
.slider__item_prev.slider__item_right {
/* сдвигаем элемент на 0 по горизонтали */
transform: translateX(0);
}

.slider__item_next,
.slider__item_right.slider__item_active {
/* сдвигаем элемент на 100% по горизонтали */
transform: translateX(100%);
}

.slider__item_prev,
.slider__item_left.slider__item_active {
/* сдвигаем элемент на -100% по горизонтали */
transform: translateX(-100%);
/* стили для слайдов */
.slider__item {
flex: 0 0 100%;
max-width: 100%;
}

/* элементы управления (назад и вперёд) слайдером */

/* стили для кнопок "вперед" и "назад" */
.slider__control {
position: absolute;
top: 0;
bottom: 0;
top: 50%;
display: flex;
align-items: center;
justify-content: center;
width: 15%;
width: 40px;
color: #fff;
text-align: center;
opacity: 0.5;
height: 50px;
transform: translateY(-50%);
background: rgba(0, 0, 0, 0.5);
}

.slider__control:hover,
.slider__control:focus {
color: #fff;
text-decoration: none;
outline: 0;
opacity: .9;
opacity: 0.9;
}

.slider__control_prev {
Expand All @@ -100,7 +73,7 @@ body {
}

.slider__control::before {
content: '';
content: "";
display: inline-block;
width: 20px;
height: 20px;
Expand All @@ -116,8 +89,7 @@ body {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E");
}

/* индикаторы слайдера */

/* стили для индикаторов */
.slider__indicators {
position: absolute;
right: 0;
Expand All @@ -130,41 +102,25 @@ body {
margin-right: 15%;
margin-left: 15%;
list-style: none;
margin-top: 0;
margin-bottom: 0;
}

.slider__indicator {
position: relative;
.slider__indicators li {
box-sizing: content-box;
flex: 0 1 auto;
width: 30px;
height: 3px;
height: 4px;
margin-right: 3px;
margin-left: 3px;
text-indent: -999px;
cursor: pointer;
background-color: rgba(255, 255, 255, 0.5);
border-radius: 6px;
background-clip: padding-box;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
}

.slider__indicator::before {
position: absolute;
top: -10px;
left: 0;
display: inline-block;
width: 100%;
height: 10px;
content: "";
}

.slider__indicator::after {
position: absolute;
bottom: -10px;
left: 0;
display: inline-block;
width: 100%;
height: 10px;
content: "";
}

.slider__indicator_active {
.slider__indicators li.active {
background-color: #fff;
}
}
Loading

0 comments on commit 8f9e170

Please sign in to comment.