jQuery

【jQuery】シンプルなレスポンシブスライダーNineslider

July 8, 2017

Ninesliderはシンプルなレスポンシブスライダープラグイン。

JS

<!-- JavaScript -->
<!--<script type="text/javascript" src="js/nineslider.js"></script>-->

<!-- jQuery -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script type="text/javascript" src="jquery/jquery.nineslider.js"></script>

HTML

<ul id="demo1"> 
    <li>
        <img src="images/1.jpg" />
        <div class="caption">
            This is a caption
        </div>
    </li>
    <li>
        <img src="images/2.jpg" />
        <div class="caption">
            This is another caption with <a href="https://github.com/9bitStudios/nineslider" target="_blank">a link</a>
        </div>
    </li>
    <li>
        <img src="images/3.jpg" />
    </li>
    <li>
        <img src="images/4.jpg" />
    </li>                                                       
</ul>

<script type="text/javascript">
/*** JavaScript ***/
// window.addEventListener("load", function(){
//     nineslider(document.getElementById("demo1"), { });
// });
/*** jQuery ***/
$(window).on('load', function() {
    $('#demo1').nineslider();
});
</script>

Download