【jQuery】オーバーフローコンテンツをスクロールするためのシンプルなjQueryプラグインLos Scrollos

jQuery

los-scrollos

February 21, 2018

Los ScrollosはオーバーフローコンテンツをスクロールするためのシンプルなjQueryプラグイン。

HTML

<div class="scrollos-wrapper" id="example3">
        <div class="scrollos-container" data-overflowing="none">
          <div class="scrollos-content">
            <div class="item"><span>Item 1</span>
            </div>
            <div class="item"><span>Item 2</span>
            </div>
            <div class="item"><span>Item 3</span>
            </div>
            <div class="item"><span>Item 4</span>
            </div>
            <div class="item"><span>Item 5</span>
            </div>
            <div class="item"><span>Item 6</span>
            </div>
            <div class="item"><span>Item 7</span>
            </div>
            <div class="item"><span>Item 8</span>
            </div>
            <div class="item"><span>Item 9</span>
            </div>
            <div class="item"><span>Item 10</span>
            </div>
            <div class="item"><span>Item 11</span>
            </div>
            <div class="item"><span>Item 12</span>
            </div>
            <div class="item"><span>Item 13</span>
            </div>
            <div class="item"><span>Item 14</span>
            </div>
            <div class="item"><span>Item 15</span>
            </div>
            <div class="item"><span>Item 16</span>
            </div>
            <div class="item"><span>Item 17</span>
            </div>
            <div class="item"><span>Item 18</span>
            </div>
            <div class="item"><span>Item 19</span>
            </div>
            <div class="item"><span>Item 20</span>
            </div>
            <div class="item"><span>Item 21</span>
            </div>
            <div class="item"><span>Item 22</span>
            </div>
            <div class="item"><span>Item 23</span>
            </div>
            <div class="item"><span>Item 24</span>
            </div>
          </div>
        </div>
        <div class="scrollos-nav scrollos-prev"><i class="fa fa-chevron-left"></i></div>
        <div class="scrollos-nav scrollos-next"><i class="fa fa-chevron-right"></i></div>
      </div>

JS

    <script src="jquery.min.js"></script>
    <script src="scrollos.js"></script>
    <script>
      $( function () {
      	console.log('demo');
      	$('#example1').Scrollos();
      	$('#example2').Scrollos();
      	$('#example3').Scrollos();
      });
    </script>

MIT

Latest Posts

Related Posts