TailwindCSS-Sliders/index.html at main · Latest-JavaScript/TailwindCSS-Sliders · 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
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
106
107
108
109
110
111
112
113
114
115
116
117
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="css/tailwind.css" />
    <title>TailwindCSS Sliders</title>
  </head>
  <body class="">
    <div class="relative m-auto max-w-7xl">
      <div class="fade hidden mySlides" >
        <img src="https://picsum.photos/800/400" class="w-full" />
        <div
          class="absolute bottom-2 w-full bg-gray-600/50 px-2 py-3 text-center text-base text-gray-200"
        >
          Caption Text
        </div>
      </div>

      <div class="fade hidden mySlides" >
        <img src="https://via.placeholder.com/800x400" class="w-full" />
        <div
          class="absolute bottom-2 w-full bg-gray-600/50 px-2 py-3 text-center text-base text-gray-200"
        >
          Caption Two
        </div>
      </div>

      <div class="fade hidden mySlides" >
        <img src="https://picsum.photos/800/400" class="w-full" />
        <div
          class="absolute bottom-2 w-full bg-gray-600/50 px-2 py-3 text-center text-base text-gray-200"
        >
          Caption Three
        </div>
      </div>

      <a
        class="absolute top-1/2 mx-3 -mt-6 w-auto cursor-pointer rounded-full p-4 font-bold text-white bg-gray-300/40 "
        onclick="plusSlides(-1)"
        ><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
          <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5" />
        </svg>
        </a
      >
      <a
        class="absolute top-1/2 mx-3 right-0 -mt-6 w-auto cursor-pointer rounded-full p-4 font-bold text-white bg-gray-300/40 "
        onclick="plusSlides(1)"
        >
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
          <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
        </svg>

        </a
      >
    </div>
    <br />

    <div style="text-align: center">
      <span

        class="dot mx-0 my-0.5 inline-block h-4 w-20 cursor-pointer rounded-full bg-gray-800"
        onclick="currentSlide(1)"
      ></span>
      <span

        class="dot mx-0 my-0.5 inline-block h-4 w-20 cursor-pointer rounded-full bg-gray-400"
        onclick="currentSlide(2)"
      ></span>
      <span

        class="dot mx-0 my-0.5 inline-block h-4 w-20 cursor-pointer rounded-full bg-gray-400"
        onclick="currentSlide(3)"
      ></span>
    </div>

    <script>
      let slideIndex = 1;
      showSlides(slideIndex);

      function plusSlides(n) {
        showSlides((slideIndex += n));
      }

      function currentSlide(n) {
        showSlides((slideIndex = n));
      }

      function showSlides(n) {
        let i;
        let slides = document.querySelectorAll(".mySlides");
        let dots = document.querySelectorAll(".dot");
        if (n > slides.length) {
          slideIndex = 1;
        }
        if (n < 1) {
          slideIndex = slides.length;
        }
        for (i = 0; i < slides.length; i++) {
          slides[i].style.display = "none";
        }
        for (i = 0; i < dots.length; i++) {
          dots[i].className = dots[i].className.replace(
            "bg-gray-800",
            "bg-gray-400"
          );
        }
        slides[slideIndex - 1].style.display = "block";
        dots[slideIndex - 1].className = dots[slideIndex-1].className.replace(
            "bg-gray-400",
            "bg-gray-800"
          );
      }
    </script>
  </body>
</html>