Высота реакции carouFredSel

Ответ 1

Я наткнулся на эту проблему некоторое время назад; единственным решением, которое я нашел, является изменение размера контейнера при изменении размера браузера. Это трюк, но педант во мне не очень нравится.

Я только сделал ссылку на карусель и добавил функцию onCreate:

var $carousel = $("#swiper");

$carousel.carouFredSel({
  width: "100%",
  height: "auto",
  responsive: true,
  auto: true,
  scroll: { items: 1, fx: 'scroll' },
  duration: 1000,
  swipe: { onTouch: true, onMouse: true },
  items: { visible: { min: 4, max: 4 } },
  onCreate: onCreate
});​

function onCreate() {
  $(window).on('resize', onResize).trigger('resize');
}

function onResize() {
  // Get all the possible height values from the slides
  var heights = $carousel.children().map(function() { return $(this).height(); });
  // Find the max height and set it
  $carousel.parent().add($carousel).height(Math.max.apply(null, heights));
}

Если вы все еще используете этот плагин в 2015 году, то время для перехода.
Бесплатная версия больше не поддерживается, и коммерческая версия теперь является плагином Wordpress. Плюс, кому нужно взломать слайдер, чтобы сделать его отзывчивым в наши дни?

Ответ 2

Что сработало для меня (еще в версии 6.0.3 из моего шаблона):

Установила высоту: "переменная" в обоих пунктах И основные параметры, такие как:

    $('#foo').carouFredSel({
    responsive: true,
    width: '100%',
    height: 'variable',
    items: {
        height: 'variable'
    }
});

Я могу изменить размер в любой момент, и он больше не будет обрабатывать текст в DIV и т.д.

Ответ 3

$('#foo2').carouFredSel({
      responsive: true,
      auto: true,
      width: "100%",
      height: "100%",
      scroll: 3,
      prev: '#prev4',
      next: '#next4',
      items: {
        width: '100%',
        height: '100%'
      }
    }).trigger('resize');

Ответ 4

У меня возникла проблема в carouFredsel 6.2.0, где созданная оболочка обновила его высоту ОК при заданной высоте: "переменная" в конфиге, но фактический список элементов застрял бы с высотой первого элемента. Затем это обрезало любые последующие предметы, которые были выше, чем первые. Триггер updateSizes, похоже, ничего не сделал, поэтому я решил это с помощью события onAfter;

scroll : {
  onAfter : function( data ) {          
    var carousel_height = $(this).parents('.caroufredsel_wrapper').css('height');
    $(this).css('height', carousel_height);
  }
 }

Ответ 5

У меня был некоторый успех в использовании CSS-запросов для настройки размеров элемента caroufredsel_wrapper, используя! important, например:

.caroufredsel_wrapper {
    width: 700px !important;
    height: 393px !important;
}
@media screen and (max-width: 768px){
    .caroufredsel_wrapper {
        width: 460px !important;
        height: 258px !important;
    }
}

Тогда я смог избавиться от материала onCreate из приведенного выше ответа. Гораздо более результативна, так как привязка к событию window.resize может вызвать функцию много раз при перетаскивании оконного кадра во время одного изменения размера.

Ответ 6

У меня была такая же проблема, и я сделал следующее:

Удалены строки с 3648 по 3652, эти строки выглядят так:

if (is_number(o.items[o.d[dim]]))
{
    console.log(o.d[dim]);
    return o.items[o.d[dim]];
}

И этот код находится внутри функции ms_getLargestSize.

Это решило проблему высоты списка. Чтобы решить размер обертки, я изменил с true на false параметр в строке ~ 3609, строка выглядит так:

var sz = cf_mapWrapperSizes(ms_getSizes($v, o, true), o, false);

Изменить на:

var sz = cf_mapWrapperSizes(ms_getSizes($v, o, false), o, false);

После этого слайдер отлично работает при изменении размера и больше не обрезает элементы, такие как divs!

Надеюсь, это поможет, Рафаэль Ангелин

Ответ 7

height: "auto" означает, что высота карусели будет такой же высокой, как и самый высокий предмет внутри, включая не видимые предметы! В режиме реагирования только высота видимых элементов будет изменена, поэтому высота карусели будет одинаковой. (Никакие видимые элементы не будут изменены.)

Вместо этого вы должны использовать высоту: "переменная", которая автоматически изменяет размеры карусели в зависимости от высоты видимых элементов.

Подробнее найти в спецификациях: http://caroufredsel.dev7studios.com/configuration.php

Надеюсь, это поможет. С уважением Дирх

Ответ 8

http://caroufredsel.dev7studios.com/examples/responsive-carousels.php трюк состоит в том, чтобы сделать ширину и высоту внутри элементов.

$("#foo2").carouFredSel({
    responsive  : true,
    scroll      : {
        fx          : "crossfade"
    },
    items       : {
        visible     : 1,
        width       : 870,
        height      : "46%"
    }
});

Приветствия Ларс

Ответ 9

Указание высоты 100% для обоих плагинов И элементов, которые мне работали:

$('#carousel').carouFredSel({
    responsive: true,
    width: '100%',
    height: '100%',
    items: {
        height: '100%'
    }
});

Ответ 10

Я думаю, что у Ларса была правильная идея: если вы укажете% для высоты, и у вас есть Отзывчивое: истинное, вы НЕ указываете его в процентах от родительской обертки, которую вы объявляете% Высота до ширины. Поэтому, если ваш слайдер имеет ширину 1000 пикселей по всей ширине, и вы хотите, чтобы высота 500 пикселей высотой при полной ширине высота: "50%" даст вам правильную начальную высоту, и ваше изображение будет обновлено на основе изменения размера страницы.

см. код из второго примера на этой странице http://docs.dev7studios.com/caroufredsel-old/examples/responsive-carousels.php

Ответ 11

Я понимаю, что карофедзел reponsive отлично работает, вам просто нужно сделать свой css изображения таким.

.caroufredsel_wrapper ul li img{
    height: auto;
    max-width: 100%;
    width: 100%;
}

Функциональность, чувствительная к caroufredsel, просто даст вам высоту изображения. Не нужно jQuery/javascript, то это он.

Ответ 12

Ответ Пьера почти работает, за исключением того, что он не проверяет самый высокий слайд, он проверяет первую высоту слайда. В моем слайд-шоу 5-й слайд был выше, и он оказался отрезанным.

Однако, после возиться, я обнаружил, что игра с конфигурацией при изменении размера приводит к правильной высоте! Итак, в качестве альтернативы, вот эта функция, отлаживающая отладка.

var carousel = $("#swiper");

carousel.carouFredSel({
  width: "100%",
  height: "auto",
  responsive: true,
  auto: true,
  scroll: {
    items: 1,
    fx: 'scroll'
  },
  duration: 1000,
  swipe: {
    onTouch: true,
    onMouse: true
  },
  items: {
    visible: {
      min: 4,
      max: 4
    }
  },
  onCreate: function () {
    $(window).on('resize', function () {
      carousel.trigger('configuration', ['debug', false, true]);
    }).trigger('resize');
  }
});​

Ответ 13

Нет хаков, это использование пользовательских событий в 6.2.1. После создания ползунка (-ов) для страницы, установите обработчик изменения размера окна, и в пределах этого для каждого ползунка получите новую высоту и используйте событие 'configuration', чтобы сбросить высоту этого ползунка. Наконец, вызвать событие "updateSizes". Соответствующий код:

var options = {
  responsive: true,
  height: 'auto',
  onCreate: function() { jQuery(window).on('resize', resizeMyslider); },
  // remaining options
  ...
};
myslider.carouFredSel(options);

function resizeMyslider(e) {
  var newHeight = 0;
  // Get new height of items (be sure css isn't setting a fixed height)
  myslider.children().map(
    function() {
      newHeight = Math.max(newHeight, jQuery(this).height());
    }
  );
  // Change configuration of slider
  myslider.trigger('configuration', ['height', newHeight + 'px']);
  // Tell slider to use new configuration height
  myslider.trigger('updateSizes');
}

В идеале вы реализуете событие изменения размера окна с помощью тайм-аута или кадра запроса анимации, но это основа.

Ответ 14

Мой сценарий:

1) на Firefox, изображения в carousal carouFredSel будут реагировать, то есть когда мы изменим размер окна, изображение можно настроить на новую ширину и высоту на caroufredsel_wrapper.

2) на Chrome, изображения в каруселях не отображаются. Но когда мы изменим размер экрана, даже немного, изображения вышли бы нематериально и были бы отзывчивыми.

var $j = jQuery.noConflict();

/**
 * Init media gallery. Init carousel. Init zoom.
 */
function initMediaGallery() {

...

$j('#prod-gal').carouFredSel({
    direction       : "left",
    responsive      : true,
    width           : "100%",
    height          : "null",
    prev            : ".slick-prev",
    next            : ".slick-next",
    items : {
        display     : "block",
        float       : "left",
        height      : "706",
        visible     : 2,
        start       : 0
    },
    scroll : {
        items : {
            visible:
            {
                min: 2,
                max: 2
            }
        },
        easing          : "swing",
        duration        : 150,
        pauseOnHover    : true
    },
    auto    :   {
        play            : false,
        timeoutDuration : 2000,
    },
    pagination: {
        container       : ".pagination",
        anchorBuilder   : false
    },

});

}

** По моему мнению, высота изображения может быть "переменной" или одним фиксированным значением, например 706, в моем случае. это только начальный полный размер экрана, и когда мы устанавливаем "отзывчивый: ture", carouFredSel должен автоматически вычислять размер для всех изображений. Но почему это происходит?

Проверьте исходный код, который можно увидеть в Chrome, значение .caroufredsel_wrapper height = 0. Как только мы немного изменим размер браузера, это будет height = 706 (например, в моем случае).

Я попытался использовать событие изменения размера (например, следующее), чтобы установить обертку на один начальный размер, и он не работает, за исключением того, что я устанавливаю фиксированное значение, например 706. Но если мы установим одно фиксированное значение, всегда будет эта высота.

    onCreate: function () {
        var self = this;
        $j(window).on('resize', function () {
            $j(self).parent().height($j(self).children().first().height());
        }).trigger('resize');
    }

Мы можем отлаживать js и видеть, что возвращаемая высота равна 0 по умолчанию, даже при каждом инициализации каждого элемента мы устанавливаем одно фиксированное значение.

console.log($j(self).children().first().height());

До этого момента мы можем предположить, что при инициализации объекта carouFredSel высота не может быть правильно создана carouFreSel js. Наконец, я пытаюсь сделать это изменение, потому что похоже, что у carouFredSel есть некоторые "ошибки" при вычислении высоты изображения при запуске в Chrome (я думаю).

<script type="text/javascript">
    //jQuery(document).ready(function(){
    jQuery(window).load(function(){ /* */
        initMediaGallery();
    });
</script>