スライドアニメーションが素敵なjQueryスライダー「Slideshow with jmpress.js」

とても素敵なスライドアニメーションを実装することができるjQueryスライダー「Slideshow with jmpress.js」を使ってみました。滑らかで面白い動きをするので見ていて楽しいですね。使い方もとてもシンプルなので使いやすいプラグインかと思います。以下使い方です。

[ads_center]

使い方

jQuery本体とダウンロードしたプラグインを読み込みます。

<link rel="stylesheet" type="text/css" href="css/style.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="js/jmpress.min.js"></script>
<script type="text/javascript" src="js/jquery.jmslideshow.js"></script>

スライドさせるコンテンツの記述は以下のようにします。

<section id="jms-slideshow" class="jms-slideshow">
    <!-- Slider 1 -->
    <div class="step" data-color="color-1">
        <div class="jms-content">
            <h3>Slider 1</h3>
            <p>sample text sample text sample text sample text sample text sample text </p>
            <a class="jms-link" href="#">続きを読む</a>
        </div>
        <img src="images/1.png" />
    </div>

    <!-- Slider 2 -->
    <div class="step" data-color="color-2" data-y="500" data-scale="0.4" data-rotate-x="30">
        <div class="jms-content">
            <h3>Slider 2</h3>
            <p>sample text sample text sample text sample text sample text sample text </p>
            <a class="jms-link" href="#">続きを読む</a>
        </div>
        <img src="images/2.png" />
    </div>
		
    <!-- Slider 3 -->

    ・・・略・・・

</section>

あとはスライダーをセットすればOKです。

<script type="text/javascript">
$(function() {
    $('#jms-slideshow').jmslideshow();
});
</script>

各スライドの背景色などはstyle.cssの中にあるcolor-○で設定できます。このcolor-○をdata-colorに設定することで好きな背景色にすることができます。

.color-1 {
    background-color: #E3D8FF;
    background-color: rgba(227, 216, 268, 1);
}
.color-2 {
    background-color: #EBBBBC;
    background-color: rgba(235, 187, 188, 1);
}
.color-3 {
    background-color: #EED9C0;
    background-color: rgba(238, 217, 192, 1);
}
.color-4 {
    background-color: #DFEBB1;
    background-color: rgba(223, 235, 177, 1);
}
.color-5 {
    background-color: #C1E6E5;
    background-color: rgba(193, 230, 229, 1);
}

オプションを指定する場合は以下のようにします。

<script type="text/javascript">
$(function() {
    $('#jms-slideshow').jmslideshow({
        viewPort: {
            height: 400,
            width: 1000,
            maxScale: 1
        },
        fullscreen: false,
        hash: {use: false},
        mouse: {clickSelects: false},
        keyboard: {use: false},
        animation: {transitionDuration: '1s'}
    });
});
</script>

Slideshow with jmpress.jsのダウンロードやデモ、詳しい使い方は、以下のサイトで確認することができます。

Slideshow with jmpress.js | Codrops