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

Kuzyo · February 28, 2013

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

Зашел в тупик со скриптом для слайдера. Здесь инструкция 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');

}

});

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

npofopr · February 28, 2013

Лучше покажите, где пробуете.

Kuzyo · February 28, 2013


<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>

Sign In

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

Question

Kuzyo

Link to comment

Share on other sites

2 answers to this question

Recommended Posts

npofopr

Link to comment

Share on other sites

Kuzyo

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information