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 :)
Related
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>
//JS page one
let box = document.getElementsByClassName("box");
//click event
box[0].addEventListener("click", fn1);
box[1].addEventListener("click", fn2);
box[2].addEventListener("click", fn3);
box[3].addEventListener("click", fn4);
//show description at click and hide "click for info"
function fn1() {
window.location = 'carousel.html';
}
function fn2() {
window.location = 'carousel.html#2';
}
function fn3() {
window.location = 'carousel.html';
}
function fn4() {
window.location = 'carousel.html';
}
//JS page two
/*lightbox code*/
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");
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";
}
<!--HTML PAGE ONE-->
<div id="container">
<!--one-->
<div class="box">
<img title="paint one" class="image" src="images/paintings/1.jpg">
<p class="showText"></p>
</div>
<!--two-->
<div class="box">
<img title="paint two" class="image" src="images/paintings/2.jpg">
<p class="showText"></p>
</div>
<!--three-->
<div class="box">
<img title="paint one" class="image" src="images/paintings/3.jpg">
<p class="showText"></p>
</div>
<!--four-->
<div class="box">
<img title="paint two" class="image" src="images/paintings/4.jpg">
<p class="showText"></p>
</div>
</div>
<!--HTML PAGE 2 - CAROUSEL-->
<div id="lightbox">
<div class="slideshow-container">
<!-- Full-width images with number and caption text -->
<div class="mySlides fade">
<div class="numbertext">1 / 4</div>
<img class="image" src="images/paintings/1.jpg">
<div class="text">Caption Text</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 4</div>
<img class="image" src="images/paintings/2.jpg">
<div class="text">Caption Two</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 4</div>
<img class="image" src="images/paintings/3.jpg">
<div class="text">Caption Three</div>
</div>
<div class="mySlides fade">
<div class="numbertext">4 / 4</div>
<img class="image" src="images/paintings/4.jpg">
<div class="text">Caption Three</div>
</div>
<!-- Next and previous buttons -->
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
</div>
I was wondering if it is possible to show the desired image in page 2 Html based on what is clicked in page 1 Html. I know a solution could be to create an HTML page for each photo I want to show on click: I should just change the windows.location of the addEventListener and then in the JS file set the number corresponding to the slideIndex but it would be really good to find a solution without duplicating the pages. I hope I was clear
I found a good alternative. Basically in Html page one I assigned an id to each image and in js page one in the fn1, fn2, fn3 and fn4 window.location I added the hash of the relative id eg: (window.location = 'carousel.html#1'). Then in js page 2 I added the following code:
window.addEventListener('load', (event) => {
if(location.hash === "#1") {
currentSlide(1)
}
if(location.hash === "#2") {
currentSlide(2)
}
if(location.hash === "#3") {
currentSlide(3)
}
if(location.hash === "#4") {
currentSlide(4)
}
})
to avoid a possible slow loading in the css file I added a loading gif as a background image in the .image class
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";
}
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 basically just copied the slideshow tutorials from W3schools, i see the pictures when i inspect the page but the actual images are not displaying on the website. I can't figure out if I missed a div or something. I am getting the images with PHP, 3 images are the same just to test it.
<div class="slideshow-container">
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="images/<?php echo $row["product_image"]; ?>" />
<div class="text">Caption Text</div>
</div>
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="images/<?php echo $row["product_image"]; ?>" />
<div class="text">Caption Text</div>
</div>
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="images/<?php echo $row["product_image"]; ?>" />
<div class="text">Caption Text</div>
</div>
</div>
You may missing the the width attribute for images in src. Use it like this, it might work.
<div class="mySlides fade" >
<div class="numbertext">1 / 3</div>
<img src="images/<?php echo $row["product_image"]; ?>" style="width:100%" />
<div class="text">Caption Text</div>
</div>
I think you missed to add Javascript. Try this in the footer
<script>
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");
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";
}
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";
}
</script>
Css Class fade https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/less/component-animations.less
have opacity 0 which is overriding your class fade.
change your css class to this
.fade{
webkit-animation-name: fade !important;
-webkit-animation-duration: 1.5s !important;
animation-name: fade !important;
animation-duration: 1.5s !important;
opacity: 1 !important;
}