112 lines
2.9 KiB
HTML
112 lines
2.9 KiB
HTML
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||
|
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
||
|
|
<head>
|
||
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||
|
|
<title>Демонстрация слайдера MobilySlider | Материалы сайта RUSELLER.COM</title>
|
||
|
|
<link href="css/default.css" rel="stylesheet" type="text/css" />
|
||
|
|
<script src="js/jquery.js" type="text/javascript"></script>
|
||
|
|
<script src="js/mobilyslider.js" type="text/javascript"></script>
|
||
|
|
<script src="js/init.js" type="text/javascript"></script>
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body>
|
||
|
|
<div id="content">
|
||
|
|
<h1>Демонстрация слайдера MobilySelect</h1>
|
||
|
|
<p class="pd">Пример 1</p>
|
||
|
|
<pre class="code_sample">
|
||
|
|
$('.slider1').mobilyslider();
|
||
|
|
</pre>
|
||
|
|
<div class="slider slider1">
|
||
|
|
<div class="sliderContent">
|
||
|
|
<div class="item">
|
||
|
|
<img src="img/img1.jpg" alt="" />
|
||
|
|
</div>
|
||
|
|
<div class="item">
|
||
|
|
<img src="img/img2.jpg" alt="" />
|
||
|
|
</div>
|
||
|
|
<div class="item">
|
||
|
|
<img src="img/img3.jpg" alt="" />
|
||
|
|
</div>
|
||
|
|
<div class="item">
|
||
|
|
<img src="img/img4.jpg" alt="" />
|
||
|
|
</div>
|
||
|
|
<div class="item">
|
||
|
|
<img src="img/img5.jpg" alt="" />
|
||
|
|
</div>
|
||
|
|
<div class="item">
|
||
|
|
<img src="img/img6.jpg" alt="" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<p class="pd">Пример 2</p>
|
||
|
|
<pre class="code_sample">
|
||
|
|
$('.slider2').mobilyslider({
|
||
|
|
transition: 'vertical',
|
||
|
|
animationSpeed: 500,
|
||
|
|
autoplay: true,
|
||
|
|
autoplaySpeed: 3000,
|
||
|
|
pauseOnHover: true,
|
||
|
|
bullets: false
|
||
|
|
});
|
||
|
|
</pre>
|
||
|
|
<div class="slider slider2">
|
||
|
|
<div class="sliderContent">
|
||
|
|
<div class="item">
|
||
|
|
<img src="img/img1.jpg" alt="" />
|
||
|
|
</div>
|
||
|
|
<div class="item">
|
||
|
|
<img src="img/img2.jpg" alt="" />
|
||
|
|
</div>
|
||
|
|
<div class="item">
|
||
|
|
<img src="img/img3.jpg" alt="" />
|
||
|
|
</div>
|
||
|
|
<div class="item">
|
||
|
|
<img src="img/img4.jpg" alt="" />
|
||
|
|
</div>
|
||
|
|
<div class="item">
|
||
|
|
<img src="img/img5.jpg" alt="" />
|
||
|
|
</div>
|
||
|
|
<div class="item">
|
||
|
|
<img src="img/img6.jpg" alt="" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<p class="pd">Пример 3</p>
|
||
|
|
<pre class="code_sample">
|
||
|
|
$('.slider3').mobilyslider({
|
||
|
|
transition: 'fade',
|
||
|
|
animationSpeed: 800,
|
||
|
|
bullets: true,
|
||
|
|
arrowsHide: false
|
||
|
|
});
|
||
|
|
</pre>
|
||
|
|
<div class="slider slider3">
|
||
|
|
<div class="sliderContent">
|
||
|
|
<div class="item">
|
||
|
|
<img src="img/img1.jpg" alt="" />
|
||
|
|
</div>
|
||
|
|
<div class="item">
|
||
|
|
<img src="img/img2.jpg" alt="" />
|
||
|
|
</div>
|
||
|
|
<div class="item">
|
||
|
|
<img src="img/img3.jpg" alt="" />
|
||
|
|
</div>
|
||
|
|
<div class="item">
|
||
|
|
<img src="img/img4.jpg" alt="" />
|
||
|
|
</div>
|
||
|
|
<div class="item">
|
||
|
|
<img src="img/img5.jpg" alt="" />
|
||
|
|
</div>
|
||
|
|
<div class="item">
|
||
|
|
<img src="img/img6.jpg" alt="" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|