Thumbslider Examples

Below are carousel examples with config options. Select a theme for them from the dropdown at the top of this page.

        {
            animator: thumbslider.tweeners.jquery,
            icons:
            {
                left: 'fa fa-chevron-left',
                right: 'fa fa-chevron-right',
                top: 'fa fa-chevron-up',
                bottom: 'fa fa-chevron-down',
                toggle: 'fa fa-navicon'
            },
            rotateDuration: 0.5,
            selectorPosition: 'bottom',
            selectorSize: 0.16,
            thumbSize: 1.8,
            viewerOrientation: 'horizontal',
        }

      

        {
            animator: thumbslider.tweeners.gsap,
            rotateDuration: 0.5,
            rotateEasing: SlowMo.ease.config(0.7, 0.7, false),
            selectorPosition: 'left',
            selectorSize: 0.20,
            thumbSize: 0.8,
            viewerOrientation: 'vertical',
        }

      

        {
            animator: thumbslider.tweeners.gsap,
            icons:
            {
                left: 'fa fa-chevron-left',
                right: 'fa fa-chevron-right',
                top: 'fa fa-chevron-up',
                bottom: 'fa fa-chevron-down',
                toggle: 'fa fa-navicon'
            },
            rotateDuration: 0.5,
            rotateEasing: 'Power3.easeOut',
            selectorDisplay: 'transient',
            selectorPosition: 'top',
            selectorSize: 0.25,
            showSelector: false,
            slideTransition: thumbslider.transitions.fade,
            thumbSize: 1.3,
            viewerOrientation: 'vertical',
        }

      

        {
            animator: thumbslider.tweeners.gsap,
            icons:
            {
                left: 'fa fa-chevron-left',
                right: 'fa fa-chevron-right',
                top: 'fa fa-chevron-up',
                bottom: 'fa fa-chevron-down',
                toggle: 'fa fa-navicon'
            },
            rotateDuration: 0.5,
            selectorDisplay: 'overlay',
            selectorPosition: 'bottom',
            selectorSize: 0.12,
            showThumbContent: false,
            slideTransition: thumbslider.transitions.unstack,
            thumbSize: 1.4,
            viewerOrientation: 'horizontal',
        }