Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

JavaScript Images to move automatically as well

anuraa

Legendary Coder
I want this image to move automatically as well on top of pressing the two arrows. As the images are not loaded, it may be hard to visualize with running the code. Thanks for your helps. Regards Anura

HTML:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {box-sizing: border-box}
body {font-family: Verdana, sans-serif; margin:0}
.mySlides {display: none}
img {vertical-align: middle;}
/* Slideshow container */
.slideshow-container {
  max-width: full;
  position: relative;
  margin: auto;
}
/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.1s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}
/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}
/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}
/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}
/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}
.active, .dot:hover {
  background-color: #717171;
}
/* Fading animation */
.fade {
  animation-name: fade;
  animation-duration: .1s;
}
@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}
/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .prev, .next,.text {font-size: 11px}
}
</style>
</head>
<body>
<div>
<div class="slideshow-container">
<div class="mySlides fade">
  <div class="numbertext">1 / 3</div>
  <img src="img_nature_wide.jpg" style="width:100%">
  <div class="text">Caption Text</div>
</div>
<div class="mySlides fade">
  <div class="numbertext">2 / 3</div>
  <img src="img_snow_wide.jpg" style="width:100%">
  <div class="text">Caption Two</div>
</div>
<div class="mySlides fade">
  <div class="numbertext">3 / 3</div>
  <img src="img_mountains_wide.jpg" style="width:100%">
  <div class="text">Caption Three</div>
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
</div>
<br>
<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>
</div>
<script>
let slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
  showSlides(slideIndex += n);
}
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";
}
</script>
</body>
</html>
 
Last edited by a moderator:
Solution
You should use the icon </> found above you in the text window to paste code.
Find how to make arrows here: https://www.w3schools.com/howto/howto_css_next_prev.asp

How to place them on an image here: https://www.w3schools.com/howto/howto_css_button_on_image.asp

FYI: I wouldn't use 'img' in the name of the image. I loaded your code and searched for img and it showed 7 not 4. I did subsitute my images for yours to see what was going on.
And I would add dimension to your images in the HTML, but a height would be nice.
<img src="fish.jpg" alt="My catch" width="500" height="600">
Notice No Style = "..."
Thanks a lot. I found in your directed link. I used the >_ not the </>. Now, I know. Regards Anura
You should use the icon </> found above you in the text window to paste code.
Find how to make arrows here: https://www.w3schools.com/howto/howto_css_next_prev.asp

How to place them on an image here: https://www.w3schools.com/howto/howto_css_button_on_image.asp

FYI: I wouldn't use 'img' in the name of the image. I loaded your code and searched for img and it showed 7 not 4. I did subsitute my images for yours to see what was going on.
And I would add dimension to your images in the HTML, but a height would be nice.
<img src="fish.jpg" alt="My catch" width="500" height="600">
Notice No Style = "..."
 
You should use the icon </> found above you in the text window to paste code.
Find how to make arrows here: https://www.w3schools.com/howto/howto_css_next_prev.asp

How to place them on an image here: https://www.w3schools.com/howto/howto_css_button_on_image.asp

FYI: I wouldn't use 'img' in the name of the image. I loaded your code and searched for img and it showed 7 not 4. I did subsitute my images for yours to see what was going on.
And I would add dimension to your images in the HTML, but a height would be nice.
<img src="fish.jpg" alt="My catch" width="500" height="600">
Notice No Style = "..."
Thanks a lot. I found in your directed link. I used the >_ not the </>. Now, I know. Regards Anura
 
Solution
This could be treated as closed, as I found the solution in w3school web as poined by a member Thanks
Awesome to hear! Can you mark the particular post that provided the solution to you? And if there is anything that anyone should know about this particular problem Id recommended sharing it! It’s a great way for you to help others as well :)

Merry Christmas!
 

New Threads

Latest posts

Buy us a coffee!

Back
Top Bottom