Skip to content

Commit 6f78c1d

Browse files
Amirc0derAmirc0der
authored
Add files via upload
1 parent 80298ba commit 6f78c1d

File tree

8 files changed

+290
-0
lines changed

8 files changed

+290
-0
lines changed

‎1.jpg‎

48.7 KB
Loading

‎2.jpg‎

29.2 KB
Loading

‎3.jpg‎

34.6 KB
Loading

‎arx_slider(use this if you don't want caption).js‎

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
const timerlength = 7000 // Change it if you want to change the autoslide speed (in miliseconds, 10000 means 10 seconds)
2+
const slider = document.querySelector(".slider");
3+
const sliderImg = slider.querySelectorAll("img");
4+
const sliderPreviusButton = slider.querySelector(".left")
5+
const sliderNextButton = slider.querySelector(".right")
6+
const slider_dots_holder = slider.querySelector(".slider_dots_holder")
7+
const sliderCount = slider.querySelectorAll("img").length - 1
8+
const imgHolder = slider.querySelector(".imgholder")
9+
10+
let currentSlider = 0;
11+
let dotsnum = sliderCount + 1;
12+
// CreateDots function creates clickable dots based on the number of images
13+
function CreateDots () {
14+
if ( dotsnum != 0 ) {
15+
const realId = sliderCount-(dotsnum-1)
16+
const newDot = document.createElement("div");
17+
newDot.classList.add("slider_dots");
18+
newDot.setAttribute("id", realId);
19+
newDot.setAttribute("onclick", ("sliderJump" + "(" + realId + ")") )
20+
slider_dots_holder.appendChild(newDot);
21+
dotsnum--;
22+
CreateDots()
23+
}
24+
}
25+
CreateDots()
26+
// Below codes are for Next and previous butttons
27+
const sliderdots = slider.querySelectorAll(".slider_dots")
28+
29+
function sliderShow () {
30+
sliderImg[currentSlider].style.opacity = "1";
31+
sliderdots[currentSlider].style.opacity = "1";
32+
33+
}
34+
function sliderHide () {
35+
sliderImg[currentSlider].style.opacity = "0";
36+
sliderdots[currentSlider].style.opacity = "0.5";
37+
}
38+
function slidNext () {
39+
if (currentSlider < sliderCount) {
40+
sliderHide();
41+
currentSlider ++;
42+
sliderShow();
43+
}
44+
}
45+
function slidePrevius () {
46+
if (currentSlider > 0) {
47+
sliderHide();
48+
currentSlider --;
49+
sliderShow();
50+
}
51+
}
52+
function sliderJump(number) {
53+
sliderHide();
54+
currentSlider = number;
55+
sliderShow();
56+
resetTimer()
57+
}
58+
59+
sliderPreviusButton.addEventListener("click", slidePrevius);
60+
sliderNextButton.addEventListener("click", slidNext);
61+
sliderShow()
62+
63+
// Auto Play Codes (autoplay is Optional. you can remove the below code if you do not want Autoplay)
64+
function slideTimer () {
65+
if (currentSlider < sliderCount) {
66+
slidNext ()
67+
window.setTimeout (slideTimer, timerlength)
68+
} else {
69+
sliderJump(0)
70+
window.setTimeout (slideTimer, timerlength)
71+
}
72+
}
73+
window.setTimeout (slideTimer, timerlength);
74+
function resetTimer () {
75+
}

‎arx_slider.css‎

Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
.container {
2+
margin: 20px 0 0 0;
3+
}
4+
.slider * {
5+
transition : all 0.4s ease 0s ;
6+
user-select: none;
7+
}
8+
.slider {
9+
background: #ddd;
10+
margin: auto;
11+
width: 80%;
12+
height: 38vw;
13+
overflow: hidden;
14+
border-radius: 10px;
15+
position: relative;
16+
}
17+
.slider img{
18+
width: 100%;
19+
height: auto;
20+
position: absolute;
21+
top: 0;
22+
left: 0;
23+
opacity: 0;
24+
}
25+
.slider_button {
26+
font-family: tahoma;
27+
position: absolute;
28+
width: 28px;
29+
height: 28px;
30+
padding: 10px;
31+
text-align: center;
32+
font-size: 20px;
33+
font-weight: bold;
34+
color: #fff;
35+
background: rgba(255,255,255,0.5);
36+
border-radius: 200px;
37+
cursor: pointer;
38+
top: 50%;
39+
margin-top: -24px;
40+
}
41+
.slider_button:hover {
42+
transform: scale(1.1) rotate(360deg);
43+
background-color: rgba(255,50,50,0.5);
44+
}
45+
.left {
46+
left: 10px;
47+
}
48+
.left::after {
49+
content: "<";
50+
}
51+
.right {
52+
right: 10px;
53+
}
54+
.right::after {
55+
content: ">";
56+
}
57+
.slider_dots_holder {
58+
padding: 5px;
59+
background: rgba(255,255,255,0.3);
60+
position: absolute;
61+
bottom: 15px;
62+
right: 15px;
63+
border-radius: 10px;
64+
}
65+
.slider_dots_holder:hover {
66+
background: rgba(255,255,255,0.6);
67+
}
68+
.slider_dots_holder:hover .slider_dots {
69+
width: 20px;
70+
height: 20px;
71+
}
72+
.slider_dots {
73+
float: left;
74+
margin: 5px;
75+
background: #fff;
76+
width: 10px;
77+
height: 10px;
78+
border-radius: 30px;
79+
cursor: pointer;
80+
opacity: 0.5;
81+
}
82+
.slider_alts {
83+
background: #fff;
84+
opacity: 0;
85+
position: absolute;
86+
bottom: 15px;
87+
left: 15px;
88+
border-radius: 10px;
89+
padding: 10px;
90+
}
91+
.slider_dots:hover {
92+
transform : scale(1.2);
93+
opacity: 0.8;
94+
background: #f55;
95+
}
96+
97+
@media only screen and (max-width: 1100px) {
98+
.slider{
99+
width: 99%;
100+
height: 40vw;
101+
}
102+
}

‎arx_slider.js‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
const timerlength = 7000 // Change it if you want to change the autoslide speed (in miliseconds, 10000 means 10 seconds)
2+
const slider = document.querySelector(".slider");
3+
const sliderImg = slider.querySelectorAll("img");
4+
const sliderPreviusButton = slider.querySelector(".left")
5+
const sliderNextButton = slider.querySelector(".right")
6+
const slider_dots_holder = slider.querySelector(".slider_dots_holder")
7+
const sliderCount = slider.querySelectorAll("img").length - 1
8+
const imgHolder = slider.querySelector(".imgholder")
9+
10+
let currentSlider = 0;
11+
let dotsnum = sliderCount + 1;
12+
// CreateDots function creates clickable dots & caption based on the number of images and alt texts
13+
function CreateDots () {
14+
if ( dotsnum != 0 ) {
15+
const realId = sliderCount-(dotsnum-1)
16+
const newDot = document.createElement("div");
17+
const newCaption = document.createElement("div");
18+
newDot.classList.add("slider_dots");
19+
newDot.setAttribute("id", realId);
20+
newDot.setAttribute("onclick", ("sliderJump" + "(" + realId + ")") )
21+
newCaption.classList.add("slider_alts");
22+
newCaption.innerHTML = sliderImg[realId].alt;
23+
slider_dots_holder.appendChild(newDot);
24+
imgHolder.appendChild(newCaption);
25+
dotsnum--;
26+
CreateDots()
27+
}
28+
}
29+
CreateDots()
30+
// Below codes are for Next and previous butttons
31+
const sliderdots = slider.querySelectorAll(".slider_dots")
32+
const slideralts = slider.querySelectorAll(".slider_alts")
33+
34+
function sliderShow () {
35+
sliderImg[currentSlider].style.opacity = "1";
36+
sliderdots[currentSlider].style.opacity = "1";
37+
slideralts[currentSlider].style.opacity = "0.8";
38+
39+
}
40+
function sliderHide () {
41+
sliderImg[currentSlider].style.opacity = "0";
42+
sliderdots[currentSlider].style.opacity = "0.5";
43+
slideralts[currentSlider].style.opacity = "0";
44+
}
45+
function slidNext () {
46+
if (currentSlider < sliderCount) {
47+
sliderHide();
48+
currentSlider ++;
49+
sliderShow();
50+
}
51+
}
52+
function slidePrevius () {
53+
if (currentSlider > 0) {
54+
sliderHide();
55+
currentSlider --;
56+
sliderShow();
57+
}
58+
}
59+
function sliderJump(number) {
60+
sliderHide();
61+
currentSlider = number;
62+
sliderShow();
63+
resetTimer()
64+
}
65+
66+
sliderPreviusButton.addEventListener("click", slidePrevius);
67+
sliderNextButton.addEventListener("click", slidNext);
68+
sliderShow()
69+
70+
// Auto Play Codes (autoplay is Optional. you can remove the below code if you do not want Autoplay)
71+
function slideTimer () {
72+
if (currentSlider < sliderCount) {
73+
slidNext ()
74+
window.setTimeout (slideTimer, timerlength)
75+
} else {
76+
sliderJump(0)
77+
window.setTimeout (slideTimer, timerlength)
78+
}
79+
}
80+
window.setTimeout (slideTimer, timerlength);
81+
function resetTimer () {
82+
}

‎index.html‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Ultralightweight Javascript Slider</title>
6+
<link rel="stylesheet" type="text/css" href="arx_slider.css">
7+
</head>
8+
<body>
9+
<header>
10+
<center><h1 style="font-family: verdana;">Free Responsive Smart Slider</h1>
11+
<p style="font-family: verdana;line-height: 1.5;">This slider works based on your HTML tag. <br>
12+
You just need to write a <code><img></code> Element with a <code>src</code> and an <code>alt</code> attribute.<br>
13+
Your <code>src</code> will be your image and <code>alt</code> will be your caption automatically. <br>
14+
You can add as many as pictures you want!<br> You do not need to change JavaScript at all!</p></center>
15+
</header>
16+
<div class="container">
17+
<div class="slider">
18+
<div class="imgholder">
19+
<img src="1.jpg" alt="This is Alt of the First Image">
20+
<img src="2.jpg" alt="This is Alt of the Second Image">
21+
<img src="3.jpg" alt="This is Alt of the Third Image">
22+
</div>
23+
<div class="slider_button left"></div>
24+
<div class="slider_button right"></div>
25+
<div class="slider_dots_holder"></div>
26+
</div>
27+
</div>
28+
<script type="text/javascript" src="arx_slider.js"></script>
29+
</body>
30+
</html>
31+

‎thumb.jpg‎

84.8 KB
Loading

0 commit comments

Comments
 (0)