jQuery

【jQuery】各セクションに複数のイメージを交互に表示するウィンドウスライダーWindow Slider

December 25, 2018
Window Slider

Window Sliderは4つのセクションのウィンドウスライダー。各セクションに複数のイメージを交互に表示し、イメージを順番に回転させます。

HTML

<div id="slider-1" class="window-slider">
    <!-- TOP LEFT SLIDER -->
    <div class="tl-window">
      <img src="pics/1.png">
      <img src="pics/2.jpg">
    </div>
    
    <!-- TOP RIGHT SLIDER -->
    <div class="tr-window">
      <img src="pics/3.jpg">
      <img src="pics/4.jpg">
    </div>
    
    <!-- BOTTOM LEFT SLIDER -->
    <div class="bl-window">
      <img src="pics/5.jpg">
      <img src="pics/6.jpg">
    </div>
    
    <!-- BOTTOM RIGHT SLIDER -->
    <div class="br-window">
      <img src="pics/7.png">
      <img src="pics/8.jpg">
    </div>
</div>

FILES TO INCLUDE

<link rel="stylesheet" type="text/css" href="window.slider.css"/>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="window.slider.js"></script>

JAVASCRIPT

<script type="text/javascript">
    $(document).ready(function() {
       $('#slider-1').windowSlider();
    }); 
</script>

MIT