I have written a simple article publishing site in Django 1.8.
Here is the model that I'd like to slide:
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()
Now I want to slide the article teasers on front page. I am new to both Django and JS so wondering how best to make such slider?
I have googled and looked at Django packages but could not find anything that can kick me to start. So appreciate your hints.
Update: here is the view that I'd like to connect it to the carousel slider:
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))
An example using 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>
You didn't posted your js+html so here is an example library. Carousel
If you investigate, you see that you can link images in a single html. So if you want to do this in django way, you must pass your model to template and iterate items and create the html that you need.
Here is a start point example by using the linked javascript:
views.py ==>
def any_view(request):
retdict = {'articles': Article.objects.all(),}
return render_to_response("template.html", retdict, context_instance=RequestContext(request))
template.html ==>
<div id="owl-demo">
{%for article in articles%}
<div class="item"><img src="{{article.headimage}}" alt="Owl Image"></div>
{% endfor %}
</div>
javascript part ==>
$(document).ready(function() {
$("#owl-demo").owlCarousel({
autoPlay: 3000, //Set AutoPlay to 3 seconds
items : 4,
itemsDesktop : [1199,3],
itemsDesktopSmall : [979,3]
});
});
And next time remember that this is a Q&A site, please try something before asking a question and share this with us.
