February 17, 2017

CSS FadeshowはCSSのみ作成されたフェードエフェクト（フェード効果付きのスライドショー）。スライドショーはSCSSで構築されており、カスタマイズとサイトへの容易な適応が可能。

<div data-am-fadeshow="quick-nav prev-next-nav slide-counter autoplay ken-burns">

    <!-- Radio -->
    <input type="radio" name="css-fadeshow" id="slide-1" />
    <input type="radio" name="css-fadeshow" id="slide-2" />
    <input type="radio" name="css-fadeshow" id="slide-3" />

    <!-- Slides -->
    <div class="fs-slides">
        <div class="fs-slide">
            <div class="fs-slide-bg" style="background-image: url();"></div>
            <!-- Other content goes here... -->
        </div>
        <div class="fs-slide">
            <div class="fs-slide-bg" style="background-image: url();"></div>
            <!-- Other content goes here... -->
        </div>
        <div class="fs-slide">
            <div class="fs-slide-bg" style="background-image: url();"></div>
            <!-- Other content goes here... -->
        </div>
    </div>

    <!-- Quick Navigation -->
    <div class="fs-quick-nav">
        <label class="fs-quick-btn" for="slide-1"></label>
        <label class="fs-quick-btn" for="slide-2"></label>
        <label class="fs-quick-btn" for="slide-3"></label>
    </div>

    <!-- Prev Navigation -->
    <div class="fs-prev-nav">
        <label class="fs-prev-btn" for="slide-1"></label>
        <label class="fs-prev-btn" for="slide-2"></label>
        <label class="fs-prev-btn" for="slide-3"></label>
    </div>

    <!-- Next Navigation -->
    <div class="fs-next-nav">
        <label class="fs-next-btn" for="slide-1"></label>
        <label class="fs-next-btn" for="slide-2"></label>
        <label class="fs-next-btn" for="slide-3"></label>
    </div>

    <!-- Slide Counter (only one required) -->
    <div class="fs-slide-counter">
        <span class="fs-slide-counter-current"></span>/<span class="fs-slide-counter-total"></span>
    </div>

</div>

quick-nav

<div data-am-fadeshow="quick-nav"></div>

prev-next-nav

<div data-am-fadeshow="prev-next-nav"></div>

slide-counter

<div data-am-fadeshow="slide-counter"></div>

autoplay

<div data-am-fadeshow="autoplay"></div>

headタグにCSSを追加

<link rel="stylesheet" href="YOUR_PATH/css-fadeshow.min.css">

MIT