jQuery

【jQuery】アニメーション付きjQuery画像スライドショーOffbeatSlider

April 25, 2017
offbeatSlider

OffbeatSliderはプラグインを使用して、サムネイルプレビューやページヘッダー用のイメージスライドショーを作成できます。

Installation

<!doctype html>
<html lang="">
<head>
    <!-- YOUR HEADER -->
    <link rel="stylesheet" href="css/offbeat-slider.css">
</head>
<body>

    <!-- YOUR CONTENT -->

    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>

    <!-- offbeatSlider Plugin -->
    <script src="js/offbeat-slider.js"></script>
</body>
</html>

Quick Example

Code:

<!-- Left example -->

<div class="ofp-slider" data-slider-index="1">
    <img class="ofp-slides" src="img/Hydrangeas.jpg">
    <img class="ofp-slides" src="img/Jellyfish.jpg">
    <img class="ofp-slides" src="img/Koala.jpg">

    <div class="ofp-slider-navigation ofp-center ofp-middle">
        <div class="ofp-arrow-left">&#10094;</div>
        <div class="ofp-arrow-right">&#10095;</div>
    </div>
    <div class="ofp-slider-navigation ofp-bottom-middle">
        <span class="ofp-slider-dots"></span>
        <span class="ofp-slider-dots"></span>
        <span class="ofp-slider-dots"></span>
    </div>
</div>


 <!-- Right example -->

<div class="ofp-slider" data-slider-index="2">
    <img class="ofp-slides" src="img/Hydrangeas.jpg">
    <img class="ofp-slides" src="img/Jellyfish.jpg">
    <img class="ofp-slides" src="img/Koala.jpg">

    <div class="ofp-slider-navigation ofp-top-right">
        <div class="ofp-arrow-left"> &#10096;</div>
        <div class="ofp-arrow-right"> &#10097;</div>
    </div>
    <div class="ofp-slider-navigation ofp-center ofp-bottom-middle">
        <span class="ofp-slider-dots"></span>
        <span class="ofp-slider-dots"></span>
        <span class="ofp-slider-dots"></span>
    </div>
</div>

MIT