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

Question

[Secret73]

Всем привет. есть вот такой слайдер, помогите сделать его адаптивным? я пробовал это сделать через media-запросы, все получилось. Только есть одно но, если например сузить браузер, медиа запрос применяется, но ширина высчитанная js меняется только если обновить страницу или дождаться когда перелистнется слайдер, того ширина изменится. Можно ли как то это исправить?

cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js

jq_181 = jQuery.noConflict(true);
jq_181(function($){
    $("#slider_1 .scrollable").scrollable({ circular: true, speed:500 }).autoscroll({ autoplay: true });
});

/* Слайдер с отзывами */
#slider_1 .container, #slider_1 .navi, #slider_1 .scrollable, #slider_1 .item{ width:1000px; }
#slider_1 .container, #slider_1 .scrollable{ height:145px; }
 
#slider_1 a.disabled{ visibility:hidden !important; }
#slider_1 .container{ margin:0 auto; clear:both; position:relative; }
#slider_1 .scrollable{ float:left; position:relative; overflow:hidden; }
#slider_1 .scrollable .items{ width:20000em; position:absolute; clear:both; }
#slider_1 .items .item{ float:left; }
 
#slider_1 a.browse{ cursor:pointer; margin:0; width:39px; height:75px; position:absolute; top:20px; border:none; border-radius:0; background:url(http://media.....ru/images/10285/snav_1.png#size_78x75) 0 0 no-repeat; }
#slider_1 a.left{ left:-90px; }
#slider_1 a.right{ background-position:-39px 0; right:-90px; }
 
#slider_1 .items .img{ height:112px; width:112px; float:left; margin:0; }
#slider_1 .items .img img{ max-widht:106px; max-height:106px; display:block; margin:0 auto; border:3px solid #e2bc82; }
 
#slider_1 .items .content{ width:650px; float:left; font-family:arial, sans-serif; font-style:italic; margin:0 0 0 38px; }
#slider_1 .items .content .name{ font-size:18px; font-weight:bold; }
#slider_1 .items .content .text{ font-size:14px; line-height:16px; margin:16px 0 0 0; }

@media screen and (min-width: 760px) and (max-width: 980px) {
    #slider_1 .container, #slider_1 .navi, #slider_1 .scrollable, #slider_1 .item{ width:500px; }
    #slider_1 .items .content { width: 450px; float: none;}
    #slider_1 .items .img {margin: 0px 20px 0px 0px;}
}
@media screen and (min-width: 980px) and (max-width: 1280px) {
    #slider_1 .container, #slider_1 .navi, #slider_1 .scrollable, #slider_1 .item{ width:700px; }
    #slider_1 .items .content { width: 700px; float: none;}
    #slider_1 .items .img {margin: 0px 20px 0px 0px;}
}

<div id="slider_1">
        <div class="container">
                <a class="prev browse left"></a>
                <div class="scrollable" id="scrollable">
                        <div class="items">
                                <div class="item">
                                        <div class="img"><img src="http://media.....ru/images/10285/blondin.png#size_106x106"/></div>
                                        <div class="content">
                                                <div class="name">Варфаламеев Сергей</div>
                                                <div class="text">Это было очень весело, спасибо что пригласили! Отлично провел время, познакомился с прекрасными людьми.</div>
                                        </div>
                                </div>
                                <div class="item">
                                        <div class="img"><img src="http://media.....ru/images/10285/kudrashka.png#size_106x106"/></div>
                                        <div class="content">
                                                <div class="name">Лизюкова Оксана</div>
                                                <div class="text">Никогда не думала, что быстрые свидания - это хорошая идея. Была приятна удивлена. Спасибо организаторам! Нашла свою вторую половинку!</div>
                                        </div>
                                </div>
                                <div class="item">
                                        <div class="img"><img src="http://media.....ru/images/10285/ochkarik.png#size_106x106"/></div>
                                        <div class="content">
                                                <div class="name">Скворцов Дмитрий</div>
                                                <div class="text">Быстрые свидания - это то что нужно современному человеку! Я был просто поражен как экономится время, за час ты знакомишься с несколькими девушками и понимаешь с кем готов продолжить общение. Огромное спасибо!</div>
                                        </div>
                                </div>
                        </div>
                </div>
                <a class="next browse right"></a>
        </div>
</div>

Comments

[Сергей delphinpro]

Проще взять современный слайдер, с адаптивностью из коробки. owl-carousel, slick

[Евгений Карпов]

присоединяюсь к вышесказанному, используй готовый слайдер и не лепи костыли)

[Secret73]

Сергей: Евгений Карпов: Спасибо так и поступил )

[Евгений Карпов]

Secret73: и верно)

Answer 1

[Артур Карапетян]

OwlCarousel и не парьтесь

Answer 2

[Виталий Рыбченко]

Используй jquery, метод, который сработает при изменении размера окна

$(window).resize(function() {
    var dw = $(document).width();
    //твой код
});
</script>