Высота без изменения размера LayerSlider 5

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

Мой код ниже:

HTML:

<div id="LayerSlider" class="Slider"> 
    <div class="ls-slide" data-ls="transition2d:1;timeshift:-1000;"> 
     <img src="/Assets/Images/Layerslider/Banner1.jpg" class="ls-bg" alt="Slide background"/> 
    </div> 
    <div class="ls-slide" data-ls="transition2d:1;timeshift:-1000;"> 
     <img src="/Assets/Images/Layerslider/Banner2.jpg" class="ls-bg" alt="Slide background"/> 
    </div> 
</div>

JQuery

$(document).ready(function() { 
    $('#LayerSlider').layerSlider({ 
     responsive: false, 
     layersContainer : 1178, 
     responsiveUnder : 1500 
    }); 
});

В документации говорит, что вы должны использовать отзывчивым: ложь, если вы хотите использовать responsiveUnder, что делает его отзывчивым под заданной шириной.

Ссылка на LayerSlider http://kreaturamedia.com/layerslider-responsive-jquery-slider-plugin/

источник

2014-01-15 Dale

Попробуйте положить 'кожу: 'fullwidth'' в вашем JS. – Vucko

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

использовать jquery, чтобы изменить высоту layerslider при изменении размера окна.

<script type="text/javascript"> 
     $(window).resize(function() { 
      var newHeight; 
      newHeight = $(window).width(); 
      newHeight = newHeight/2.25 
      newHeight = parseInt(newHeight); 
      // alert(newHeight); 
      $('#layerslider').css('height', newHeight); 
     }); 
    </script>

источник

2015-05-10 03:48:57

Если это для отзывчивости вы также можете сделать css следующим образом: 'height: 44.44vw! important;' вместо того, чтобы использовать javascript для выполнения трюка. (44.44 эквивалентен проценту 2.25) –

У меня была такая же проблема. В моем случае это произошло из-за дублирования стилей css, когда мы перенесли сайт в liferay cms (который добавляет все виды html). Мы реструктурировали часть сайта и скопировали и ввели в документ layerlider.css (чтобы мы могли отредактировать его без развертывания темы), но никогда не удаляли исходный файл css. Удаление стилей - это то, что фиксирует расчет высоты. По-видимому, javascript использует стили css, которые вы задавали для высоты и ширины, чтобы рассчитать размеры изображения, текста и родительского контейнера.

Надеюсь, это поможет.

источник

2015-05-22 21:52:16

Я использовал css break point, чтобы исправить эту проблему высоты слоя Slider. Используйте редактор css слайдера слоя.

@media only screen and (min-width:800px) and (max-width:960px) { 
.ls-wp-fullwidth-container { 
    height: 65vh!important; 
} 
@media only screen and (min-width:768px) and (max-width:800px) { 
    .ls-wp-fullwidth-container { 
     height: 50vh!important; 
    } 
} 
@media only screen and (min-width:600px) and (max-width:768px) { 
    .ls-wp-fullwidth-container { 
     height: 42vh!important; 
    } 
} 
@media only screen and (min-width:480px)and (max-width:600px) { 
    .ls-wp-fullwidth-container { 
     height: 33vh!important; 
    } 
    }

- icodefy

источник

2017-07-09 07:55:31 suriish

Смежные вопросы