Как сделать bxslider адаптивным?

Question

[Владимир Горбунов]

Всем привет! Такое дело, сделал вот такой слайдер

<div class="wrap_slider">
               <div class="slider ">

                    <div class="item">
                        <img src="img/canoe.jpg" alt="">
                        <div class="disc">
                           <h5>Путешествие по реке страча</h5>
                            <p>Приглашаем открыть весенний паводок по реке “Страча”.</p>
                            <ul>
                                <li><i style="background-position: 1px 0"> </i>Дата: 1 марта - 3 матра</li>
                                 <li><i style="background-position: -13px 0"> </i>Стоимость: 750 000 р.</li>
                                <li><i style="background-position: -26px 0"> </i>Осталось мест: 3 из 10</li>
                            </ul>
                        </div>
                        <button class="button">Подробнее</button>
                </div>
                    <div class="item">
                        <img src="img/mount.jpg" alt="">
                        <div class="disc">
                           <h5>Горячие источники Кавказа</h5>
                            <p>"Горячие источники" - можно смело назвать походом на Кавказ для начинающих. Проходит в живописных местах Караваево-Черкесии у подножья Эльбруса.</p>
                            <ul>
                                <li><i style="background-position: 1px 0"> </i>Дата: 20 марта - 27 матра</li>
                                <li><i style="background-position: -13px 0"> </i>Стоимость: 1 500 000 р.</li>
                                <li><i style="background-position: -26px 0"> </i>Осталось мест: 5 из 10</li>
                            </ul>
                        </div>
                        <button class="button">Подробнее</button>
                    </div>
                    <div class="item">
                        <img src="img/recreation.jpg" alt="">
                        <div class="disc">
                           <h5>Тур выходного дня!</h5>
                            <p>А не махнуть ли на выходные на браславские озера?</p>
                            <ul>
                                <li><i style="background-position: 1px 0"> </i>Дата: 3 апреля - 5 апреля</li>
                                <li><i style="background-position: -13px 0"> </i>Стоимость: бесплатно</li>
                                <li><i style="background-position: -26px 0"> </i>Осталось мест: 3 из 10</li>
                            </ul>
                        </div>
                        <button class="button">Подробнее</button>
                    </div>
                   </div>
	</div>

Это обычный bxslider.

$('.slider').bxSlider({
    slideWidth: 300,
    minSlides:1,    
    maxSlides: 3,
    moveSlides: 1,
    slideMargin: 10
    });

И хочу чтобы начиная с 900 px, показывал 2 итема, а с 600 px показывал 1 итем.

Кто знает как это реализовать? И он почему то вообще не адаптируется. Хотя примеры на офф сайте все адаптивные. Буду очень благодарен за помощь.

Answer 1

[Александр Миранович]

minSlides:3, тогда будет масштабировать слайды при ресайзе страницы, в твоем примере должно автоматически убирать или добавлять слайд при изменение размера страницы, но оно не резко убирает, а постепенно сначала обрезает край слайда. Можешь скриптом проверять размер окна браузера, как то так:

$(document).ready(function(){
  sliderResize();
});

$(window).resize(function(){
  sliderResize();
});

function sliderResize() {
  var slider = $('.slider').bxSlider({
    slideWidth: 300,
    minSlides:1,
    maxSlides: 3,
    moveSlides: 1,
    slideMargin: 10
  });

  if ($(window).width()<900 && $(window).width()>600) {
    slider.reloadSlider({
      maxSlides: 2,
    });
  } else if ($(window).width()<600) {
    slider.reloadSlider({
      maxSlides: 2,
    });
  };
}

Comments

[Владимир Горбунов]

спасибо большое. очень помог. только там в if else надо бы minSlides

[Александр Миранович]

я написал как пример, а дальше думаю сам разберешься, но я бы прописал так, что бы резко был переход на 2 слайда потом масштабировалось до 600,, а потом резкий переход на 1 слайд и опять мастабировалось
if ($(window).width()<900 && $(window).width()>600) {
slider.reloadSlider({
maxSlides: 2,
minSlides: 2,
});
} else if ($(window).width()<600) {
slider.reloadSlider({
maxSlides: 1,
minSlides: 1,
});
};

Answer 2

[Денис Инешин]

Воспользуйтесь owlgraphic.com/owlcarousel
он отлично справляется с адаптивностью

Comments

[Владимир Горбунов]

я и этим пробовал! не получилось реализовать такой слайдер

[Денис Инешин]

Владимир Горбунов: плохо пробовали, owl лучший, на нём можно легко это сделать.

[Алексей Каратеев]

Владимир Горбунов, действительно, в owl-carousel очень удобно это реализовано, там просто в самом слайдере указываешь, для каких разрешений экрана сколько слайдов будет и все.

Answer 3

[blolg]

kenwheeler.github.io/slick хорошо для этого подходит.
Можно указать на каком разрешении какое количество слайдов выводить.