jQuery内容DIV幻灯片

Question

I wanted to make the

(A) http://jqueryui.com/demos/slider/#side-scroll

(B) http://jqueryui.com/demos/slider/steps.html

Hey all,

I am building a customize slider.

I wanted the functionality of A and B mixed both

1) Boxes in A is going to be in different Tag/Category, so for example there's going to be Cat, Dog and Snake category.

2) Now i wanted when i do click on CAT the slider is going to slide that particular cartigory thats associated with the Tag, etc

3) If i do slide to CAT tag, it will just snap and the catagory will show up

help will be good, as i continue try figuring it out, hope im not confusing you guys. or

OR THIS:

http://jqueryui.com/demos/slider/#hotelrooms and http://jqueryui.com/demos/slider/#side-scroll

instead when u click 3, it slides to 3CONTENT when u lick 4 it SLIDES to 4 CONTENT

Answer 1

Do you mean something like this? I have taken your reference (A) as an example.

$(".scroll-content div").click(function () {
                var pos = $(this).position();
                $('.scroll-bar a').animate({ left: pos.left }, 'slow');
            });

Check in action here .

Update1: I updated the sample in above link, if that helps.

Update 2:

Sorry, I tried a bit but couldn't make it work entirely but here is something I have:

$(function(){
 $("div#makeMeScrollable").smoothDivScroll();
var ticker;
           $('.scrollingHotSpotRight').mouseover(function () {
               var counter = $(".scroll-bar").slider("value");
               var leftval = 0;
               ticker = setInterval(function () {
                   $(".scroll-bar").slider("value", counter);
                   counter++;
               }, 35);
           });
           $('.scrollingHotSpotRight').mouseout(clearStop);
           $('.scrollingHotSpotLeft').mouseover(function () {
               var counter = $(".scroll-bar").slider("value");
               ticker = setInterval(function () {
                   $(".scroll-bar").slider("value", counter);
                   counter--;
               }, 35);
           });
           $('.scrollingHotSpotLeft').mouseout(clearStop);

           function clearStop() {
               window.clearInterval(ticker);
           }
});

Answer 2

All you need to do is utilize the step option in the scrollbar implementation, if I understand your question correctly.

//Modified from the Slider scrollbar demo
var scrollbar = $( ".scroll-bar" ).slider({
        slide: function( event, ui ) {
            if ( scrollContent.width() > scrollPane.width() ) {
                scrollContent.css( "margin-left", Math.round(
                    ui.value / 100 * ( scrollPane.width() - scrollContent.width() )
                ) + "px" );
            } else {
                scrollContent.css( "margin-left", 0 );
            }
        },
        step: 50 //<---This
    });

Or are you looking for someone to write the entire functionality of what you're asking for?