How to have an slider with dynamic data on django

by Juan Martin Zabala   Last Updated June 30, 2020 02:26 AM

I have been trying to recreate snapchat's hoop matchmaking app on django and I have realize that in the main page there is a kind of slider that shows the users "profile" and the person using it has to swipe throught this users to find a friend. The problem comes when trying to implement the slider with the dynamic data in my project, I dont know how to have an slider with dynamic data. How can I achieve this? Any idea helps.

html (mates-grid-2-content which is suposed to redirect me to the previus user, mates-grid-1-content which has users info and mates-grid-3-content which is suposed to redirect me to the next user, are the main ones)

    <div class="mates-grid-1-1-content">
        <div class="mates-grid-2-content">
            prev
        </div>
        <div class="mates-grid-1-content">
            <div class="mates-item-content">
                <img class="mate-pic" src="{{ user.profile.profile_pic.url }}" >
            </div>
            <div class="mates-item-content">
                <a href="{% url 'profile' username=content.user.username %}" style="float: left">{{ content.user }}</a>
            </div>
            <div class="mates-item-content">
                <div class="responses">
                    <div class="response-item-img">
                        <img class="mates-image" src="{{ content.req_image.url }}" width="400px">
                    </div>
                    <div class="response-item-bio">
                      <p>{{ content.req_bio }}</p>
                    </div>
                    <div class="response-item-button">
                        <button type="submit">Submit</button>
                    </div>
                </div>
            </div>
        </div>
       <div class="mates-grid-3-content">
           next
       </div>
   </div>

css

    .mates-grid-1-1-content {
        display: grid;
        text-align: center;
        justify-content: center;
        align-self: center;
        grid-column: 1;
        grid-row: 2;
        grid-template-columns: 15% 70% 15%;
        grid-auto-rows: 1fr;
        height: 100%;
        grid-auto-flow: column;
    }

    .mates-grid-2-content {
        grid-column:1;
        justify-content: center;
        align-self: center;
    }
    .mates-grid-3-content {
        grid-column:3;
        justify-content: center;
        align-self: center;
    }
    .mates-grid-1-content {
        display: grid;
        text-align: center;
        justify-content: center;
        align-self: center;
        grid-column: 2;
        grid-template-columns: 70px 28% 28%;
        grid-template-rows: .1fr 5fr;
        height: 95%;
        grid-auto-flow: row;

    }

If you have any questions please let me know in the comments;)



Related Questions




Display intro video first visit only Django

Updated November 24, 2018 11:26 AM

JavaScript code not working for external file

Updated December 31, 2018 11:26 AM