Изменение размера FlexSlider 2 при изменении размера окна

Я делаю отзывчивую тему для WordPress, созданной на Twitter Bootstrap. Я использую FlexSlider слайд-шоу jquery plugin на главной странице.

К сожалению, когда я изменяю размер моего браузера, FlexSlider не изменяет размер изящно. Когда я пойду уже, изображение может быть обрезано. Если я пойду шире, часть следующего изображения может оказаться сбоку. Это происходит даже тогда, когда я использую демо-код с сайта FlexSlider. Это даже происходит на демо-версии FlexSlider. Но Dany Duchaine [Energized theme] [3] умеет легко изменять размер FlexSlider с изменением видового экрана. Может ли кто-нибудь объяснить, как он это делает, или предложить какой-либо способ улучшить поведение моей версии?

Спасибо!

Ответ 1

У вас, вероятно, есть решение или переместилось на этом этапе, но я подумал, что хочу указать эту проблему на github для посетителей: https://github.com/woothemes/FlexSlider/issues/391 (обратите внимание на ответ patbouche). Это решение сработало для меня. Я положил его в обратный вызов after:.

var slider1 = $('#slider1').data('flexslider');
slider1.resize();

Ответ 2

Я объединил пару этих решений, а также добавил проверку, чтобы убедиться, что слайдер существует на первой странице.

$(function() { 
    var resizeEnd;
    $(window).on('resize', function() {
        clearTimeout(resizeEnd);
        resizeEnd = setTimeout(function() {
            flexsliderResize();
        }, 250);
    });
});

function flexsliderResize(){ 
    if ($('.flexslider').length > 0) {
        $('.flexslider').data('flexslider').resize();
    }
}

Ответ 3

Мне пришлось привязать событие изменения размера окна, чтобы обеспечить надежную работу. Поскольку FlexSlider до и после обратных вызовов не работал у меня:

$(window).bind('resize', function() { 

setTimeout(function(){ 
    var slider = $('#banner').data('flexslider');   
    slider.resize();
}, 1000);

});

Ответ 4

Я думаю, что лучше включить его в перед обратным вызовом:

$('.flexslider').flexslider({
    // your settings
    before: function(slider){
        $('.flexslider').resize();
    }
});

Ответ 5

Я пробовал много, а затем сделал это

if( jQuery('.iframe').length ){
    var interval =  window.setInterval(function() { jQuery('.flexslider').resize(); }, 100);

    window.setTimeout(function(){
        clearInterval(interval);
    },4000);
}

Ответ 6

просто хотел добавить еще одну альтернативу, если кто-то все еще испытывает проблему "flexslider resizes to more width, но не ниже"

пользователь "PCandtheWeb" предложил добавить ниже, если у вас есть таблица обертывания, которая, как представляется, выполняет задание

.your-table
{
   table-layout: fixed
}

Источник: https://github.com/woothemes/FlexSlider/issues/980

Ответ 7

Я также пробовал много способов, но нигде не работал на самом деле... Затем я сделал это вручную, и теперь он работает: сохраните данные ползунка перед изменением с помощью flexslider, когда изменяется размер окна: destroy flexslider (fooobar.com/questions/374123/...) и полностью удалите node, вручную добавьте оригинальный слайдер node, который был сохранен в данных, добавьте его снова и инициализируйте flexslider... потому что это довольно дорого, я также добавлен измененный метод (fooobar.com/questions/33786/...), чтобы не выполняться при изменении размера... Да, это какой-то код, и он немного взломан, но он работает: )

$.fn.resized = function (callback, timeout) {
    $(this).resize(function () {
        var $this = $(this);
        if ($this.data('resizeTimeout')) {
            clearTimeout($this.data('resizeTimeout'));
        }
        $this.data('resizeTimeout', setTimeout(callback, timeout));
    });
};

function myFlexInit(slider){
    slider.data("originalslider", slider.parent().html());
    slider.flexslider({
      animation: "slide",
      //... your options here
     });
}

 $(".flexslider").each(function() {
     myFlexInit($(this));
  });

  $(window).resized(function(){
      $(".flexslider").each(function() {
          $(this).removeData("flexslider");
          parent = $(this).parent();
          originalslider = $(this).data("originalslider");
          $(this).remove();
          parent.append(originalslider);
          newslider = parent.children().first();
          myFlexInit(newslider);
      });
  }, 200);

Лучше оберните свой слайдер в собственный уникальный контейнер:

<div class="sliderparent">
     <div class="flexslider">
        <ul class="slides">

        </ul>
      </div>
 </div>

Ответ 8

$(window).load(function(){
    var mainslider;

    $('.flexslider').flexslider({
        animation: "slide",
        start: function(slider){
            mainslider = slider;
        }
    });

    //force resize (carousel mode)
    $(window).on("resize", function() {
        //carousel resize code, around line 569 of query.flexslider.js
        mainslider.update( mainslider.pagingCount); 
        mainslider.newSlides.width(mainslider.computedW);
        mainslider.setProps(mainslider.computedW, "setTotal");
    });
});

Я не уверен, что этот будет работать для всех случаев, но для простой карусели это работает!

Ответ 9

Я попробовал самый популярный ответ здесь, но, похоже, застрял в бесконечной петле. Вместо этого я принудительно изменяю высоту флекс-области просмотра и ширину слайда при изменении размера браузера, что, кажется, сработало.

  $(window).on('resize', function () {

        if ($('.flexslider').length > 0) {

            $('.flexslider').each(function () {

                $(this).find('.flex-viewport').css('height', 'auto');

                $(this).find('>.slides').each(function () {
                    let height = $(this).css('height');
                    $(this).find('> li').css('width', height);
                });

            });
        }
    });