-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathshow_cards_new.php
105 lines (94 loc) · 3.83 KB
/
show_cards_new.php
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
<?php
$id = $_GET['id']
?>
<!DOCTYPE html>
<html lang="en" class="h-100">
<head>
<meta charset="UTF-8"/>
<link rel="stylesheet" href="style/cards_style_new.css" />
<meta name="theme-color" content="#ffffff"/>
<title>Карточки</title>
</head>
<body class="bg-light d-flex flex-column h-100">
<?php include 'inc/header.php';?>
<div class="container">
<p class="mt-5 collection_title">Давление в жидкостях</p>
<div class="liner"></div>
<!-- <div class="filter_conteiner mt-lg-5 mb-5">-->
<!-- <div style="display: flex; height: 100%; justify-content: space-evenly;">-->
<!-- <div class="filter nonselected"><p style="margin-top: 5%">Математика</p></div>-->
<!-- <div class="filter selected sel_purple"><p style="margin-top: 5%">7Класс</p></div>-->
<!-- <div class="filter selected sel_blue"><p style="margin-top: 5%">Давление</p></div>-->
<!-- <div class="filter selected sel_green"><p style="margin-top: 5%">Тип</p></div>-->
<!-- </div>-->
<!-- </div>-->
<div class="container d-flex flex-wrap align-items-center justify-content-center mt-lg-5">
<div id="slider" class="carousel slide" data-ride="carousel">
<div class="card active"></div>
<a id="prev_btn" class="carousel-control-prev" role="button" data-slide="prev" style="color: black">
PREV
</a>
<a id="next_btn" class="carousel-control-next" role="button" data-slide="next" style="color: black">
NEXT
</a>
</div>
</div>
</div>
<?php include 'inc/footer.php';?>
<script src="/libs/jquery-3.6.1.min.js"></script>
<script src="/libs/anime.min.js"></script>
<script>
document.querySelector("#prev_btn").addEventListener('click', function (){
anime({
targets: "#slider",
translateX: -2050,
duration: 300,
easing: 'easeInOutExpo',
complete: function(anim){
// card.style.visibility = "hidden";
anime({
targets: "#slider",
translateX: +2050,
duration: 0,
complete: function(anim){
anime({
targets: "#slider",
translateX: 0,
easing: 'easeInOutExpo',
duration: 300,
});
}
});
}
});
});
document.querySelector("#next_btn").addEventListener('click', function (){
anime({
targets: "#slider",
translateX: +2050,
duration: 300,
easing: 'easeInOutExpo',
complete: function(anim){
playing = false;
// card.style.visibility = "hidden";
anime({
targets: "#slider",
translateX: -2050,
duration: 0,
complete: function(anim){
anime({
targets: "#slider",
translateX: 0,
easing: 'easeInOutExpo',
duration: 300,
});
}
});
}
});
});
document.querySelector(".card").addEventListener('click', function (){
});
</script>
</body>
</html>