Eccomerce-Native/slider.php at main · whycaxcode/Eccomerce-Native · GitHub

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
<style type="text/css">
    * { margin: 0; padding: 0; }
    img { max-width: 100%; }
    .cycle-slideshow {
        width: 100%;
        max-width: 960px;
        display: block;
        position: relative;
        margin: 20px auto;
        overflow: hidden;
    }
    .cycle-prev, .cycle-next {
        font-size: 200%;
        color: #fff;
        display: block;
        position: absolute;
        top: 50%;
        z-index: 990;
        cursor: pointer;
        margin-top: -16px;
    }
    .cycle-prev { left: 42px; }
    .cycle-next { right: 62px; }
    .cycle-pager {
        position: absolute;
        width: 100%;
        height: 10px;
        bottom: 10px;
        z-index: 990;
        text-align: center;
    }
    .cycle-pager span {
        text-indent: 100%;
        top: 100px;
        width: 10px;
        height: 10px;
        display: inline-block;
        border: 1px solid blue;
        border-radius: 50%;
        margin: 0 10px;
        white-space: nowrap;
        cursor: pointer;
    }
    .cycle-pager-active { background-color: red; }
</style>
<script type="text/javascript" src="slider.js"></script>
<?php
$data=array();
$ambil= $koneksi->query("SELECT * FROM tema");
while($tiap=$ambil->fetch_assoc())
{
  $data[]=$tiap;
}
?>

<div class="cycle-slideshow">
    <span class="cycle-prev">&#9001;</span> <!-- Untuk membuat tanda panah di kiri slider -->
    <span class="cycle-next">&#9002;</span> <!-- Untuk membuat tanda panah di kanan slider -->
    <span class="cycle-pager"></span>
    <?php foreach ($data as $key => $value): ?>


	    <img src="tema/<?php echo $value["tema"] ?>">
	    <?php endforeach ?> <!-- Untuk membuat tanda bulat atau link pada slider -->
</div>