Jan*_*and 2 django django-templates
我在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的新手，所以想知道如何最好地制作这种滑块？
我已经用Google搜索并查看了Django程序包，但找不到任何能使我开始的东西。因此，感谢您的提示。
更新：这是我想将其连接到轮播滑块的视图：
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))
你没有发布你的 js+html 所以这里是一个示例库。旋转木马
如果您进行调查，您会发现可以在单个 html 中链接图像。因此，如果您想以 django 方式执行此操作，则必须将模型传递给模板并迭代项目并创建所需的 html。
这是使用链接的 javascript 的起点示例：
视图.py ==>
def any_view(request):
retdict = {'articles': Article.objects.all(),}
return render_to_response("template.html", retdict, context_instance=RequestContext(request))
模板.html ==>
<div id="owl-demo">
{%for article in articles%}
<div class="item"><img src="{{article.headimage}}" alt="Owl Image"></div>
{% endfor %}
</div>
javascript 部分 ==>
$(document).ready(function() {
$("#owl-demo").owlCarousel({
autoPlay: 3000, //Set AutoPlay to 3 seconds
items : 4,
itemsDesktop : [1199,3],
itemsDesktopSmall : [979,3]
});
});
下次记住这是一个问答网站，请在提出问题之前尝试一些并与我们分享。
使用bootstrap的轮播的示例：
<!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>
| 归档时间： |
|
| 查看次数： |
8401 次 |
| 最近记录： |