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)
FlexSlider2 [JQuery] Maîtrisez comment utiliser le curseur ultra polyvalent FlexSlider.
Recommended Posts