Всем привет!
Я только обучаюсь, так что не судите строго. Хочу сделать свой сайт на 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;
}
Простой
Средний
