Форум

kamlayka · #1 (**permalink**) 24.10.2016, 11:25

Пытаюсь сделать слайдер на JS. Есть код. Но не знаю как исправить баг: когда пролистнешь слайдер в одну сторону, а потом в другую, то на предыдущую позицию он не возвращается, а пролистывается дальше. Хелп)

<div class="spot" id="otkr2">&nbsp;
<div class="move" onclick="var list = document.getElementById('slider');  b = list.lastElementChild; list.insertBefore(b.previousElementSibling, list.children[0]);">
<p class="str">&lt;</p>
</div>

<div class="container">
<div class="slide" id="slider">
<div>text1</div>
<div>text2</div>
<div>text3</div>
<div>text4</div>
</div>
</div>

<div class="move" onclick="var list = document.getElementById('slider');  b = list.firstElementChild; list.insertBefore(b.nextElementSibling, list.children[0]);">
<p class="str">&gt;</p>
</div>
</div>

ksa · #2 (**permalink**) 24.10.2016, 11:45

kamlayka, оно?

<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=windows-1251' />
<!--
<script src='http://code.jquery.com/jquery-latest.js'></script>
<script src="https://code.angularjs.org/1.3.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.9/angular-route.js"></script>
-->
<style type='text/css'>
</style>
<script type='text/javascript'>
function left(){
	var list = document.getElementById('slider');  
	list.appendChild(list.firstElementChild);
};
function right(){
	var list = document.getElementById('slider');  
	list.insertBefore(list.lastElementChild, list.firstElementChild);
};
</script>
</head>
<body>
<div class="spot" id="otkr2">&nbsp;
<div class="move" onclick="left()">
	<p class="str">&lt;</p>
</div>
<div class="container">
	<div class="slide" id="slider">
		<div>text1</div>
		<div>text2</div>
		<div>text3</div>
		<div>text4</div>
	</div>
</div>
<div class="move" onclick="right()">
	<p class="str">&gt;</p>
</div>
</div>
</body>
</html>

рони · #3 (**permalink**) 24.10.2016, 11:47

kamlayka,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  #slider{
    width: 200px;
    height: 100px;
    overflow: hidden;
    position: relative;
  }
  #slider > div{
    width: 200px;
    height: 100px;
    position: absolute;
    background-color:  #FFFFFF;
  }

  </style>

</head>

<body>
<div class="spot" id="otkr2">&nbsp;
<div class="move" onclick="var list = document.getElementById('slider'); list.insertBefore(list.lastElementChild,list.firstElementChild);">
<p class="str">&lt;</p>
</div>

<div class="container">
<div class="slide" id="slider">
<div>text1</div>
<div>text2</div>
<div>text3</div>
<div>text4</div>
</div>
</div>

<div class="move" onclick="var list = document.getElementById('slider'); list.appendChild(list.firstElementChild);">
<p class="str">&gt;</p>
</div>
</div>


</body>
</html>

рони · #4 (**permalink**) 24.10.2016, 11:49

ksa,

kamlayka · #5 (**permalink**) 24.10.2016, 12:47

Благодарю, вы - мои герои))

ksa · #6 (**permalink**) 24.10.2016, 14:14

рони, я раньше тебя встаю.

Форум

Справочник

Discord чат

Курсы javascript