Показать сообщение отдельно
  #6 (permalink)  
Старый 17.11.2018, 11:49
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

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>
Ответить с цитированием