カルーセルスライダーが表示されません。

以下のサイト(https://dubdesign.net/web/ui-design/carousel-ui/)からコピペをしてカルーセルを表示させたいのですが、画面に表示されませんので、お助け下さい。

html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>Document</title>
7    <link rel="stylesheet" href="style.css">
8
9    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
10</head>
11<body>
12    <div class="carousel">
13        <div class="carousel-inner">
14            <input class="carousel-open" type="radio" id="carousel-1" name="carousel" aria-hidden="true" hidden="" checked="checked">
15            <div class="carousel-item">
16                <img src="http://fakeimg.pl/2000x800/0079D8/fff/?text=Without">
17            </div>
18            <input class="carousel-open" type="radio" id="carousel-2" name="carousel" aria-hidden="true" hidden="">
19            <div class="carousel-item">
20                <img src="http://fakeimg.pl/2000x800/DA5930/fff/?text=JavaScript">
21            </div>
22            <input class="carousel-open" type="radio" id="carousel-3" name="carousel" aria-hidden="true" hidden="">
23            <div class="carousel-item">
24                <img src="http://fakeimg.pl/2000x800/F90/fff/?text=Carousel">
25            </div>
26            <label for="carousel-3" class="carousel-control prev control-1">‹</label>
27            <label for="carousel-2" class="carousel-control next control-1">›</label>
28            <label for="carousel-1" class="carousel-control prev control-2">‹</label>
29            <label for="carousel-3" class="carousel-control next control-2">›</label>
30            <label for="carousel-2" class="carousel-control prev control-3">‹</label>
31            <label for="carousel-1" class="carousel-control next control-3">›</label>
32            <ol class="carousel-indicators">
33                <li>
34                    <label for="carousel-1" class="carousel-bullet">•</label>
35                </li>
36                <li>
37                    <label for="carousel-2" class="carousel-bullet">•</label>
38                </li>
39                <li>
40                    <label for="carousel-3" class="carousel-bullet">•</label>
41                </li>
42            </ol>
43        </div>
44    </div>
45
46  </body>
47</html>

css
1.carousel {
2    position: relative;
3    box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.64);
4    margin-top: 26px;
5    margin-bottom: 26px;
6}
7
8.carousel-inner {
9    position: relative;
10    overflow: hidden;
11    width: 100%;
12}
13
14.carousel-open:checked + .carousel-item {
15    position: static;
16    opacity: 100;
17}
18
19.carousel-item {
20    position: absolute;
21    opacity: 0;
22    -webkit-transition: opacity 0.6s ease-out;
23    transition: opacity 0.6s ease-out;
24}
25
26.carousel-item img {
27    display: block;
28    height: auto;
29    max-width: 100%;
30}
31
32.carousel-control {
33    background: rgba(0, 0, 0, 0.28);
34    border-radius: 50%;
35    color: #fff;
36    cursor: pointer;
37    display: none;
38    font-size: 40px;
39    height: 40px;
40    line-height: 35px;
41    position: absolute;
42    top: 50%;
43    -webkit-transform: translate(0, -50%);
44    cursor: pointer;
45    -ms-transform: translate(0, -50%);
46    transform: translate(0, -50%);
47    text-align: center;
48    width: 40px;
49    z-index: 10;
50}
51
52.carousel-control.prev {
53    left: 2%;
54}
55
56.carousel-control.next {
57    right: 2%;
58}
59
60.carousel-control:hover {
61    background: rgba(0, 0, 0, 0.8);
62    color: #aaaaaa;
63}
64
65#carousel-1:checked ~ .control-1,
66#carousel-2:checked ~ .control-2,
67#carousel-3:checked ~ .control-3 {
68    display: block;
69}
70
71.carousel-indicators {
72    list-style: none;
73    margin: 0;
74    padding: 0;
75    position: absolute;
76    bottom: 2%;
77    left: 0;
78    right: 0;
79    text-align: center;
80    z-index: 10;
81}
82
83.carousel-indicators li {
84    display: inline-block;
85    margin: 0 5px;
86}
87
88.carousel-bullet {
89    color: #fff;
90    cursor: pointer;
91    display: block;
92    font-size: 35px;
93}
94
95.carousel-bullet:hover {
96    color: #aaaaaa;
97}
98
99#carousel-1:checked ~ .control-1 ~ .carousel-indicators li:nth-child(1) .carousel-bullet,
100#carousel-2:checked ~ .control-2 ~ .carousel-indicators li:nth-child(2) .carousel-bullet,
101#carousel-3:checked ~ .control-3 ~ .carousel-indicators li:nth-child(3) .carousel-bullet {
102    color: #428bca;
103}
104
105#title {
106    width: 100%;
107    position: absolute;
108    padding: 0px;
109    margin: 0px auto;
110    text-align: center;
111    font-size: 27px;
112    color: rgba(255, 255, 255, 1);
113    font-family: 'Open Sans', sans-serif;
114    z-index: 9999;
115    text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.33), -1px 0px 2px rgba(255, 255, 255, 0);
116}
117
118.carousel ul, .carousel ol {
119    margin-bottom: 50px;
120    padding: 1em 1em 1em 2.5em;
121    border: solid 0px #e8e8e8;
122    border-radius: 3px;
123max-height: 10px;
124}
125