Как исправить изображения на flexslider, чтобы быть отзывчивым? - PullRequest
Новая
       83

Как исправить изображения на flexslider, чтобы быть отзывчивым?

0 голосов
/ 25 февраля 2020

Итак, у меня есть шаблон HTML, который я получил от inte rnet. Я отредактировал его и создал веб-сайт так, как мне хотелось бы, однако я столкнулся с проблемой с FlexSlider.

На мобильном устройстве изображения («слайды») отображаются примерно вдвое реальными. размер. Если я переключаюсь на настольную версию, изображение слайдера загружается нормально.

На компьютере оно выглядит нормально.

Существует ли какой-либо реальный способ правильного изменения размера изображения на мобильном устройстве?

Сайт: https://timetakernet.info/luxehotel/.

Приношу свои извинения, если это повторяющийся вопрос, но я не смог найти рабочее решение.

Ответы [ 2 ]

0 голосов
/ 25 февраля 2020

Пожалуйста, используйте этот код, чтобы адаптировать ваш flexslider 

(function() {
 
  // store the slider in a local variable
  var $window = $(window),
      flexslider = { vars:{} };
 
  // tiny helper function to add breakpoints
  function getGridSize() {
    return (window.innerWidth < 600) ? 2 :
           (window.innerWidth < 900) ? 3 : 4;
  }
 
  $(function() {
    SyntaxHighlighter.all();
  });
 
  $window.load(function() {
    $('.flexslider').flexslider({
      animation: "slide",
      animationLoop: false,
      itemWidth: 210,
      itemMargin: 5,
      minItems: getGridSize(), // use function to pull in initial value
      maxItems: getGridSize() // use function to pull in initial value
    });
  });
 
  // check grid size on resize event
  $window.resize(function() {
    var gridSize = getGridSize();
 
    flexslider.vars.minItems = gridSize;
    flexslider.vars.maxItems = gridSize;
  });
}());

, в противном случае вы можете посетить этот сайт нажмите здесь

0 голосов
/ 25 февраля 2020

Я думаю, вы ищете правило @media css. Вот определение из https://developer.mozilla.org/en-US/docs/Web/CSS/@media:

Правило @media CSS может использоваться для применения части таблицы стилей на основе результата одного или больше медиа-запросов. С его помощью вы задаете медиазапрос и блок CSS для применения к документу, если и только если медиазапрос соответствует устройству, на котором используется контент.

...