Réalisez une interface utilisateur de type Netflix avec FlexSlider2

FlexSlider2 a été utilisé pour faire ressembler l'interface utilisateur à Netflix lors du renouvellement de Babelink (* Soyez prudent lorsque vous naviguez car il s'agit d'un site réservé aux adultes). FlexSlider2 ajuste automatiquement la largeur, de sorte que vous pouvez facilement créer un site qui prend également en charge les écrans de smartphone en définissant le paramètre ʻitem_width` sur une valeur arbitraire et en ajustant un peu le style avec 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 = []

    #Obtenez les éléments à afficher sur une seule ligne
    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)
	

Matériel de référence

FlexSlider2 [JQuery] Maîtrisez comment utiliser le curseur ultra polyvalent FlexSlider.

Recommended Posts

Réalisez une interface utilisateur de type Netflix avec FlexSlider2
Créez une interface utilisateur de jeu à partir de zéro avec pygame2!
Format A4 avec python-pptx
Décorer avec un décorateur
Apprenez librosa avec un tutoriel 1
Dessinez un graphique avec NetworkX
Essayez de programmer avec un shell!
Créer une page d'accueil avec django
Utiliser une imprimante avec Debian 10
Faites une loterie avec Python
Obtenez "Bals" avec Amazon Echo
Créer un répertoire avec python
Un peu coincé dans le chainer
Dessinez un graphique avec networkx
Créez facilement un profil avec un décorateur
Faire un feu avec kdeplot