rails

Railsでスライドショーライブラリ『skippr』を使ってみた


Railsでスライドショーライブラリ『skippr』を使ったのですが、

5秒ほどハマったのでメモ。

 

「skippr」とは

有名スライドショーライブラリです。なんかカッコいいです。見て見てください。
http://austenpayan.github.io/skippr/

 

railsでjsライブラリなどを導入するときの注意点

どこにライブラリのファイルを置けばいいの??

A.

Vendorです。

Vendor/assets/javascriptsの中です。

skipprの場合はcssもあるので

vendor/assets/stylesheetsの中にもファイルを入れる必要があります。

 

ファイルを置いただけじゃ動かない。繋いであげる必要がある。

このように記述すると動きます。

*= require_tree .
 *= require_tree ../../../vendor/assets/stylesheets/.
 *= require_self
 */

*= require_tree ../../../vendor/assets/stylesheets/.

が大事です。意味はvendor/assets/stylesheets下の全てをrequireしてます。

 

 

//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require_tree ../../../vendor/assets/javascripts/.
//= require_tree .

//= require_tree ../../../vendor/assets/javascripts/.

が大事です。意味はvendor/assets/javascripts下の全てをrequireしてます。

 

最終的にはこんなかんじ

 

<div id="container">
        <div id="theTarget">
            <div style="background-image: url(img/test1.jpg)"></div>
            <div style="background-image: url(img/test2.jpg)"></div>
            <div style="background-image: url(img/test3.jpg)"></div>
            <div style="background-image: url(img/test4.jpg)"></div>
            <div style="background-image: url(img/test5.jpg)"></div>
        </div>
</div>

//= require jquery
//= require jquery_ujs
//= require jquery.turbolinks
//= require turbolinks
//= require_tree ../../../vendor/assets/javascripts/.
//= require_tree .
//Skipprの初期化
$(function(){
$("document").ready(function() {

// オプションを指定してSkipprの実行
$("#theTarget").skippr({
    // スライドショーの変化 ("fade" or "slide")
    transition : 'slide',
    // 変化に係る時間(ミリ秒)
    speed : 1000,
    // easingの種類
    easing : 'easeOutQuart',
    // ナビゲーションの形("block" or "bubble")
    navType : 'block',
    // 子要素の種類("div" or "img")
    childrenElementType : 'div',
    // ナビゲーション矢印の表示(trueで表示)
    arrows : true,
    // スライドショーの自動再生(falseで自動再生なし)
    autoPlay : true,
    // 自動再生時のスライド切替間隔(ミリ秒)
    autoPlayDuration : 1000,
    // キーボードの矢印キーによるスライド送りの設定(trueで有効)
    keyboardOnAlways : true,
    // 一枚目のスライド表示時に戻る矢印を表示するかどうか(falseで非表示)
    hidePrevious : false
});
});

});

*= require_tree .
 *= require_tree ../../../vendor/assets/stylesheets/.
 *= require_self
 */

 #container{
 	height: 500px;
 }


ABOUT ME
ささお
3年目iOSエンジニア。 スタートアップで働いておりやす。 プログラミングスクールとエンジニアのキャリアを考えたい。 作ったアプリ - https://apps.apple.com/us/app/loverprofile/id1463563845?l=ja&ls=1