jQuery

【jQuery】シンプルなコンテンツスライダープラグインContent Slider

October 25, 2017
jQuery Content Slider

Content Sliderはシンプルなコンテンツスライダープラグイン。

    <div id="container">
      <header>
        <h1>jQuery Content Slider</h1>
      </header>
      <img src="img/arrow-left.png" id="prev"/>
      <div id="slider">
        <div class="slide">
          <div class="slide-copy">
            <h2>slide 1</h2>
            <p>Click the arrow button to get the previous or next slides</p>
          </div>
          <img src="img/slide1.jpg" />
        </div>

        <div class="slide">
          <div class="slide-copy">
            <h2>slide 2</h2>
            <p>Click the arrow button to get the previous or next slides</p>
          </div>
          <img src="img/slide2.jpg" />
        </div>

        <div class="slide">
          <div class="slide-copy">
            <h2>slide 3</h2>
            <p>Click the arrow button to get the previous or next slides</p>
          </div>
          <img src="img/slide3.jpg" />
        </div>

        <div class="slide">
          <div class="slide-copy">
            <h2>slide 4</h2>
            <p>Click the arrow button to get the previous or next slides</p>
          </div>
          <img src="img/slide4.jpg" />
        </div>

        <div class="slide">
          <div class="slide-copy">
            <h2>slide 5</h2>
            <p>Click the arrow button to get the previous or next slides</p>
          </div>
          <img src="img/slide5.jpg" />
        </div>

        <div class="slide">
          <div class="slide-copy">
            <h2>slide 6</h2>
            <p>Click the arrow button to get the previous or next slides</p>
          </div>
          <img src="img/slide6.jpg" />
        </div>

        <div class="slide">
          <div class="slide-copy">
            <h2>slide 7</h2>
            <p>Click the arrow button to get the previous or next slides</p>
          </div>
          <img src="img/slide7.jpg" />
        </div>
      </div>
      <img src="img/arrow-right.png" id="next"/>
    </div>


    <script src="./jquery-3.2.1.min.js"></script>
    <script src="js/main.js"></script>