Develop Reference

How to create two slider in one page with same class?

I have two slider section with same class.
Each of them has 3 images.
But all 6 image show one by one.
How display two slider with 3 images as same time?
I can't and I don't want to change their classes.
<div class="abelhabil-sildeshow">
<div class="slide">
<img src="http://localhost/wp-content/uploads/2023/01/img_lights_wide.jpg">
</div>
<div class="slide">
<img src="http://localhost/wp-content/uploads/2023/01/img_snow_wide.jpg">
</div>
<div class="slide">
<img src="http://localhost/wp-content/uploads/2023/01/img_nature_wide.jpg">
</div>
</div>
<div class="abelhabil-sildeshow">
<div class="slide">
<img src="http://localhost/wp-content/uploads/2023/01/img_lights_wide.jpg">
</div>
<div class="slide">
<img src="http://localhost/wp-content/uploads/2023/01/img_snow_wide.jpg">
</div>
<div class="slide">
<img src="http://localhost/wp-content/uploads/2023/01/img_nature_wide.jpg">
</div>
</div>
<script>
let slideIndex = 0;
showSlides();
function showSlides() {
let i;
let slides = document.querySelectorAll(".slide");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slides.length) {
slideIndex = 1
}
slides[slideIndex - 1].style.display = "block";
setTimeout(showSlides, 1000);
}
</script>

something like this?
function eventedSlider_(){
document.querySelectorAll('.slide_container:not(.evented)')
.forEach(function(container_){
container_.classList.add('evented');
let items_ = container_.querySelectorAll('.slide_item');
if( items_.length ){
let i = 0;
setInterval(function(){
items_.forEach(function(item_){ item_.classList.remove('active'); });
items_[i].classList.add('active');
i = i+1 < items_.length ? i+1 : 0;
},1000);
}
});
}
eventedSlider_();
.slide_item{
width:20px;
height:20px;
margin:4px;
background:gray;
}
.slide_item:not(.active){
display:none;
}
<div class="slide_container">
<div class="slide_item">a</div>
<div class="slide_item">b</div>
<div class="slide_item">c</div>
</div>
<hr />
<div class="slide_container">
<div class="slide_item">d</div>
<div class="slide_item">e</div>
<div class="slide_item">f</div>
</div>
<hr />
<div class="slide_container">
<div class="slide_item">g</div>
<div class="slide_item">h</div>
<div class="slide_item">i</div>
<div class="slide_item">j</div>
<div class="slide_item">k</div>
</div>

Carousell, how to show picture 1 without clicking one ahead or behind?

I am quite new to coding from scratch, but I am trying to build a very very simple website. And I wanted an image carousel at the start. I already have it coded // I copied some code from a tutorial.
My problem is that, when I open my websites front page the first image doesn't load in, until I either click forwards or backwards. And I want it to load image 1 as soon as the website loads in. Can anyone help me with that?
index.html
<div class="slideshow-container">
<div class="mySlides fade">
<img src="images/image1.jpg" style="width:100%">
<div class="text">Text1Here</div>
</div>
<div class="mySlides fade">
<img src="images/image2.jpg" style="width:100%">
<div class="text">Text2Here</div>
</div>
<div class="mySlides fade">
<img src="images/image3.jpg" style="width:100%">
<div class="text">Text3Here</div>
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
script.js
let slideIndex = 1;
showSlides(slideIndex);
// Next/previous controls
function plusSlides(n) {
showSlides(slideIndex += n);
}
// Thumbnail image controls
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
let i;
let slides = document.getElementsByClassName("mySlides");
let dots = document.getElementsByClassName("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(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
}

Maybe you forgot to copy the "dots"-elements from the tutorial. If you get errors in your console, this could be the reason, why it aborts further execution.
Try to change your HTML as follows:
<div class="slideshow-container">
<div class="mySlides fade">
<img src="images/image1.jpg" style="width:100%">
<div class="text">Text1Here</div>
</div>
<div class="mySlides fade">
<img src="images/image2.jpg" style="width:100%">
<div class="text">Text2Here</div>
</div>
<div class="mySlides fade">
<img src="images/image3.jpg" style="width:100%">
<div class="text">Text3Here</div>
</div>
<div class="dots"></div>
<div class="dots"></div>
<div class="dots"></div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
I added the three "dots"-elements. If you don't want them, you can remove them from the HTML, but you have to remove every JS code that works with the dots variable.
Here is the JS code without the dots handlings:
function showSlides(n) {
let i;
let slides = document.getElementsByClassName("mySlides");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slides[slideIndex-1].style.display = "block";
}

JavaScript slider is looping too fast after click on dot button

I have this code for the JavaScript image slider:
<div class="container">
<!-- Full-width images with caption text -->
<div class="image-sliderfade fade">
<img src="https://via.placeholder.com/150" style="width:100%">
<div class="text">Image caption 1</div>
</div>
<div class="image-sliderfade fade">
<img src="https://via.placeholder.com/150" style="width:100%">
<div class="text">Image caption 2</div>
</div>
<div class="image-sliderfade fade">
<img src="https://via.placeholder.com/150" style="width:100%">
<div class="text">Image caption 3</div>
</div>
<div class="image-sliderfade fade">
<img src="https://via.placeholder.com/150" style="width:100%">
<div class="text">Image caption 4</div>
</div>
</div>
<!-- The dots/circles -->
<div style="text-align:center">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
<span class="dot" onclick="currentSlide(4)"></span>
</div>
And Js code is :
<script type="text/javascript">
var slideIndex = 0;
showSlides(); // call showslide method
function currentSlide(n) {
console.log(n);
showSlides(slideIndex = n);
}
function showSlides( n ) {
var i;
var slides = document.getElementsByClassName("image-sliderfade");
var dots = document.getElementsByClassName("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";
}
if(!n) {
slideIndex++;
}
if (slideIndex > slides.length){
slideIndex = 1;
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex - 1].style.display = "block";
dots[slideIndex - 1].className += " active";
setTimeout(showSlides, 3000);
}
</script>
It's looping automatically and I want to go to a specific slider on click event. Now, If I click on a specific slider using the dot then the slider is looping too fast !
Is there anything I am wrong? How can I fix it?

Reason why it keeps speeding p is you keep adding more and more timers. You need to cancel timers that may exist when you click.
var sliderTimer;
function currentSlide(n) {
console.log(n);
if (sliderTimer) window.clearTimeout(sliderTimer);
showSlides(slideIndex = n);
}
and when you create the timer
sliderTimer = setTimeout(showSlides, 3000);

Get only the children of a clicked div element

So I'm building this webpage and I have some photos for slideshow inside divs that open up a modal. I want to get all children of clicked div (myModal). I want to get all divs with class "mySlides" who are the children of a click div with class "myModal". This is my code:
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
console.log(slides);
var dots = document.getElementsByClassName("dot1");
if (n > 3) {
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(" active1", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active1";
}
<!-- reference item -->
<div class="grid-item set-bg osobj" data-setbg="img/portfolio/2.jpg">
<a class="myBtn" onclick="getSlides()"></a>
<div class="myModal modal1">
<!-- Modal content -->
<div class="modal1-content">
<span class="close1">×</span>
<h2>smth</h2>
<div class="post1-container">
<div class="post1-thumb">
<div class="slideshow1-container">
<div class="mySlides">
<div class="numbertext">1 / 3</div>
<img src="img/portfolio/3.jpg" style="width: 550px; height: 450px;">
<div class="text1">Opis slike1</div>
</div>
<div class="mySlides">
<div class="numbertext">2 / 3</div>
<img src="img/portfolio/4.jpg" style="width: 550px; height: 450px;">
<div class="text1">Opis Slike2</div>
</div>
<div class="mySlides">
<div class="numbertext">3 / 3</div>
<img src="img/portfolio/6.jpg" style="width: 550px; height: 450px;">
<div class="text1">Opis Slike3</div>
</div>
<button class="prev1" onclick="plusSlides(-1)">❮</button>
<button class="next1" onclick="plusSlides(1)">❯</button>
</div>
<br>
<div style="text-align:center">
<span class="dot1" onclick="currentSlide(1)"></span>
<span class="dot1" onclick="currentSlide(2)"></span>
<span class="dot1" onclick="currentSlide(3)"></span>
</div>
</div>
</div>
</div>
</div>
</div>
I tried using $(this).children but no luck like that:
function getSlides() {
var slides1 = $(this).children('img').attr('src');
console.log(slides1);
}
How can I achieve this? I have multiple reference items in my page all with different 3 images to show on modal open. But I want to select only those that are children to the clicked element (as now it returns me all "mySlides" divs).

You can remove onclick="getSlides()" from DOM and Use this Jquery
$('.myBtn').off().on('click',function(){
$(this).next('.myModal').find('.mySlides').each(function(i,v){
console.log($(v)[0].outerHTML);
});
});

Look at this. You have to pass getSlides(var) a new variable postContainer. In this case is: <div class="post1-container">
function getSlides(postContainer) {
$('.'+postContainer+' .mySlides').each(function(){
var slideSrc = $(this).find('img').attr('src');
console.log(slideSrc);
});
}
Lets start again:
Using the self object to find the slides
<a class="myBtn" onclick="getSlides($(this))"></a>
//Pass the object to the function
function getSlides(dis) {
//Search from the object, the nexts .mySlides
$(dis).next().find('.mySlides').each(function(){
var slideSrc = $(this).find('img').attr('src');
console.log(slideSrc);
});
}

Javascript slideshow automatic + manual

I want to make javascript slideshow who will change automaticly + on click.
Here is code so far (changes pictures onClick)
slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slides[slideIndex-1].style.display = "block";
}
Please help!
Here is HTML
<div class = "slideshow_container">
<div class="mySlides fade">
<img src="main_slide/dzive.jpg">
<div class = "slide_text_modules">
<div class="text1">Kristaps Slakters - Zvejsalnieks</div>
<div class="text2">Dzīve kļūst skaistāka,<br> kad satiec savu īsto frizieri</div>
</div>
</div>
<div class="mySlides fade">
<img src="main_slide/keepcalm.jpg">
<div class = "slide_text_modules">
<div class="text1">Kristaps Slakters - Zvejsalnieks</div>
<div class="text2">Keep calm <br>and change your hair!</div>
</div>
</div>
<div class="mySlides fade">
<img src="main_slide/koelju.jpg">
<div class = "slide_text_modules">
<div class="text1">Paulu Koelju</div>
<div class="text2 text_small">Katrai dienai savs brīnums. Tāpēc pieņem <br>
svētību, strādā un radi savus mazos mākslas<br>
darbus jau šodien! Rīt tev taps dāvāts vēl.</div>
</div>
</div>
<div class="mySlides fade">
<img src="main_slide/lopedevega.jpg">
<div class = "slide_text_modules">
<div class="text1">Lope de Vega</div>
<div class="text2">Spēks uzvar spēku,<br> skaistums uzvar visu.</div>
</div>
</div>
<div class="mySlides fade">
<img src="main_slide/slakters.jpg">
<div class = "slide_text_modules">
<div class="text1">Gotholds Efraims Lesings</div>
<div class="text2 text_small">Jo skaistāka ir sieviete, jo godīgākai tai ir jābūt,<br>
jo tikai viņas godīgums spēj novērst to ļaunumu,<br>
ko spēj radīt viņas skaistums.</div>
</div>
</div>
<div class = "arrows arrow_right" onclick="plusSlides(1)">❭ </div>
<div class = "arrows arrow_left" onclick="plusSlides(-1)">❬ </div>
</div>
It would be great if someone could explain how to do that not give just code :)