FlexSlider2 was used to make the UI look like Netflix when renewing Babelink (* Be careful when browsing because it is an adult site). FlexSlider2 automatically adjusts the width, so you can easily create a site that also supports smartphone screens by setting the ʻitem_width` parameter to an arbitrary value and adjusting the style a little with 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 = []
#Get the items to display on one line
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] Master how to use the super versatile slider FlexSlider.
Recommended Posts