【jQuery】左右にスムースにスライドするライブラリSMOOTH DIV SCROLLを使う

2015年8月6日

jQuery

スライダーを使う時、基本的にはbxsliderとか定番系を使うのですが、たまたま別のスライダーを使ったので導入をメモ。

[ダウンロード:SMOOTH DIV SCROLL]

4つのライブラリを追加してから初期化する

cssとjsを読み込んで初期化すれば動きます。 jsの数が多い気がする。

jquery-ui-1.10.3.custom.min.js
jquery.mousewheel.min.js
jquery.kinetic.min.js
jquery.smoothdivscroll-1.3-min.js

上記4つを呼び出して、初期化を行います。※jQueryは読み込んである前提で

$(document).ready(function () {
            // None of the options are set
            $("div.sliderBox").smoothDivScroll({
                autoScrollingMode: "onStart"
            });
        });

全体はコチラ

    <!-- jQuery UI (Custom Download containing only Widget and Effects Core)
         You can make your own at: http://jqueryui.com/download -->
    <script src="js/lib/jquery-ui-1.10.3.custom.min.js" type="text/javascript"></script>
 
    <!-- Latest version (3.1.4) of jQuery Mouse Wheel by Brandon Aaron
         You will find it here: https://github.com/brandonaaron/jquery-mousewheel -->
    <script src="js/lib/jquery.mousewheel.min.js" type="text/javascript"></script>
 
    <!-- jQuery Kinectic (1.8.2) used for touch scrolling -->
    <!-- https://github.com/davetayls/jquery.kinetic/ -->
    <script src="js/lib/ <li>jquery.kinetic.min.js</li>
" type="text/javascript"></script>
 
    <!-- Smooth Div Scroll 1.3 minified-->
    <script src="js/lib/jquery.smoothdivscroll-1.3-min.js" type="text/javascript"></script>
    <!-- If you want to look at the uncompressed version you find it at
         js/jquery.smoothDivScroll-1.3.js -->
 
<!-- 初期化 -->
    <script type="text/javascript">
        // Initialize the plugin with no custom options
        $(document).ready(function () {
            // None of the options are set
            $("div.sliderBox").smoothDivScroll({
                autoScrollingMode: "onStart"
            });
        });
    </script>

注意としてはスライドする画像をfloat:leftにして、そもそも横並びにしておかないと動かないというとこでしょうか。

cssも呼び出しをわすれずにね

1	`<link rel="stylesheet"` `href="css/lib/smoothDivScroll.css">`