@Insssane

Не работает CSS слайдер?

Всем привет!
Я только обучаюсь, так что не судите строго. Хочу сделать свой сайт на Django и на нём сделать carousel. Слайдер сделал на CSS по туториалу, но переключение между слайдами не рабортает. Сам Django видит все єлементы, проблема скорее всего в HTML или CSS

Вот код главной странички:
{% 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/bootstrap@5.0.0-beta3/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>


Вот код шаблона блока content
{% 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 %}


Вот сам _card.html:
<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>


Вот сам CSS:
*{
    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;
}
  • Вопрос задан
  • 77 просмотров
Решения вопроса 1
LenovoId
@LenovoId
I want, women not to get sick
у вас margin-left: -20; чего минус ? надо указать px, метр, километр
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
Спасибо, за подробное описание проблемы. В таком случае могу только пожелать сделать так, чтобы он работал.
Еще не совсем понятно, нужны ли здесь теги питон и джанго, т.к. вообще не ясно из-за чего что-то не работает.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы