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>