jQuery

【jQuery】レスポンシブスライダーを実装できるプラグインResponsive Slider

April 14, 2017
responsive slider

Responsive Sliderはスライドを中央に配置し、それ以外の場合は、ビューポートの幅の70%をスライドさせます。

  1. jquery.scrollTo plugin
  2. jQuery-Touch-Events plugin

HTML

<div class="slider">
    <a href="#" class="slider-prev">&laquo;</a>
    <a href="#" class="slider-next">&raquo;</a>
    <div class="slider-viewport">
        <div class="slider-track">
            <div class="slide">
                <a href="#">
                    <img src="https://unsplash.it/201/300/">
                </a>
            </div>
            ...
        </div>
    </div>
</div>