CSS slider not working?

I

Insssane2021-05-08 20:50:06

css

Insssane, 2021-05-08 20:50:06

Hello!
I'm just learning, so don't judge too harshly. I want to make my own site on Django and make a carousel on it. The slider was made on CSS according to the tutorial, but switching between slides does not work. Django itself sees all the elements, the problem is most likely in HTML or CSS

. Here is the code for the main page:

{% load static %}
<!doctype html>
<html lang="en">
<head>

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
  <link rel="stylesheet" href="{% static 'bootstrap/css/bootstrap.min.css' %}">
  <link rel="stylesheet" href="{% static 'css/style.css' %}">
  <link rel="stylesheet" href="{% static 'css/cards.css' %}">

  <title>{% block title %}{{ title }}{% endblock title %}</title>
</head>
<body>
{% include 'inc/_nav.html' %}

<div class="container mt-3">
  <div class="row">

    <div class="col-md-12">
      {% block content %}
      {% endblock content %}
    </div>

  </div>
</div>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
    integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"
    integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>

</body>
</html>

Here is the content block template code

{% extends 'base.html' %}
{% block content %}

<div class="slider middle">
  <div class="slides">

    <input type="radio" name="r" id="r1" checked>
    <input type="radio" name="r" id="r2">
    <input type="radio" name="r" id="r3">
    <input type="radio" name="r" id="r4">
    <input type="radio" name="r" id="r5">

    <div class="slide s1">
      {% for item in player %}
      {% if item.pk == 1 %}
      {% include 'inc/_card.html' %}
      {% endif %}
      {% endfor %}
    </div>

    <div class="slide">
      {% for item in player %}
      {% if item.pk == 2 %}
      {% include 'inc/_card.html' %}
      {% endif %}
      {% endfor %}
    </div>

    <div class="slide">
      {% for item in player %}
      {% if item.pk == 3 %}
      {% include 'inc/_card.html' %}
      {% endif %}
      {% endfor %}
    </div>

    <div class="slide">
      {% for item in player %}
      {% if item.pk == 4 %}
      {% include 'inc/_card.html' %}
      {% endif %}
      {% endfor %}
    </div>

    <div class="slide">
      {% for item in player %}
      {% if item.pk == 5 %}
      {% include 'inc/_card.html' %}
      {% endif %}
      {% endfor %}
    </div>

  </div>

  <div class="navigation">
    <label for="r1" class="bar"></label>
    <label for="r2" class="bar"></label>
    <label for="r3" class="bar"></label>
    <label for="r4" class="bar"></label>
    <label for="r5" class="bar"></label>
  </div>

</div>
{% endblock content %}

Here is the _card.html itself:

<div class="carousel-item active">
    <div class="row">
        <div class="offset-sm-2 col-sm-3 col-md-2"><img src="https://assets.faceit-cdn.net/avatars/1b979225-67f4-47bb-b373-6e18a6d32d31_1586879744947.jpg" width="260"  class="img-fluid rounded-circle d-block m-auto pb-3" alt="{{ item.full_name }}">
        </div>
        <div class="offset-md-1 col-md-5 col-sm-5">
            <div class="review">
                <h4 class="card-title">{{ item.full_name }}</h4>
                <div class="review-author">
                    <p class="card-text">{{ item.content|truncatewords:90 }}</p>
                </div>
            </div>
        </div>
    </div>
</div>

Here is the CSS itself:

*{
    margin: 0;
    padding: 0;
}

body{
    background-color: #FFF;
}

.slider{
    width: 900px;
    height: 400px;
    overflow: hidden;
    border: 1px solid #ddd;
}

.middle{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.navigation{
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
}

.bar{
    height: 6px;
    width: 25px;
    margin: 6px;
    cursor: pointer;
    background-color: #ddd;
    opacity: .5;
    border-radius: 10px;
    transition: all .3s ease;
}

.bar:hover{
    opacity: .8;
    transform:scale(1.1);
}

input[name="r"]{
    position: absolute;
    visibility: hidden;
}

.slides{
    width: 500%;
    height: 100%;
    display: flex;
}

.slide{
    width: 20%;
    transition: all .6s ease;
}

#r1:checked ~ .s1{
    margin-left: 0;
}

#r2:checked ~ .s1{
    margin-left: -20;
}


#r3:checked ~ .s1{
    margin-left: -40;
}


#r4:checked ~ .s1{
    margin-left: -60;
}


#r5:checked ~ .s1{
    margin-left: -80;
}

Reply

Answer the question

In order to leave comments, you need to log in

2 answer(s)

A

A person from Kazakhstan, 2021-05-09
@Insssane

you have margin-left: -20; what's the minus? you need to specify px, meter, kilometer

M

maksam07, 2021-05-08
@maksam07

Thanks for the detailed description of the problem. In that case, I can only wish to make it work.
It's still not entirely clear whether the python and django tags are needed here, because. It's not at all clear why something is not working.