FlexSlider2でNetflixっぽいUIを実現する #Python

Babelink（※アダルトサイトのため閲覧注意）をリニューアルするにあたってNetflixっぽいUIにするため、FlexSlider2を使用しました。
FlexSlider2では自動で幅調整をしてくれるので、item_widthパラメータを任意の値に設定してCSSで少しスタイルを調整するだけでスマホ画面にも対応したサイト作成が簡単にできます。

index.html

<head>
    <script src="/static/node_modules/flexslider/jquery.flexslider-min.js"></script>
    <link rel="stylesheet" type="text/css" href="/static/node_modules/flexslider/flexslider.css" />
</head>
<main>
{% for (title, item_list) in all_item_list %}
    <div class="flexslider-wrapper">
        <div class="flexslider-title">
            <span>
                {{ title }}
            </span>
        </div>
        <div class="flexslider">
            <ul class="slides">
                {% for item in item_list %}
                    <li>
                     <img
                        class="img-src"
                        src="{{ item.img_src }}"
                     />
                    </li>
                {% endfor %}
            </ul>
        </div>
    </div>
{% endfor %}
</main>
<script>
$(window).load(function() {
    $('.flexslider').flexslider({
        animation: "slide",
        slideshow: false,
        animationLoop: true,
        controlNav: false,
        itemWidth: 140,
        itemMargin: 4,
        prevText: "",
        nextText: ""
    });
});
</script>

app.py

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/', methods=['GET'])
def index():
    all_item_list = []

    # 一つの行に表示するアイテムを取得する
    item_list1 = get_item_list1()
    all_item_list.append('title1', item_list1)

    item_list2 = get_item_list2()
    all_item_list.append('title2', item_list2)
    .
    .
    .

    return render_template(
        'index.html',
        all_img_list=all_img_list)

参考資料

FlexSlider2
【jQuery】超万能スライダー FlexSlider の使い方をマスターする。