jQuery

【jQuery】軽量のスライダープラグインsSlider

November 28, 2018
sSlider

sSliderは、軽量のjQueryスライダーツールキットです。

HowTo

Link files

<head>
    ...
    <link rel="stylesheet" href="path/to/sSlider/css/jQuery.sSlider.min.css" />
    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script src="path/to/sSlider/jQuery.sSlider.min.js"></script>
    ...
</head>

Markup HTML

<body>
    ...
    <div id="mySlider" class="sSlider">
        <div><img src="path/to/image/new-york.jpg" /><span>New York</span></div>
        <div><img src="path/to/image/paris.jpg" /></div>
        <div><img src="path/to/image/cars.jpg" /><span>My new car</span></div>
        <div><img src="path/to/image/landscape.jpg" /></div>
    </div>
    ...
</body>

Usage

<script>
    $(document).ready(function(){
        $('#mySlider').sSlider();
    });
</script>

More options

  1. 'animationType'
  2. 'autoslide'
  3. 'fixedSize'
  4. 'nav'
  5. 'progressBar'
  6. 'responsive'
  7. 'speed'

Example

<script>
    $(document).ready(function(){
        $('#selector').sSlide({
            'animationType': 'slideV',
            'fixedSize': {
                'width': '1000px',
                'height': '400px'
            },
            'nav': false,
            'speed': 4000
        });
    ...
    });
</script>

MIT