Javascript-форум - Помогите найти пример слайдера

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - Помогите найти пример слайдера (https://javascript.ru/forum/dom-window/69627-pomogite-najjti-primer-slajjdera.html)

Помогите найти пример слайдера

Здравствуйте!
Помогите найти слайдер на JS не на JQuery
Пример https://www.templatemonster.com/blog...ery/index.html
Нужен на чистом JavaScript
Буду очень признателен.
Спасибо всем!

https://www.youtube.com/watch?v=FgrCb3okKhY
полно примеров, в том числе в этом форуме

обратите внимание на пример который прислал я и ту ссылку которую вы дали. прошу пример именно такой карусели как в примере и только на чистом JavaScript
Спасибо

чем пример плох? слайдеру все равно что крутить блоки или картинки, уж извините верстку в точности как у вас врядли вы найдете, но если css хотябы знаете я проблем вообще не вижу.

Цитата:

Сообщение от j0hnik (Сообщение 457827)

Спасибо Вам за ответы.

Форумчане, в любом случае, если кто то знает или видел подобный пример на 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,
вынести кнопки управления в другое место - не проблема, скрипт от этого не изменится.

Цитата:

Сообщение от рони (Сообщение 457873)

j0hnik,
вынести кнопки управления в другое место - не проблема, скрипт от этого не изменится.

надеюсь твой пример ему поможет, и ты не напрасно тратил время.

j0hnik,
вопрос в другом: можно ли как-то иначе сделать анимацию на классах? может есть способ без window.setTimeout?

~~а transition не канает?~~
не про то подумал

Цитата:

Сообщение от j0hnik

а transition не канает?

не понимаю о чём ты

Рони , я свою работу доделаю сейчас, попробую на классах сделать.

слайдер на js

Цитата:

Сообщение от j0hnik

попробую на классах сделать.

ок, будем посмотреть!
: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 1.2s cubic-bezier(.455, .03, .515, .955);
}
.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");
    right.addEventListener("click", function() {
        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);
        }
            document.documentElement.clientWidth;
            container.classList.add("animate");
            container.classList.remove("left")

    });
    left.addEventListener("click", function() {
        var first = container.querySelector(".slider__item:first-child");
        container.classList.remove("animate");
        if (container.classList.contains("left")) {
            container.classList.remove("left");
            container.appendChild(first)
        }
            document.documentElement.clientWidth;
            container.classList.add("animate");
            container.classList.add("left")

    })
});
  </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>

все ок!, у тебя тоже опера должна быть, разработчик!
у меня даже мобильный топ, самые проблемные браузеры. ie. и safari, там порой такие чудеса творятся! :cray:

j0hnik,
:dance: :thanks:

<html>
<head>
	<style>
		.carousel{
			clear: both;
			position: relative;
			margin: auto;
			border: 1px solid grey;
			width: 318px;
			height: 106px;
			overflow: hidden;
		}
		.row{
			clear: both;
			left: -33.3%;
			position: relative;
			width: 2000px;
			overflow: hidden;
		}
		.item{
			position: relative;
			float: left;
			width: 5%;
			height: 100px;
			outline: 1px solid grey;
			margin: 3px;
			transition: transform .3s;
		}
		.knop{
			width: 145px;
			height: 30px;
			margin: auto;
		}
		.pusk{
			margin: 10px;
			border: 1px solid grey;
			width: 50px;
			height: 20px;
			text-align: center;
			float: left;
		}
	</style>
</head>

<body>
	<div class="knop">
		<div class="pusk left">Left</div>
		<div class="pusk right">Right</div>
	</div>
	<div class="carousel">
		<div class="row">
			<div class="item">1</div>
			<div class="item">2</div>
			<div class="item">3</div>
			<div class="item">4</div>
			<div class="item">5</div>
			<div class="item">6</div>
			<div class="item">7</div>
			<div class="item">8</div>
			<div class="item">9</div>
			<div class="item">10</div>
		</div>
	</div>
	<script>
		var i = 0;
		var row = document.querySelector('.row');
		var item = document.querySelectorAll('.item');
		var w = item[0].clientWidth + parseFloat(getComputedStyle(item[0]).marginLeft)*2;
		document.querySelector('.right').onclick = function(){
			i--;
			var first = document.querySelector('.item:first-child');
			var last = document.querySelector('.item:last-child');
			row.appendChild(first);
			[].forEach.call(item, function(el){
				el.style.cssText = 'right:'+w*i+'px; transform: translateX('+w*i+'px);';
			});
		};
		document.querySelector('.left').onclick = function(){
			i++;
			var first = document.querySelector('.item:first-child');
			var last = document.querySelector('.item:last-child');
			row.insertBefore(last, first);
			[].forEach.call(item, function(el){
				el.style.cssText = 'right:'+w*i+'px; transform: translateX('+w*i+'px);';
			});
		};
	</script>
</body>
</html>

колдовал колдовал через классы, плавно нифига не получается(если быстро кликать то-же самое что у тебя), в итоге забил и сделал как-то так.

j0hnik,
:victory:

Парни, спасибо огромное за помощь!

Интересные решения :write:

у меня на странице таких слайдеров должно быть 3.
как сделать так чтобы не переписывать одно и тоже три раза для разных слайдеров, ну типо сделать как то так чтобы динамично распознавалось на какой слайдер жмут вперед назад.
спасибо

рони, пожалуйста подскажите как сделать ????

bgraf,

<!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 1.2s cubic-bezier(.455, .03, .515, .955);
}
.slider__container.left{
  left: -100px;
}

  </style>

  <script>
window.addEventListener("DOMContentLoaded", function() {
    [].forEach.call( document.querySelectorAll('.slider'), function(slider) {
    var left = slider.querySelector(".slider__left"),
        right = slider.querySelector(".slider__right"),
        container = slider.querySelector(".slider__container");
    right.addEventListener("click", function() {
        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);
        }
            document.documentElement.clientWidth;
            container.classList.add("animate");
            container.classList.remove("left")

    });
    left.addEventListener("click", function() {
        var first = container.querySelector(".slider__item:first-child");
        container.classList.remove("animate");
        if (container.classList.contains("left")) {
            container.classList.remove("left");
            container.appendChild(first)
        }
            document.documentElement.clientWidth;
            container.classList.add("animate");
            container.classList.add("left")

    })
    });
});
  </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>
<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>
<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>

Спасибо Вам огромное. Много нового для вынес из Вашего примера. Век живи век учись!!!