-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathCustomHtmlALLinOnePurposeSlider_jQuery.html
118 lines (85 loc) · 4 KB
/
CustomHtmlALLinOnePurposeSlider_jQuery.html
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
118
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.slides li {
position: absolute;
display: none;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1 class="text-muted">jQuery Basic Slider</h1>
</div>
<div id="slider">
<ul class="slides">
<li class="slide">slide.1</li>
<li class="slide">slide....2</li>
<li class="slide">slide......3</li>
<li class="slide">slide........4</li>
<li class="slide">slide..........5</li>
</ul>
</div>
</div>
<!-- jQuery installed -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
// Cooked by NielsOffice | 05.01.2023
var slideInterval = 1000;
var parentContainerSlider = jQuery('#slider'); // select parent container
var parentContainerListTag = jQuery('.slides'); // select slider container
var childListTags = '.slides li'; // select slider child
var childListTagsActive = '.slides li.active'; // select slider child active
// do run selft function!
jQuery(() => {
// create function for basic slider
const performSlides = jQuery.fn.sliderDynamicPost = function() {
// first child should be shown
let childFirst = jQuery('.slides li').first().show('fast',function() {
// add active class for layouts which the first child slider
$( this ).addClass('active');
// check if the first slide has active class
if( jQuery('.slides li').first().hasClass('active') === true ) {
// set default second child 1 since first child which is 0 having already active class
var childCountList = 1;
// Loop slide with interval 2 seconds!
setInterval(function() {
// Get slider lenght / dynamic how many slides we have
let __sliders = jQuery(childListTags).length;
// Once interval run 1 + 1 + 1 soon....!
let __counts = childCountList++;
// check if any of slides having class active
if( jQuery('.slides').find('li').hasClass('active') ) {
// when you found the slider or child have class then hide and remove class active !
jQuery(childListTagsActive).hide().removeClass('active');
// Check if childCountList not greather than current child elements
// If Child 1 + 1 + 1 soon....! is greather than current number of sliders
// Then set array to first child which is 0 array
// Then from first which which 0 childCountList + 1 + 1 + 1 soon....!
// Then back to 0 over and over again
if( __counts >= __sliders ) { childCountList = 0; __counts = childCountList++; }
// Using that count we select which child slider will be active slides
// Show and add class active!
jQuery(childListTags).eq( __counts ).show().addClass('active');
}
}, 2000 );
}
});
};
performSlides();
// Bonus for Library !
// to get interval for slide to call again
// get total of delay from each slides ex. 2 slides each slide having 1000 interval
// 2000 + 1000 when the slides rich 2000 for 3k it will reload again and do slides!
// setInterval(performSlides,slides );
});
</script>
</body>
</html>