Запуск контейнера с полной высотой при достижении минимальной ширины окна

Question

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

Это мой код до сих пор:

if($(window).width() > 767) { 

    $(window).resize(function() { 

    var winHeight = $(window).height(); 
    var headerHeight = $(".navbar").height(); 
    $('.slideshow, .slideshow li').height(winHeight); 


    }); 

    $(window).trigger('resize'); 

} 

Это своего рода работает, если я браузер начинает по ширине больше, чем 767. Однако. Если если браузер запускается с шириной менее 767, и я начинаю изменять размер более 767, сценарий не запускается.

Любые идеи, как я мог это исправить?

Answer 1

Обработчик resize событие связано, когда ваш браузер запускается только когда width > 767, попробуйте удалить, если условие и оно должно работать нормально

EDIT:

Чтобы сделать его применять только тогда, когда его ширина составляет> 767, состояние должно быть внутри события resize

$(window).resize(function() { 
    if($(window).width() > 767) { 
    var winHeight = $(window).height(); 
    var headerHeight = $(".navbar").height(); 
    $('.slideshow, .slideshow li').height(winHeight); 
    } else { 
    $('.slideshow, .slideshow li').height(400); //initial height 
    } 
}); 
$(window).trigger('resize'); 

Answer 2

Вы должны сделать это намного проще в css с помощью медиа-запроса.

@media (min-width:500px){ 
    .slideshow{ 
    height:100%; 
    } 
}