Помогите найти пример слайдера
Здравствуйте!
Помогите найти слайдер на JS не на JQuery Пример https://www.templatemonster.com/blog...ery/index.html Нужен на чистом JavaScript Буду очень признателен. Спасибо всем! |
https://www.youtube.com/watch?v=FgrCb3okKhY
полно примеров, в том числе в этом форуме |
обратите внимание на пример который прислал я и ту ссылку которую вы дали. прошу пример именно такой карусели как в примере и только на чистом JavaScript
Спасибо |
чем пример плох? слайдеру все равно что крутить блоки или картинки, уж извините верстку в точности как у вас врядли вы найдете, но если css хотябы знаете я проблем вообще не вижу.
|
Цитата:
|
Форумчане, в любом случае, если кто то знает или видел подобный пример на js прошу не проходить мимо. киньте ссылку на пример, а в коде я сам разберусь и изменю если надо.
Спасибо еще раз всем!!! |
bgraf,
а самому написать две функции next и prev,одна вставить вставить последний блок в начало, вторая переместить первый блок в конец, вот и весь слайдер. |
слайдер проще простого, на js и css3
:write:
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
* { box-sizing: border-box;margin: 0;padding: 0; }
.slider {
width: 300px;
height: 170px;
overflow: hidden;
position: relative;
}
.slider__arrow {
width: 20px;
height: 20px;
position: absolute;
top: 50%;
background-color: #3294FD;
text-align: center;
line-height: 20px;
color: #fff;
z-index: 9;
cursor: pointer;
}
.slider__left { left: 0; }
.slider__right { right: 0; }
.slider__container {
width: 900px;
height: 170px;
position: absolute;
top: 0;
left: 0;
}
.slider__item {
width: 100px;
height: 170px;
line-height: 170px;
background: pink;
display: block;
float: left;
text-align: center;
}
.slider__item:hover {
background-color: #F7F7F7;
}
.slider__arrow.hide{
display: none;
}
.slider {
margin: 20px auto;
}
.slider__container.animate{
transition: left .8s;
}
.slider__container.left{
left: -100px;
}
</style>
<script>
window.addEventListener("DOMContentLoaded", function() {
var left = document.querySelector(".slider__left"),
right = document.querySelector(".slider__right"),
container = document.querySelector(".slider__container"),
timer;
right.addEventListener("click", function() {
window.clearTimeout(timer);
var last = container.querySelector(".slider__item:last-child");
var first = container.querySelector(".slider__item:first-child");
container.classList.remove("animate");
if (!container.classList.contains("left")) {
container.classList.add("left");
container.insertBefore(last, first);
}
timer = window.setTimeout(function() {
container.classList.add("animate");
container.classList.remove("left")
},30)
});
left.addEventListener("click", function() {
window.clearTimeout(timer);
var first = container.querySelector(".slider__item:first-child");
container.classList.remove("animate");
if (container.classList.contains("left")) {
container.classList.remove("left");
container.appendChild(first)
}
timer = window.setTimeout(function() {
container.classList.add("animate");
container.classList.add("left")
},30)
})
});
</script>
</head>
<body>
<div class="slider">
<div class="slider__arrow slider__left"><</div>
<div class="slider__arrow slider__right">></div>
<div class="slider__container">
<div class="slider__item">1</div>
<div class="slider__item">2</div>
<div class="slider__item">3</div>
<div class="slider__item">4</div>
<div class="slider__item">5</div>
<div class="slider__item">6</div>
<div class="slider__item">7</div>
<div class="slider__item">8</div>
<div class="slider__item">9</div>
</div>
</div>
</body>
</html>
|
Рони, как я понял, ему по большей части верстка как в примере нужна.
|
j0hnik,
вынести кнопки управления в другое место - не проблема, скрипт от этого не изменится. |
| Часовой пояс GMT +3, время: 09:16. |