Управляйте Flexslider из внешнего элемента.

У меня есть Flexislider, которым я хотел бы управлять снаружи элемента. Я пробовал это:

var myslider = $('.slider').flexslider({
    animation: 'slide'
});

$('button').click(function () {
    myslider.flexAnimate(3)    //Function: Move slider - (target, pause) parameters
});

Но это возвращает TypeError: Object [object Object] has no method 'flexAnimate'

Затем я наткнулся на этот поток (https://github.com/woothemes/FlexSlider/issues/125), который указывает, что это правильный метод:

$('button').click(function () {
    myslider.flexslider(3)
});

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

Думаю, мне интересно, как получить доступ к API слайдера, как указано в документах, из-за пределов элемента слайдера.

slider                        //Object: The slider element itself
slider.container              //Object: The ul.slides within the slider
slider.slides                 //Object: The slides of the slider
slider.count                  //Int: The total number of slides in the slider
slider.currentSlide           //Int: The slide currently being shown
slider.animatingTo            //Int: Useful in .before(), the slide currently animating to
slider.animating              //Boolean: is slider animating?
slider.atEnd                  //Boolean: is the slider at either end?
slider.manualPause            //Boolean: force slider to stay paused during pauseOnHover event
slider.controlNav             //Object: The slider controlNav
slider.directionNav           //Object: The slider directionNav
slider.controlsContainer      //Object: The controlsContainer element of the slider
slider.manualControls         //Object: The manualControls element of the slider
slider.flexAnimate(target)    //Function: Move slider - (target, pause) parameters
slider.pause()                //Function: Pause slider slideshow interval
slider.resume()               //Function: Resume slider slideshow interval
slider.canAdvance(target)     //Function: returns boolean if slider can advance - (target) parameter
slider.getTarget(dir)         //Function: get target given a direction - "next" or "prev" parameter

javascript api jquery flexslider
person Sebastien    schedule 08.08.2012    source источник

Ответы (6)


arrow_upward
43
arrow_downward

Вы можете получить доступ к объекту слайдера следующим образом:

var exampleSlider = $('#slider').data('flexslider');
// now you can access all the methods for example flexAnimate
exampleSlider.flexAnimate(..);

Как упоминалось выше, вы можете найти это в описании API по адресу https://github.com/woothemes/FlexSlider. (строка в источнике: https://github.com/woothemes/FlexSlider/blob/master/jquery.flexslider.js#L674)

person driechel    schedule 17.10.2012
comment
где документация для flexAnimate? Я не могу найти это в репозитории github - person climboid; 24.07.2014

arrow_upward
14
arrow_downward

С последней (2.1) версией Flexslider вы можете использовать внешний API следующим образом:

$('button').click(function () {
    $('.slider').flexslider(3);
});

Полная информация об API находится по адресу https://github.com/woothemes/FlexSlider#updates.

person atomicjeep    schedule 09.08.2012
comment
Да. Это работает, но я хочу, чтобы изменение было мгновенным (без перехода слайдов). Я использую эту функцию для запуска ползунка в лайтбоксе, и пользователь нажимает на миниатюру изображения, поэтому, когда лайтбокс открывается, я не хочу, чтобы ползунок находился в середине перехода. Однако, когда я перемещаюсь по ползунку, мне нужен эффект перехода. Это возможно? - person Sebastien; 13.08.2012

arrow_upward
3
arrow_downward

Это сработало для меня:

    $('#slider').flexslider({
        animation: "slide",
        controlNav: false,
        animationLoop: false,
        slideshow: false,
        start: function(){
            $('#sliderNext').on('click', function(e){
                $('.flex-next').trigger('click');
            });
            $('#sliderPrev').on('click', function(e){
                $('.flex-prev').trigger('click');
            });
        }
    });
person Joe L.    schedule 17.04.2014

arrow_upward
2
arrow_downward

Никто еще не ответил на главный вопрос: как запустить флексслайдер в лайтбоксе на конкретном слайде без анимации, а потом уже анимировать между слайдами. Я решил эту проблему следующим образом:

Перед открытием лайтбокса (используя обратный вызов лайтбокса) я установил скорость анимации flexslider на 0:

self.$slider.data('flexslider').vars.animationSpeed = 0;

После открытия лайтбокса (с помощью обратного вызова лайтбокса) я меняю индекс flexslider и возвращаю предыдущее значение скорости анимации:

self.$slider.flexslider(this.index);
self.$slider.data('flexslider').vars.animationSpeed = 600;
person Yuriy    schedule 31.10.2014
comment
Юрий, привет! Я пытаюсь сделать, как вы сказали. Но после переключения на другой слайд мое изображение исчезает. И только переход к предыдущему слайду возвращает изображение. Любые идеи? Может быть, вы можете поделиться примером кода? Большое спасибо! Александр Соловьев - person AlexSolovyov; 21.07.2015
comment
Не могли бы вы опубликовать пример?? - person David Soler; 26.07.2015
comment
Вот пример: gist.github.com/Walkeryr/abc5498fe1866032c16b. Я реализовал это здесь: cosmoscow.com/press/photo/auction - person Yuriy; 27.07.2015
comment
Юрий, спасибо! Это очень помогло! Небольшой комментарий. Чтобы этот код работал с анимацией слайдера flexslider, вы должны добавить $(window).trigger('resize'); перед сменой слайда. - person AlexSolovyov; 18.08.2015

arrow_upward
1
arrow_downward

Вы можете сначала попробовать установить объект ползунка:

$slider = $('.slideshow').flexslider();

затем используйте общедоступные методы flexslider:

$slider.data('flexslider').pause();
$slider.data('flexslider').play();
person benbyford    schedule 07.06.2017

arrow_upward
0
arrow_downward 

var myslider = ('.flexslider').flexslider({
   animation: 'slide',
   animationLoop: false
});
myslider.flexslider(3);

Это работает для меня. хотя я использую его в другом формате.

var img = $('<span/>');
img.attr('onclick','myslider.flexslider('+ id + ');');

у меня так много слайдов, которые я загружаю из базы данных.

person stephen Tamuno-opubo    schedule 07.10.2015