Achieve a Netflix-like UI with FlexSlider2

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)
	

Reference material

FlexSlider2 [JQuery] Master how to use the super versatile slider FlexSlider.

Recommended Posts

Achieve a Netflix-like UI with FlexSlider2
Create a game UI from scratch with pygame2!
A4 size with python-pptx
Decorate with a decorator
Learn librosa with a tutorial 1
Draw a graph with NetworkX
Try programming with a shell!
Create a homepage with django
Using a printer with Debian 10
Make a fortune with Python
Create a heatmap with pyqtgraph
Achieve "Bals" with Amazon Echo
Create a directory with python
A little stuck with chainer
Draw a graph with networkx
Easily cProfile with a decorator
Make a fire with kdeplot