Skip to content

Commit d12b70b

Browse files
piyalidas10piyalidas10
committed
changes
1 parent 5a0fb06 commit d12b70b

18 files changed

+1247
-115
lines changed

‎Image_Carousel_Slider/Product Carousel — Smart Slider 3.url‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
[InternetShortcut]
2+
URL=https://smartslider3.com/product-carousel/

‎Image_Carousel_Slider/carousel.js‎

Lines changed: 134 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,134 @@
1+
let slides, indicators;
2+
let prevSlide, nextSlide;
3+
let currentSlideIndex = 1;
4+
let interval = 5000;
5+
let timer;
6+
let windowEvent;
7+
window.addEventListener('load', function(e) {
8+
windowEvent = e;
9+
slides = document.getElementsByClassName('slide');
10+
if(document.getElementsByClassName('carousel-indicators')) {
11+
if(document.getElementsByClassName('carousel-indicators').length > 0) {
12+
indicators = document.getElementsByClassName('carousel-indicators')[0].children;
13+
if(indicators) {
14+
for (let indicatorIndex = 0; indicatorIndex < indicators.length; indicatorIndex++) {
15+
indicators[indicatorIndex].addEventListener('click', function(e) {
16+
goToCurrentSlide(indicatorIndex+1, false, e);
17+
});
18+
indicators[indicatorIndex].addEventListener('keydown', function(e) {
19+
goToCurrentSlide(indicatorIndex+1, true, e);
20+
});
21+
}
22+
}
23+
}
24+
}
25+
if(document.getElementsByClassName('prevSlide')) {
26+
prevSlide = document.getElementsByClassName('prevSlide')[0];
27+
prevSlide.addEventListener('click', function(e) {
28+
goToPrevSlide(false, e);
29+
});
30+
prevSlide.addEventListener('keydown', function(e) {
31+
goToPrevSlide(true, e);
32+
});
33+
}
34+
if(document.getElementsByClassName('nextSlide')) {
35+
nextSlide = document.getElementsByClassName('nextSlide')[0];
36+
nextSlide.addEventListener('click', function(e) {
37+
goToNextSlide(false, e);
38+
});
39+
nextSlide.addEventListener('keydown', function(e) {
40+
goToNextSlide(true, e);
41+
});
42+
}
43+
if(slides && slides.length > 1) {
44+
currentSlideIndex = getCurrentSlideIndex();
45+
setControlButton(currentSlideIndex);
46+
autoPlay(windowEvent, interval);
47+
}
48+
});
49+
function setControlButton(currentSlideIndex) {
50+
if(currentSlideIndex == 1) {
51+
prevSlide.classList.add('inactive');
52+
} else {
53+
prevSlide.classList.remove('inactive');
54+
}
55+
if(currentSlideIndex == slides.length) {
56+
nextSlide.classList.add('inactive');
57+
} else {
58+
nextSlide.classList.remove('inactive');
59+
}
60+
}
61+
function goToPrevSlide(isKey, event) {
62+
currentSlideIndex = getCurrentSlideIndex() - 1;
63+
if(currentSlideIndex >= 1) {
64+
if(isKey) {
65+
if(event.keyCode === 13) {
66+
showCurrentSlide(currentSlideIndex);
67+
}
68+
} else {
69+
showCurrentSlide(currentSlideIndex);
70+
}
71+
setControlButton(currentSlideIndex);
72+
}
73+
}
74+
function goToNextSlide(isKey, event) {
75+
currentSlideIndex = getCurrentSlideIndex() + 1;
76+
if(currentSlideIndex <= slides.length) {
77+
if(isKey) {
78+
if(event.keyCode === 13) {
79+
showCurrentSlide(currentSlideIndex);
80+
}
81+
} else {
82+
showCurrentSlide(currentSlideIndex);
83+
}
84+
setControlButton(currentSlideIndex);
85+
}
86+
}
87+
function getCurrentSlideIndex() {
88+
for (let slideIndex = 0; slideIndex < slides.length; slideIndex++) {
89+
if(slides[slideIndex].classList.contains('active')) {
90+
currentSlideIndex = slideIndex;
91+
}
92+
}
93+
return currentSlideIndex + 1;
94+
}
95+
function goToCurrentSlide(slideIndex, isKey, event) {
96+
if(isKey) {
97+
if(event.keyCode === 13) {
98+
showCurrentSlide(slideIndex);
99+
}
100+
} else {
101+
showCurrentSlide(slideIndex);
102+
}
103+
}
104+
function showCurrentSlide(slideIndex) {
105+
if(slides && slides.length > 0) {
106+
for (let slide of slides) {
107+
slide.classList.remove('active');
108+
}
109+
slides[slideIndex-1].classList.add('active');
110+
}
111+
if(indicators && indicators.length > 0) {
112+
for (let indicator of indicators) {
113+
indicator.classList.remove('active');
114+
indicator.setAttribute('aria-disabled', 'true');
115+
}
116+
indicators[slideIndex-1].classList.add('active');
117+
indicators[slideIndex-1].setAttribute('aria-disabled', 'false');
118+
}
119+
setControlButton(slideIndex);
120+
clearInterval(timer);
121+
autoPlay(windowEvent, interval);
122+
}
123+
function autoPlay(event, interval) {
124+
if (interval === 0) return;
125+
timer = setInterval(function () {
126+
if(currentSlideIndex <= slides.length) {
127+
goToNextSlide(false, event);
128+
}
129+
if(currentSlideIndex > slides.length) {
130+
currentSlideIndex = 1;
131+
showCurrentSlide(currentSlideIndex);
132+
}
133+
}, interval);
134+
}

‎Image_Carousel_Slider/image_slider.png‎

626 KB
Loading

‎Image_Carousel_Slider/image_thumnail_slider.png‎

717 KB
Loading

‎carousel/index.html‎ renamed to ‎Image_Carousel_Slider/index.html‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -241,12 +241,12 @@ <h3>Slide 5</h3>
241241
</div>
242242
</div>
243243
<ul class="carousel-indicators">
244-
<li tabindex="0" data-slide-to="0" class="active" aria-disabled="false"></li>
245-
<li tabindex="0" data-slide-to="1" aria-disabled="true"></li>
246-
<li tabindex="0" data-slide-to="2" aria-disabled="true"></li>
247-
<li tabindex="0" data-slide-to="3" aria-disabled="true"></li>
248-
<li tabindex="0" data-slide-to="4" aria-disabled="true"></li>
249-
</ul>
244+
<li tabindex="0" role="button" class="active" aria-disabled="false"></li>
245+
<li tabindex="0" role="button" aria-disabled="true"></li>
246+
<li tabindex="0" role="button" aria-disabled="true"></li>
247+
<li tabindex="0" role="button" aria-disabled="true"></li>
248+
<li tabindex="0" role="button" aria-disabled="true"></li>
249+
</ul>
250250
</div>
251251
<script src="carousel.js"></script>
252252
</body>

‎Image_Carousel_Slider_Thumbnail/Free Thumbnail Slider — Smart Slider 3 — WordPress Plugin.url‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
[InternetShortcut]
2+
URL=https://smartslider3.com/free-thumbnail-slider/

‎Image_Carousel_Slider_Thumbnail/carousel_thumbnail.js‎

Lines changed: 224 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,224 @@
1+
let slides, thumbnails;
2+
let prevSlide, nextSlide;
3+
let prevThumbnail, nextThumbnail;
4+
let currentSlideIndex = 1;
5+
let interval = 5000;
6+
let timer;
7+
let windowEvent;
8+
let thumbnailDiv, thumbnailWidth, eachThumbnailWidth, scrollToWidth;
9+
let thumbnailShowAtATime = 5;
10+
let dataHasPrevTrumbnail = 0;
11+
let dataHasNextTrumbnail = 0;
12+
window.addEventListener('load', function(e) {
13+
windowEvent = e;
14+
slides = document.getElementsByClassName('slide');
15+
if(document.getElementsByClassName('carousel-thumbnail-inner')) {
16+
thumbnailDiv = document.getElementsByClassName('carousel-thumbnail-inner')[0];
17+
}
18+
if(document.getElementsByClassName('carousel-thumbnail-inner')) {
19+
if(document.getElementsByClassName('carousel-thumbnail-inner').length > 0) {
20+
thumbnails = document.getElementsByClassName('thumbnail');
21+
if(thumbnails) {
22+
for (let indicatorIndex = 0; indicatorIndex < thumbnails.length; indicatorIndex++) {
23+
thumbnails[indicatorIndex].addEventListener('click', function(e) {
24+
goToCurrentSlide(indicatorIndex+1, false, e);
25+
});
26+
thumbnails[indicatorIndex].addEventListener('keydown', function(e) {
27+
goToCurrentSlide(indicatorIndex+1, true, e);
28+
});
29+
}
30+
}
31+
}
32+
}
33+
if(thumbnailDiv && (thumbnails && thumbnails.length > 0)) {
34+
thumbnailWidth = document.getElementsByClassName('carousel-thumbnail-inner')[0].offsetWidth;
35+
setThumbnailImg(thumbnails);
36+
dataHasNextTrumbnail = thumbnails.length - thumbnailShowAtATime;
37+
}
38+
if(document.getElementsByClassName('prevSlide')) {
39+
prevSlide = document.getElementsByClassName('prevSlide')[0];
40+
prevSlide.addEventListener('click', function(e) {
41+
goToPrevSlide(false, e);
42+
});
43+
prevSlide.addEventListener('keydown', function(e) {
44+
goToPrevSlide(true, e);
45+
});
46+
}
47+
if(document.getElementsByClassName('nextSlide')) {
48+
nextSlide = document.getElementsByClassName('nextSlide')[0];
49+
nextSlide.addEventListener('click', function(e) {
50+
goToNextSlide(false, e);
51+
});
52+
nextSlide.addEventListener('keydown', function(e) {
53+
goToNextSlide(true, e);
54+
});
55+
}
56+
if(document.getElementsByClassName('thumbnail-prev')) {
57+
prevThumbnail = document.getElementsByClassName('thumbnail-prev')[0];
58+
prevThumbnail.addEventListener('click', function(e) {
59+
leftScrollThumbnail(false, e);
60+
});
61+
prevThumbnail.addEventListener('keydown', function(e) {
62+
leftScrollThumbnail(true, e);
63+
});
64+
}
65+
if(document.getElementsByClassName('thumbnail-next')) {
66+
nextThumbnail = document.getElementsByClassName('thumbnail-next')[0];
67+
nextThumbnail.addEventListener('click', function(e) {
68+
rightScrollThumbnail(false, e);
69+
});
70+
nextThumbnail.addEventListener('keydown', function(e) {
71+
rightScrollThumbnail(true, e);
72+
});
73+
}
74+
if(slides && slides.length > 1) {
75+
currentSlideIndex = getCurrentSlideIndex();
76+
setControlButton(currentSlideIndex);
77+
autoPlay(windowEvent, interval);
78+
}
79+
if(prevThumbnail && nextThumbnail) {
80+
currentSlideIndex = getCurrentSlideIndex();
81+
setThumnailControlButton();
82+
}
83+
});
84+
function setControlButton(currentSlideIndex) {
85+
if(currentSlideIndex == 1) {
86+
prevSlide.classList.add('inactive');
87+
} else {
88+
prevSlide.classList.remove('inactive');
89+
}
90+
if(currentSlideIndex == slides.length) {
91+
nextSlide.classList.add('inactive');
92+
} else {
93+
nextSlide.classList.remove('inactive');
94+
}
95+
}
96+
function goToPrevSlide(isKey, event) {
97+
currentSlideIndex = getCurrentSlideIndex() - 1;
98+
if(currentSlideIndex >= 1) {
99+
if(isKey) {
100+
if(event.keyCode === 13) {
101+
showCurrentSlide(currentSlideIndex);
102+
}
103+
} else {
104+
showCurrentSlide(currentSlideIndex);
105+
}
106+
setControlButton(currentSlideIndex);
107+
}
108+
}
109+
function goToNextSlide(isKey, event) {
110+
currentSlideIndex = getCurrentSlideIndex() + 1;
111+
if(currentSlideIndex <= slides.length) {
112+
if(isKey) {
113+
if(event.keyCode === 13) {
114+
showCurrentSlide(currentSlideIndex);
115+
}
116+
} else {
117+
showCurrentSlide(currentSlideIndex);
118+
}
119+
setControlButton(currentSlideIndex);
120+
}
121+
}
122+
function getCurrentSlideIndex() {
123+
for (let slideIndex = 0; slideIndex < slides.length; slideIndex++) {
124+
if(slides[slideIndex].classList.contains('active')) {
125+
currentSlideIndex = slideIndex;
126+
}
127+
}
128+
return currentSlideIndex + 1;
129+
}
130+
function goToCurrentSlide(slideIndex, isKey, event) {
131+
if(isKey) {
132+
if(event.keyCode === 13) {
133+
showCurrentSlide(slideIndex);
134+
}
135+
} else {
136+
showCurrentSlide(slideIndex);
137+
}
138+
}
139+
function showCurrentSlide(slideIndex) {
140+
if(slides && slides.length > 0) {
141+
for (let slide of slides) {
142+
slide.classList.remove('active');
143+
}
144+
slides[slideIndex-1].classList.add('active');
145+
}
146+
if(thumbnails && thumbnails.length > 0) {
147+
for (let indicator of thumbnails) {
148+
indicator.classList.remove('active');
149+
indicator.setAttribute('aria-disabled', 'true');
150+
}
151+
thumbnails[slideIndex-1].classList.add('active');
152+
thumbnails[slideIndex-1].setAttribute('aria-disabled', 'false');
153+
}
154+
if(slideIndex > thumbnailShowAtATime) {
155+
rightScrollThumbnail();
156+
}
157+
if(slideIndex === thumbnails.length) {
158+
dataHasNextTrumbnail = 0;
159+
dataHasPrevTrumbnail = thumbnails.length - thumbnailShowAtATime;
160+
}
161+
if(slideIndex === 1) {
162+
dataHasPrevTrumbnail = 0;
163+
dataHasNextTrumbnail = thumbnails.length - thumbnailShowAtATime;
164+
thumbnailDiv.scrollLeft = 0;
165+
}
166+
setThumnailControlButton();
167+
setControlButton(slideIndex);
168+
clearInterval(timer);
169+
autoPlay(windowEvent, interval);
170+
}
171+
function autoPlay(event, interval) {
172+
if (interval === 0) return;
173+
timer = setInterval(function () {
174+
if(currentSlideIndex <= slides.length) {
175+
goToNextSlide(false, event);
176+
}
177+
if(currentSlideIndex > slides.length) {
178+
currentSlideIndex = 1;
179+
showCurrentSlide(currentSlideIndex);
180+
}
181+
}, interval);
182+
}
183+
function setThumnailControlButton() {
184+
if(dataHasPrevTrumbnail === 0) {
185+
prevThumbnail.classList.remove('enable');
186+
} else {
187+
prevThumbnail.classList.add('enable');
188+
}
189+
if(dataHasNextTrumbnail === 0) {
190+
nextThumbnail.classList.remove('enable');
191+
} else {
192+
nextThumbnail.classList.add('enable');
193+
}
194+
}
195+
function setThumbnailImg(thumbnails) {
196+
for (let thumbnail of thumbnails) {
197+
eachThumbnailWidth = thumbnailWidth/thumbnailShowAtATime;
198+
thumbnail.childNodes[1].children[0].width = eachThumbnailWidth;
199+
}
200+
}
201+
function rightScrollThumbnail(isKey, event) {
202+
thumbnailDiv.scrollLeft += eachThumbnailWidth;
203+
dataHasNextTrumbnail--;
204+
dataHasPrevTrumbnail++;
205+
if(isKey) {
206+
if(event.keyCode === 13) {
207+
setThumnailControlButton();
208+
}
209+
} else {
210+
setThumnailControlButton();
211+
}
212+
}
213+
function leftScrollThumbnail(isKey, event) {
214+
thumbnailDiv.scrollLeft -= eachThumbnailWidth;
215+
dataHasNextTrumbnail++;
216+
dataHasPrevTrumbnail--;
217+
if(isKey) {
218+
if(event.keyCode === 13) {
219+
setThumnailControlButton();
220+
}
221+
} else {
222+
setThumnailControlButton();
223+
}
224+
}

0 commit comments

Comments
 (0)