AnythingSlider thumbnail carousel

Question

Is there a way to connect slider and carousel with it's thumbnails (created by navigationFormatter or external) so that when i move to next slide using slider's controls, and this slide's thumbnail isn't in a carousel's current page, carousel slides to the next page? And is there a way to make slider expand not only horizontally, but both horizontally and vertically keeping proportions?

Answer 1

check out the documentation for the navigationSize option. There are two code examples there that allow you to choose when to move the carousel; before or after the slide changes.

In order to get the slider to change dimensions both horizontally and vertically, define the size (both width and height) of the panel in the css and set the resizeContents option to false.

Here is the second demo from the main demo page, extracted out into a jsFiddle demo using this code:

CSS

/* starting slider dimensions; it gets changed to match the panels */
#slider { width: 800px; height: 390px; list-style: none; }
#slider .panel1 { width: 500px; height: 350px; }
#slider .panel2 { width: 450px; height: 420px; }
#slider .panel3 { width: 680px; height: 317px; }
/* With no specific size, the slide defaults to wrapper size; except in IE7,
 it needs a width defined, so set to 100% */
#slider .panel4 { width: 100%; }
#slider .panel5 { width: 680px; height: 317px; }
#slider .panel6 { width: 450px; height: 300px; }

Script

$('#slider').anythingSlider({
    // fade mode
    mode: 'f',
    // If true, solitary images/objects in the panel will expand to fit the viewport
    resizeContents: false,
    // Set this to the maximum number of visible navigation tabs; false to disable
    navigationSize: 3,
    // Format navigation labels with text
    navigationFormatter: function (index, panel) {
        return ['Recipe', 'Quote', 'Image', 'Quote #2', 'Image #2'][index - 1];
    },
    onSlideBegin: function (e, slider) {
        // keep the current navigation tab in view
        slider.navWindow(slider.targetPage);
    }
});