[PYTHON] Realisieren Sie eine Netflix-ähnliche Benutzeroberfläche mit FlexSlider2

FlexSlider2 wurde verwendet, um die Benutzeroberfläche beim Erneuern von Babelink wie Netflix aussehen zu lassen (* Seien Sie beim Surfen vorsichtig, da es sich um eine Website für Erwachsene handelt). FlexSlider2 passt die Breite automatisch an, sodass Sie problemlos eine Site erstellen können, die auch Smartphonebildschirme unterstützt, indem Sie den Parameter "item_width" auf einen beliebigen Wert setzen und den Stil mit CSS ein wenig anpassen.

`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 = []

    #Lassen Sie die Elemente in einer Zeile anzeigen
    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)

Referenzmaterial

FlexSlider2 [JQuery] Beherrschen Sie die Verwendung des vielseitigen Schiebereglers FlexSlider.