JQuery Карусель и JQuery UI Слайдер - PullRequest
Новая
       20

JQuery Карусель и JQuery UI Слайдер

2 голосов
/ 06 января 2011

Можно ли использовать ползунок JQuery UI с плагином JQuery Carousel?

http://jqueryui.com/demos/slider/

http://sorgalla.com/projects/jcarousel/

Я думаю, это будет связано с обратными вызовами в событии change плагина Slider, но я не знаю, как его связать.

Мой jquery на этом этапе: 

$(document).ready(function() {
    jQuery('#tiles').jcarousel({
        //auto: 2,
        wrap: 'last'
    });

    $( "#slider" ).slider({
        change: function(event, ui) {
        // callback when the slide event fires.         
        }
    });


});

Это вообще возможно? Я бы лучше сам все понял, но понятия не имею, с чего начать.

Я кратко искал слайдер с функциональностью, подобной карусели, но с треском провалился.

Спасибо ~

изменить обновленный код: 

jQuery(document).ready(function() {

    jQuery("#tiles").jcarousel({
        //auto: 2,
        scroll: 1,
        buttonNextHTML: null,
        buttonPrevHTML: null
    });

    $( "#slider" ).slider({
        min: 0,
        max:4,
        change: function(event, ui) {
            alert(ui.value);
            jQuery('#tiles').scroll(jQuery.jcarousel.intval(ui.value));             
        }
    });

});

предположительно мне нужно заранее знать, сколько будет предметов, чтобы установить ползунок мин / макс?

еще раз спасибо

Ответы [ 3 ]

2 голосов
/ 06 января 2011

Прочитайте исходный код этой страницы - http://sorgalla.com/projects/jcarousel/examples/static_controls.html

В вашем слайдере вы можете использовать: 

$( "#slider" ).slider({
    change: function(event, ui) {            
        carousel.scroll(jQuery.jcarousel.intval(ui.value));        
    }
});

ОБНОВЛЕНИЕ: 

function mycarousel_initCallback(carousel) {
   $( ".slider" ).bind( "slidechange", function(event, ui) {
  carousel.scroll(ui.value);
   });
};

jQuery(document).ready(function() {
  jQuery("#mycarousel").jcarousel({
    scroll: 1,
    initCallback: mycarousel_initCallback,
    buttonNextHTML: null,
    buttonPrevHTML: null
  });

  $('.slider1').slider({
    value: 1,
    min:1,
    max:6,              
  }); 

});
1 голос
/ 06 января 2011

Вы хотите добиться чего-то подобного? ( ссылка )

Есть учебник с исходным кодом, измените свой CSS / графику, и у вас все будет хорошо; -)

Edit: Вот более мощный слайдер, с богатыми возможностями :) ( ссылка )

0 голосов
/ 06 января 2011

Казалось бы 

$( "#slider" ).slider({
    min:1,
    max:10,
    slide: function(event, ui) {
        //$('#tiles').scroll(jQuery.jcarousel.intval(ui.value));   
        jQuery('#tiles').jcarousel('scroll',ui.value); 
    }
});

работает. Не уверен, что это ~ лучший ~ способ, но, похоже, он добился цели

...