onresize не работает если добавлять условия
Здравствуйте! Есть скрипт который при загрузке определяет размер окна, а так отслеживает изменение размера
var win = $(this); //this = window $(function(){ fnName(); window.onresize = fnName; }); function fnName(){ if (win.width() <= 992) { $('.bxslider').bxSlider({ mode: 'horizontal', moveSlides: 1, slideMargin: 30, infiniteLoop: true, slideWidth: 460, minSlides: 1, maxSlides: 1, speed: 800, }); }else if (win.width() > 992 && win.width() < 1200) { $('.bxslider').bxSlider({ mode: 'horizontal', moveSlides: 1, slideMargin: 30, infiniteLoop: true, slideWidth: 660, minSlides: 2, maxSlides: 2, speed: 800, }); }else if (win.width() > 1200) { $('.bxslider').bxSlider({ mode: 'horizontal', moveSlides: 1, slideMargin: 30, infiniteLoop: true, slideWidth: 660, minSlides: 3, maxSlides: 3, speed: 800, touchEnabled: false, }); } } При загрузке проверяет, а вот при изменении код не меняется на другой, только если использовать 1 код без других которые в else if |
var win = $(this); замените на всякий на var win = $(window); Дело не в условии, читайте документацию к плагину |
попробуйте после каждого if сначала
$('.bxslider').destroySlider(); if (win.width() <= 992) { $('.bxslider').destroySlider(); $('.bxslider').bxSlider({ mode: 'horizontal', moveSlides: 1, slideMargin: 30, infiniteLoop: true, slideWidth: 460, minSlides: 1, maxSlides: 1, speed: 800, }); } |
Цитата:
|
Цитата:
|
bxSlider update resize
dranoc,
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css"> <style type="text/css"> .bx-wrapper{ margin: 0 auto; } </style> <script> $(function() { function fnSettings() { var settings = { mode: "horizontal", moveSlides: 1, slideMargin: 30, infiniteLoop: true, slideWidth: 460, minSlides: 1, maxSlides: 1, speed: 800 }, width = $(window).width(); if (width > 992 && width < 1200) settings = { mode: "horizontal", moveSlides: 1, slideMargin: 30, infiniteLoop: true, slideWidth: 660, minSlides: 2, maxSlides: 2, speed: 800 }; if (width > 1200) settings = { mode: "horizontal", moveSlides: 1, slideMargin: 30, infiniteLoop: true, slideWidth: 660, minSlides: 3, maxSlides: 3, speed: 800, touchEnabled: false }; return settings } var settings = fnSettings(); var bxslider = $(".bxslider").bxSlider(settings); $(window).resize(function() { settings = fnSettings(); bxslider.reloadSlider(settings) }) }); </script> </head> <body> <div class="bxslider"> <div><img src="https://bxslider.com/assets/images/coffee1.jpg" title="Funky roots"></div> <div><img src="https://bxslider.com/assets/images/coffee2.jpg" title="The long and winding road"></div> <div><img src="https://bxslider.com/assets/images/coffee3.jpg" title="Happy trees"></div> </div> </body> </html> |
cпасибо, работает!
|
Часовой пояс GMT +3, время: 04:18. |