jQuery

【jQuery】シンプルなjQueryスライダープラグインSimple slider

February 25, 2018
simple-slider

Simple sliderはシンプルなjQueryスライダープラグイン。

HTML

   <div class="section" style="padding: 40px;">
        <h2>Simple slider</h2>
        <h4>Example</h4>
    </div>
    <div class="section">
        <div class="slider" slide-interval="6000">
            <div class="slide active">
                <div class="slide-img" img-src="img/s1.jpg"></div>
                <div class="substrate"></div>
                <div class="slide-text">
                    <h4>Simple slider (carousel)</h4>
                    <p>For your page</p>
                </div>
            </div>
            <div class="slide">
                <div class="slide-img" img-src="img/s2.jpg"></div>
                <div class="substrate"></div>
                <div class="slide-text">
                    <h4>Responsive</h4>
                    <p>For desktop and mobile</p>
                </div>
            </div>
            <div class="slide">
                <div class="slide-img" img-src="img/s3.jpg"></div>
                <div class="substrate"></div>
                <div class="slide-text">
                    <h4>Built into any unit</h4>
                    <p>Any height</p>
                </div>
            </div>
            <div class="slide-pre"></div>
            <div class="slide-next"></div>
        </div>
    </div>

    <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="js/materialize.min.js"></script>    
    <script src="js/slider.js"></script>