Показать сообщение отдельно
  #3 (permalink)  
Старый 16.03.2015, 10:24
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

piraids,
зачем вам куча плагинов для обыкновенного слайдера ?
<!DOCTYPE html>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  	#test{ overflow: hidden;  }
  	.red { background-color: red; width: 30px; height: 30px; }
  	.green { background-color: green; width: 30px; height: 30px; }
  	table { border-collapse: collapse; border: 0; position: relative; top: 0;}
    .arrow { position: absolute; top: 5%; border: 1px solid; padding: 0 5px; cursor:pointer; }
    .arrow.right { right: 0; }
    .arrow.left { left: 0; }
    .wrap { position: relative; width: 129px; padding: 0 35px; }
    .jspHorizontalBar { display: none; }
  </style>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script>
	$(document).ready(function(){
		var element = $('#test'), table = $('table', element),left = 0, min = element.width() - table.width() ;
      	$('.arrow').click(function(){
          left += $(this).is('.left') ? 32 : -32;
          left < min && (left = min);
          left > 0 && (left = 0);
          table.stop(true,true).animate({left : left},800)
        });
    });
  </script>
</head>

<body>
<!-- вот такой получился пример -->
<div class="wrap">
  	<div class="arrow left">&#9668;</div>
	<div id="test">
        <table>
			<tr>
				<td><div class="red"></div></td>
				<td><div class="green"></div></td>
				<td><div class="red"></div></td>
				<td><div class="green"></div></td>
             	<td><div class="red"></div></td>
               	<td><div class="green"></div></td>
				<td><div class="red"></div></td>
              	<td><div class="green"></div></td>
				<td><div class="red"></div></td>
              	<td><div class="red"></div></td>
				<td><div class="green"></div></td>
				<td><div class="red"></div></td>
				<td><div class="green"></div></td>
             	<td><div class="red"></div></td>
               	<td><div class="green"></div></td>
				<td><div class="red"></div></td>
              	<td><div class="green"></div></td>
				<td><div class="red"></div></td>
       	 	</tr>
     	</table>
  	</div>
  	<div class="arrow right">&#9658;</div>
</div>
</body>
</html>
Ответить с цитированием