i have written simple article publishing site in django 1.8. here model i'd 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 want slide article teasers on front page. new both django , js wondering how best make such slider?
i have googled , looked @ django packages not find can kick me start. appreciate hints.
update: here view i'd connect 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 slides --> <div class="carousel-inner" role="listbox"> {% 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 , 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> 
Comments
Post a Comment