Jump to content
  • 0

Скрипт для слайдера


Kuzyo
 Share

Question

Здравствуйте. Я только учусь поэтому заранее прошу извинение за возможную глупость вопроса )))

Зашел в тупик со скриптом для слайдера. Здесь инструкция http://jqueryfordesigners.com/slider-gallery/ по интеграции слайдера, все получилось так как надо(внешний вид - ползунок, стрелки и т.д), но к моему большому разочарованию ползунок двигается, перещелкивается куда надо, а картинки не двигаются. Вот скрипт который использую:

(window).ready(function () {

$('div.sliderGallery').each(function () {

var ul = $('ul', this);

var productWidth = ul.innerWidth() - $(this).outerWidth();

var slider = $('.slider', this).slider({

handle: '.handle',

minValue: 0,

maxValue: productWidth,

slide: function (ev, ui) {

ul.css('left', '-' + ui.value + 'px');

},

stop: function (ev, ui) {

ul.animate({ 'left' : '-' + ui.value + 'px' }, 500, 'linear');

}

});

});

});

Помогите, пожалуйста, найти проблему. Спасибо

Link to comment
Share on other sites

2 answers to this question

Recommended Posts

  • 0


<div class="client-slider decor-shining">
<hr class="separator">
<hr>
<h2>Our clients</h2>

<div class="sliderGallery">
<ul class="items">
<li>
<img src="image/img_client_coffee.jpg" alt="coffee">
</li>
<li>
<img src="image/img_client_happy.jpg" alt="happy">
</li>
<li>
<img src="image/img_client_burning.jpg" alt="burning">
</li>
<li>
<img src="image/img_client_law-agency.jpg" alt="law-agency">
</li>
<li>
<img src="image/img_client_marrige.jpg" alt="marriage">
</li>
<li>
<img src="image/img_client_pure-co.jpg" alt="pure-co">
</li>
<li>
<img src="image/img_client_simplex.jpg" alt="simplex">
</li>
<li>
<img src="image/img_client_ws.jpg" alt="ws">
</li>
</ul>
<div class="slider">
<!-- the handler to action the slide -->
<div class="handle"></div>
<!-- labels appear against the slider, as pointers to the user -->

</div>
</div>
</div>

Тут подключение, весь мой head

<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>main</title>

<link rel="stylesheet" type="text/css" href="css/main.css" media="all">

<script type='text/javascript' src="js/jquery-1.8.3.min.js"></script>
<!—- спливаюче меню—-->
<script type="text/javascript" charset="utf-8">
$(function(){
$('.services,.submenu-1,.portfolio, .threeD-objects').hover (function (){
$(this).children('ul').stop(false,true).fadeIn (100);
},function (){
$(this).children('ul').stop(false,true).fadeOut (100);
});
});
</script>
<!—--головний слайдер—->
<script type='text/javascript' src="js/jquery.slides.min.js"></script>
<script type='text/javascript'>
$(function(){
$("#slides").slidesjs();
});
</script>
<!—-слайдер клієнтів——>
<script src="js/jquery.dimensions.js" type="text/javascript"></script>
<script src="js/ui.mouse.js" type="text/javascript"></script>
<script src="js/ui.slider.js" type="text/javascript"></script>
<script type="text/javascript">
$(window).ready(function () {
$('div.sliderGallery').each(function () {
var ul = $('ul', this);
var productWidth = ul.innerWidth() - $(this).outerWidth();

var slider = $('.slider', this).slider({
handle: '.handle',
minValue: 0,
maxValue: productWidth,
slide: function (ev, ui) {
ul.css('left', '-' + ui.value + 'px');
},
stop: function (ev, ui) {
ul.animate({ 'left' : '-' + ui.value + 'px' }, 500, 'linear');
}
});
});
});
</script>

</head>

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy