FlexSlider 2

Адаптивная карусель меняющая ширину

JS
HTML

            (function() {
              var $window = $(window),
                  flexslider;
              function getGridSize() {
                return (window.innerWidth < 600) ? 2 :
                       (window.innerWidth < 900) ? 3 : 4;
              }

              $(function() {
                SyntaxHighlighter.all();
              });

              $window.load(function() {
                $('.flexslider').flexslider({
                  animation: "slide",
                  animationLoop: false,
                  itemWidth: 210,
                  itemMargin: 5,
                  minItems: getGridSize(),
                  maxItems: getGridSize()
                });
              });

              $window.resize(function() {
                var gridSize = getGridSize();

                flexslider.vars.minItems = gridSize;
                flexslider.vars.maxItems = gridSize;
              });
            }());

            <!-- Place somewhere in the <body> of your page -->
            <div class="flexslider">
              <ul class="slides">
                <li>
                  <img src="slide1.jpg" />
                </li>
                <li>
                  <img src="slide2.jpg" />
                </li>
                <li>
                  <img src="slide3.jpg" />
                </li>
                <li>
                  <img src="slide4.jpg" />
                </li>
                <!-- items mirrored twice, total of 12 -->
              </ul>
            </div>

FlexSlider 2

Отличный адаптивный слайдер.

Варианты веализации