jQuery

【jQuery】カスタムjQueryスライダーPrrple Slider

September 1, 2016
prrple slider

Prrple Sliderは水平方向にフェード、スライドだけでなく、スライド方向を垂直にしたり、レスポンシブ、スワイプにも対応しているカスタムjQueryスライダープラグイン。

JS&CSS

	<!-- STYLES -->
	<link href="../prrple.slider.css" rel="stylesheet" type="text/css">
	<link href="styles.css" rel="stylesheet" type="text/css" />
	
	<!-- MODERNIZR -->
	<script src="modernizr.js"></script>
	
	<!-- JQUERY -->
	<script src="jquery.1.11.1.min.js"></script>
	
	<!-- JQUERY TOUCHSWIPE -->
	<script src="jquery.touchSwipe.1.6.min.js"></script>
	
	<!-- PRRPLE SLIDER -->
	<script src="../prrple.slider.js"></script>
	
	<!-- CUSTOM SCRIPTS -->
	<script src="scripts.js"></script>

Slider 1

<div class="container" id="slider1">
  <h1>1 - Fade</h1>
  <div class="slider">
    <div class="slider_area">
      <div class="slides">
        <div class="slide">
          <div class="slidetitle">1</div>
        </div>
        <div class="slide">
          <div class="slidetitle">2</div>
        </div>
        <div class="slide">
          <div class="slidetitle">3</div>
        </div>
        <div class="slide">
          <div class="slidetitle">4</div>
        </div>
      </div>
    </div>
    <div class="slider_nav"></div>
      <a class="slider_left">Left</a>
      <a class="slider_right">Right</a>
    </div>
</div>

MITライセンス