17.11.2018, 10:13
|
|
Интересующийся
|
|
Регистрация: 31.08.2017
Сообщений: 11
|
|
|
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 |
|
17.11.2018, 11:01
|
 |
Профессор
|
|
Регистрация: 01.12.2016
Сообщений: 3,650
|
|
var win = $(this);
замените на всякий на
var win = $(window);
Дело не в условии, читайте документацию к плагину |
|
17.11.2018, 11:06
|
|
Профессор
|
|
Регистрация: 01.12.2016
Сообщений: 3,650
|
|
попробуйте после каждого 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,
});
}
|
|
17.11.2018, 11:10
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,068
|
|
|
Сообщение от j0hnik
|
попробуйте после каждого if сначала
$('.bxslider').destroySlider();
|
идея правильная, но прежде чем разрушить, надо создать! |
|
17.11.2018, 11:16
|
|
Профессор
|
|
Регистрация: 01.12.2016
Сообщений: 3,650
|
|
|
Сообщение от рони
|
|
идея правильная, но прежде чем разрушить, надо создать!
|
да, там еще есть метод reloadSlider() наверное можно добавить после инициализации, и не разрушать |
|
17.11.2018, 11:49
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,068
|
|
|
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>
|
|
17.11.2018, 12:51
|
|
Интересующийся
|
|
Регистрация: 31.08.2017
Сообщений: 11
|
|
|
cпасибо, работает!
|
|
|
|
