Scribd
Upload
102 views

Carousel PHP

This document demonstrates how to create a slider using Bootstrap 4. It includes the necessary CSS and JavaScript links to implement Bootstrap. It defines a carousel component with three image slides that can be cycled through using previous and next buttons. Additional CSS is included to style the navigation icons, indicators, and image opacity on the slides.

Uploaded by

majid aminurdin
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
102 views

Carousel PHP

This document demonstrates how to create a slider using Bootstrap 4. It includes the necessary CSS and JavaScript links to implement Bootstrap. It defines a carousel component with three image slides that can be cycled through using previous and next buttons. Additional CSS is included to style the navigation icons, indicators, and image opacity on the slides.

Uploaded by

majid aminurdin
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 4

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
<!DOCTYPE html>
<html>
<head>
<title>Kodekreasi.com : Membuat Slider dengan Bootstrap 4</title>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>

<!-- Costum CSS -->


<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="text-center mb-4 mt-4">
<h2>KodeKreasi :contoh slider</h2>
</div>
<div id="carouselExampleIndicators" class="carousel slide" data-
ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0"
class="active"></li>
<li data-target="#carouselExampleIndicators"
data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators"
data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100"
src="https://picsum.photos/id/0/1080/500" alt="First slide">

</div>
<div class="carousel-item">
<img class="d-block w-100"
src="https://picsum.photos/id/1/1080/500" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100"
src="https://picsum.photos/id/2/1080/500" alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators"
role="button" data-slide="prev">
<div class="nav-icon">
<span class="carousel-control-prev-icon"
aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</div>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators"
role="button" data-slide="next">
<div class="nav-icon">
<span class="carousel-control-next-icon"
aria-hidden="true"></span>
<span class="sr-only">Next</span>
</div>
</a>
</div>
</div>
</body>

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
.carousel-item img{
opacity: 0.6;
}
.nav-icon{
background: #1b1b1b;
width: 3.8rem;
height: 3.8rem;
border-radius: 50%;
border: 0;
opacity: 0.7;
text-shadow: none;
color: #fff;
position: absolute;
display: flex;
justify-content: center;
align-items: center;
}
.nav-icon:hover{
background-color: #000;
opacity: 1.0;
transition: all ease 0.3s;
color: #fff;
}
.carousel-indicators li{
border-radius: 50%;
width: .8rem;
height: .8rem;
background: transparent;
border: solid 2px #1b1b1b;
}

You might also like