How to make an object slider in django?

Question

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))

What do you mean by a "slider"? A carousel? You'll need to do it in Javascript. — Daniel Roseman, May 08 '15 at 08:43
Yes I mean a carousel content/image slider. I don't know how to connect rady-made ones to django views through ajax. — Jand, May 08 '15 at 08:49
In the same way you'd do it with any other framework: write a view that returns the relevant JSON. — Daniel Roseman, May 08 '15 at 09:09
Daniel, I added the views. Could you please elaborate how to send and receive json to the template? — Jand, May 08 '15 at 09:17

score 10 · Accepted Answer · answered May 08 '15 at 10:12

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>

This doesn't work without JavaScript and the JavaScript part is missing. I would be very interested to see how the wrapper for slides work. — ionecum, Oct 27 '21 at 15:29
Also, in bootstrap 5 data-slide-to is data-bs-slide-to. I must see if this'll word this way. — ionecum, Oct 29 '21 at 05:01

obayhan · Answer 2 · 2019-02-27T12:56:48.380

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.

Link to library is broken – Parikshit Chalke Feb 27 '19 at 11:43 — Parikshit Chalke, Feb 27 '19 at 11:43

How to make an object slider in django?

2 Answers2

Linked