Делаю слайдер своими руками. Пока все получалось, слайды переключаются, всплывающий текст - работает.
А вот с анимацией пока туго. Помогите анимировать данный слайдер. Собственно, хотелось бы получить что-то простое, например старый слайд уезжает влево, а новый появляется справа. Код:
.service .slider__checker {
position: absolute;
visibility: hidden;
}
.service .slider__label {
cursor: pointer;
display: inline-block;
margin-right: 20px;
padding: 5px 10px;
border: 1px solid white;
border-radius: 50px;
}
.service .slider__item {
display: none;
width: 100%;
margin-bottom: 10px;
}
#hand {
position: absolute;
top: 33%;
right: 67%;
width: 80px;
height: 90px;
border: 1px solid #aaa;
background: url('http://facte.ru/wp-content/uploads/2011/03/63d.jpg');
}
#head {
position: absolute;
top: 33%;
right: 10%;
width: 80px;
height: 90px;
border: 1px solid #aaa;
background: url('http://facte.ru/wp-content/uploads/2011/03/63d.jpg');
}
#foot {
position: absolute;
top: 33%;
right: 40%;
width: 80px;
height: 90px;
border: 1px solid #aaa;
background: url('http://facte.ru/wp-content/uploads/2011/03/63d.jpg');
}
.service .help {
display: none;
position: absolute;
top: 20px;
left: -20px;
padding: 10px;
width: auto;
height: auto;
background: #222;
border-radius: 10px;
color: #fff;
font-size: 18px;
}
div:hover>.help {
display: block;
}
.service .slider__checker:nth-child(1):checked~.slider__items>.slider__item:nth-child(1) {
display: block;
}
.service .slider__checker:nth-child(1):checked~.slider__labels>.slider__label:nth-child(1) {
background: white;
}
.service .slider__checker:nth-child(2):checked~.slider__items>.slider__item:nth-child(2) {
display: block;
}
.service .slider__checker:nth-child(2):checked~.slider__labels>.slider__label:nth-child(2) {
background: white;
}
.slider__checker:nth-child(3):checked~.slider__items>.slider__item:nth-child(3) {
display: block;
}
.slider__checker:nth-child(3):checked~.slider__labels>.slider__label:nth-child(3) {
background: white;
}
<div class="service">
<div class="slider">
<input class="slider__checker" type="radio" name="slides" id="#checker1" checked>
<input class="slider__checker" type="radio" name="slides" id="#checker2">
<input class="slider__checker" type="radio" name="slides" id="#checker3">
<div class="slider__items">
<div class="slider__item">
<img src="http://www.call4.ru/wp-content/uploads/2013/12/porsche_911_gt3-1920x1080.jpg" alt="..." width="large">
<div id="head">
16 bit
<div class="help">
<b>Подсказка:</b>
<p>Это голова</p>
</div>
</div>
<div id="hand">
32 bit
<div class="help">
<b>Подсказка:</b>
<p>Это рука</p>
<a href="http://google.com">Заказать</a>
</div>
</div>
<div id="foot">
64 bit
<div class="help">
<b>Подсказка:</b>
<p>Это рука</p>
<a href="http://google.com">Заказать</a>
</div>
</div>
</div>
<div class="slider__item">
<img src="http://autospynews.net/wp-content/uploads/2015/07/257833bbf5f552057486de1c87996eee_large.jpeg" alt="..." width="large">
</div>
<div class="slider__item">
<img src="http://s1.cdn.autoevolution.com/images/testdrive/gallery/2014-porsche-911-turbo-s-review-2014_55.jpg" alt="..." width="large">
</div>
</div>
<div class="slider__labels">
<label class="slider__label" for="#checker1">Синий</label>
<label class="slider__label" for="#checker2">Зеленый</label>
<label class="slider__label" for="#checker3">Метилик</label>
</div>
</div>
</div>