我在 Django 1.8 中编写了一个简单的文章发布站点。
这是我想滑动的模型:
class Article(models.Model):
nid = models.IntegerField(default=0)
headimage = ImageWithThumbsField(upload_to='images', blank=True, sizes=((200,200),(400,400)))
title = models.CharField(max_length=100)
author = models.CharField(max_length=100, blank=True)
body = models.TextField()
teaser = models.TextField('teaser', blank=True)
created=models.DateTimeField(default=datetime.datetime.now)
pub_date=models.DateTimeField(default=datetime.datetime.now)
categories = models.ManyToManyField(Category, blank=True)
tags = TaggableManager()
现在我想在首页滑动文章预告片。我对 Django 和 JS 都是新手，所以想知道如何最好地制作这样的 slider ？
我已经用谷歌搜索并查看了 Django 包，但找不到任何可以让我开始的东西。所以感谢你的提示。
更新:这是我想将其连接到轮播 slider 的 View :
def main(request):
"""Main listing."""
posts = Article.objects.all().order_by("-pub_date")[:5]
return render_to_response("article/list-articles.html",
dict(posts=posts, user=request.user))
最佳答案
使用 bootstrap's carousel 的示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example of Bootstrap 3 Carousel</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<style type="text/css">
</style>
</head>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
<li data-target="#myCarousel" data-slide-to="4"></li>
<li data-target="#myCarousel" data-slide-to="5"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
{% for p in posts %}
{% if forloop.counter == 1 %}
<div class="item active">
{% else %}
<div class="item">
{% endif %}
<img src="{{ p.headimage.url }}" alt="Image" width="460" height="345">
<div class="carousel-caption">
<h3>{{ p.title }}</h3>
<p>{{ p.teaser }}</p>
</div>
</div>
{% endfor %}
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</html>
关于django - 如何在 django 中制作对象 slider ？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30119351/