純粋な CSS3 のクールなカルーセル効果

簡単なチュートリアル

これは、純粋な CSS を使用して作成されたクールなカルーセル効果です。このカルーセル効果は、js ではなく、純粋な CSS3 を使用して作成されています。表と裏ナビゲーションボタンとページングナビゲーションボタンがあります。カルーセルのコンテンツは写真にすることができます

使用方法

csslider.default.css ファイルをページに導入します

<link rel="stylesheet" href="themes/csslider.default.css" />

HTML 構造

CSS3 カルーセルの HTML 構造は次のとおりです:

<p class="csslider">
    <input type="radio" name="slides" id="slides_1" checked />
    <input type="radio" name="slides" id="slides_2" />
    <input type="radio" name="slides" id="slides_3" />
    <input type="radio" name="slides" id="slides_4" />
    <input type="radio" name="slides" id="slides_N" />
    <ul>
        <li>Content of slide 1</li>
        <li>Content of slide 2</li>
        <li>Content of slide 3</li>
        <li>Content of slide 4</li>
        <li>Content of slide N</li>
    </ul>
    <p class="arrows">
        <label for="slides_1"></label>
        <label for="slides_2"></label>
        <label for="slides_3"></label>
        <label for="slides_4"></label>
        <label for="slides_N"></label>
        <label for="slides_1" class="goto-first"></label>
        <label for="slides_N" class="goto-last"></label>
    </p>
    <p class="navigation">
        <p>
            <label for="slides_1"></label>
            <label for="slides_2"></label>
            <label for="slides_3"></label>
            <label for="slides_4"></label>
            <label for="slides_N"></label>
        </p>
    </p>
</p>

上記は純粋な CSS3 のクールなカルーセルです。コンテンツについては、PHP 中国語 Web サイト (www.php.cn) に注目してください