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>
Related
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);
I am currently attempting to open a modal for these images. When I click them, nothing happens. My best guess is that it has something to do with the openModal function on the first two lines of the JS file, I think I need to change where it gets the document, but I am not too sure.
function openModal(){
document.getElementById("myModal").style.display = "block";
}
function closeModal(){
document.getElementById("myModal").style.display = "none";
}
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function plusSlides(n) {
showSlides(slideIndex = n);
}
function currentSlides(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("demo");
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 < slides.length; i++) {
dots[i].className = dots[i].className.replace(" active ", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
}
<!--Gallery-->
<section id="gallery">
<div class="container">
<h1>Gallery</h1>
<div class="flex-container">
<!--photo container-->
<div class="photo-container">
<div class="photo">
<img src="images/thumbnail_1.jpg" onclick="openModal();currentSlide(1)" alt="">
<div class="photo-overlay">
<h3>Click to Enlarge</h3>
<p>We have several books fr you</p>
</div>
</div>
</div>
</div>
<div id="myModal" class="modal">
<span class="close cursor" onclick="closeModal()">×</span>
<div class="modal-content"></div>
<div class="mySlides">
<div class="numberText">1 / 9</div>
<img src="images/thumbnail_1.jpg" style="width: 100%;" alt="image 1">
</div>
<!--Thumbnail Image Controls-->
<div class="column">
<img class="demo" src="images/thumbnail_1.jpg" onclick="currentSlide(1)" alt="image">
</div>
I'm trying to show the next image by just adding the style: display(none) but it is not working at all
<script>
function displayBanner() {
var count = 1;
if (count == 1) {
document.getElementById("banner_img3").style.display = "none";
}
}
displayBanner();
</script>
<header>
<div class="banner">
<div id="banner">
<div class="banner_img" id="banner_img1"></div>
<div class="banner_img" id="banner_img2"></div>
<div class="banner_img" id="banner_img3"></div>
</div>
</div>
</header>
Your element does not exist when you execute the script before the element. Move the script to after the elements or move displayBanner into a load event
I assume you want to rotate the images
var count = 0, max;
function displayBanner() {
document.getElementById("banner_img"+count).style.display = "none";
count++
if (count === max ) count = 0
document.getElementById("banner_img"+count).style.display = "block";
}
window.addEventListener("load", function() {
max = document.querySelectorAll(".banner_img").length;
document.getElementById("banner_img0").style.display = "block";
setInterval(displayBanner, 3000);
})
.banner_img { display:none; text-align:center }
<header>
<div class="banner">
<div id="banner">
<div class="banner_img" id="banner_img0"><img src="http://lorempixel.com/output/animals-q-c-640-480-1.jpg" /><br/>Image 1</div>
<div class="banner_img" id="banner_img1"><img src="http://lorempixel.com/output/animals-q-c-640-480-2.jpg" /><br/>Image 2</div>
<div class="banner_img" id="banner_img2"><img src="http://lorempixel.com/output/animals-q-c-640-480-3.jpg" /><br/>Image 3</div>
</div>
</div>
</header>
your div didn't have any source add a source using <img src=""></img> for the div try below code for that
<header>
<div class="banner">
<div id="banner">
<div class="banner_img" id="banner_img1"><img src="http://templatesforcv.com/wp-content/uploads/06.jpg" ></div>
<div class="banner_img" id="banner_img2"><img src="http://templatesforcv.com/wp-content/uploads/06.jpg"></div>
<div class="banner_img" id="banner_img3"><img src="http://templatesforcv.com/wp-content/uploads/06.jpg"></div>
</div>
</div>
</header>
window.onload=displayBanner();
function displayBanner() {
var count = 1;
if (count == 1) {
document.getElementById("banner_img3").style.display = "none";
}
}
working demo:https://jsfiddle.net/athulmathew/yh2esp1c/21/
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);
});
}
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 :)