We Keep Coding

How to make image slider respond to thumb swipe

Hi I am using the basic W3 slideshow layout but It is not very good for the mobile version of my site.
I searched very hard to find a solution to this but it's always download some plug-in to make it work or something that doesn't respond very well to swipes
$('.slider').on('touchstart', function(event) {
const xClick = event.originalEvent.touches[0].pageX;
$(this).one('touchmove', function(event) {
const xMove = event.originalEvent.touches[0].pageX;
const sensitivityInPx = 5;
if (Math.floor(xClick - xMove) > sensitivityInPx) {
$(this).slider('next');
}
else if (Math.floor(xClick - xMove) < -sensitivityInPx) {
$(this).slider('prev');
}
});
$(this).on('touchend', function() {
$(this).off('touchmove');
});
});
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";
}
* {
box-sizing: border-box
}
html,
body {
width: 100%;
height: 100%;
margin: 0;
}
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.mySlides {
display: none
}
img {
vertical-align: middle;
}
/* Slideshow container */
.slideshow-container {
padding: 10px;
max-width: 1000px;
position: relative;
margin: auto;
-webkit-overflow-scrolling: touch;
}
/* 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.6s 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: 1.5s;
}
#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
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="slider" class="slideshow-container">
<!-- images -->
<div class="mySlides fade">
<!-- <div class="numbertext">1 / 3</div> -->
<img src="http://upload.wikimedia.org/wikipedia/commons/7/73/Lion_waiting_in_Namibia.jpg" style="width:100%">
<div class="text">Caption Text</div>
</div>
<div class="mySlides fade">
<img src="http://upload.wikimedia.org/wikipedia/commons/7/73/Lion_waiting_in_Namibia.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<img src="http://upload.wikimedia.org/wikipedia/commons/7/73/Lion_waiting_in_Namibia.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<img src="http://upload.wikimedia.org/wikipedia/commons/7/73/Lion_waiting_in_Namibia.jpg" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<br>
<div style="text-align:center">
<!-- dots-->
<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>

Even though this is not pure Js and it is a different approach
I found that flickity.js and css is good for mobile and it's just 2 ajax calls like jquery
https://flickity.metafizzy.co/api.html
<script src="//cdnjs.cloudflare.com/ajax/libs/flickity/1.0.0/flickity.pkgd.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/flickity/1.0.0/flickity.css">
HTML
<div class="carousel">
<div class="carousel-cell"></div>
<div class="carousel-cell"></div>
<div class="carousel-cell"></div>
<div class="carousel-cell"></div>
<div class="carousel-cell"></div>
<div class="carousel-cell"></div>
<div class="carousel-cell"></div>
<div class="carousel-cell"></div>
</div>
CSS
/* external css: flickity.css */
* { box-sizing: border-box; }
body { font-family: sans-serif; }
.carousel {
background: #FAFAFA;
}
.carousel-cell {
width: 28%;
height: 200px;
margin-right: 10px;
background: #8C8;
border-radius: 5px;
counter-increment: carousel-cell;
}
/* cell number */
.carousel-cell:before {
display: block;
text-align: center;
content: counter(carousel-cell);
line-height: 200px;
font-size: 80px;
color: white;
}
.button {
font-size: 22px;
}
.button-group {
margin-bottom: 20px;
}
Js
// external js: flickity.pkgd.js
var flkty = new Flickity( '.carousel', {
groupCells: true
});
var buttonGroup = document.querySelector('.button-group');
var buttons = buttonGroup.querySelectorAll('.button');
buttons = fizzyUIUtils.makeArray( buttons );
buttonGroup.addEventListener( 'click', function( event ) {
// filter for button clicks
if ( !matchesSelector( event.target, '.button' ) ) {
return;
}
var index = buttons.indexOf( event.target );
flkty.selectCell( index );
});

Like i wrote in the comments, you have two typos: $(this).one('touchmove and .slider, which has to be $(this).on('touchmove and #slider.
But the main problem is your function slider(), which isn't defined. But you can use the function plusSlides(), that you are already using for the next and prev buttons.
Furthermore the touchmove event is firing very often until the touchend event is fired. Therefor the function plusSlides() is called multiple times. To fix this, stop the touchmove event listener when the function plusSlides() is called.
Working example:
$('#slider').on('touchstart', function(event) {
const xClick = event.originalEvent.touches[0].pageX;
$(this).on('touchmove', function(event) {
const xMove = event.originalEvent.touches[0].pageX;
const sensitivityInPx = 5;
if (Math.floor(xClick - xMove) > sensitivityInPx) {
plusSlides(1);
$(this).off('touchmove');
}
else if (Math.floor(xClick - xMove) < -sensitivityInPx) {
plusSlides(-1);
$(this).off('touchmove');
}
});
});
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";
}
* {
box-sizing: border-box
}
html,
body {
width: 100%;
height: 100%;
margin: 0;
}
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.mySlides {
display: none
}
img {
vertical-align: middle;
}
/* Slideshow container */
.slideshow-container {
padding: 10px;
max-width: 1000px;
position: relative;
margin: auto;
-webkit-overflow-scrolling: touch;
}
/* 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.6s 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: 1.5s;
}
#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
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="slider" class="slideshow-container">
<!-- images -->
<div class="mySlides fade">
<!-- <div class="numbertext">1 / 3</div> -->
<img src="http://upload.wikimedia.org/wikipedia/commons/7/73/Lion_waiting_in_Namibia.jpg" style="width:100%">
<div class="text">Caption Text</div>
</div>
<div class="mySlides fade">
<img src="http://upload.wikimedia.org/wikipedia/commons/7/73/Lion_waiting_in_Namibia.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<img src="http://upload.wikimedia.org/wikipedia/commons/7/73/Lion_waiting_in_Namibia.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<img src="http://upload.wikimedia.org/wikipedia/commons/7/73/Lion_waiting_in_Namibia.jpg" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<br>
<div style="text-align:center">
<!-- dots-->
<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>

Slideshow play automatically

I have a slideshow with script identical to, How to make slideshow auto-play? , but can't seem to make mine work. Any suggestions to what it is? This slideshow does have a parent element, could that be the cause, or maybe css?
My links as requested: I'm positive that it's the correct file path, as my controls still work.
<!--get jquery-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!--project slideshow scripts-->
<script src="profile-javascript/project-slideshow.js">
</script>
<script src="profile-javascript/project-slideshow2.js">
</script>
HTML:
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";
}
setInterval(function() {
plusSlides(1);
}, 1000);
/*courosel section starts*/
.slideshow-container {
max-width: 1000px;
height: 7.5em;
position: relative;
margin: 7.5px auto;
}
.mySlides,
.mySlides2 {
display: none;
}
.project-text {
color: ;
display: flex;
position: ;
width: 100%;
justify-content: center;
align-items: center;
font-family: 'Inknut Antiqua', serif;
}
.slideshow-img {
width: 17.4rem;
height: 10.5rem;
border-radius: 5px;
box-shadow: 2.5px 2.5px 2px rgba(0, 0, 0, 0.7);
-webkit-transition: display 1s;
transition: 1s;
}
.slide-hover-p {
display: none;
}
.slideshow-img:hover+.slide-hover-p {
display: block;
}
.fade-car {
-moz-animation-name: fade-car;
-webkit-animation-name: fade-car;
-moz-animation-duration: 2.5s;
-webkit-animation-duration: 2.5s;
}
.project-text a,
a:visited,
{}
.previous,
.nexxt {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: ;
font-weight: bold;
font-size: 28px;
transition: 0.85s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
.nexxt {
right: 0;
border-radius: 3px 0 0 3px;
}
.previous:hover,
.nexxt:hover {
cursor: pointer;
}
#p-others:hover,
#n-others:hover {
background-color: white;
color: #00004d;
}
#p-coding:hover,
#n-coding:hover {
background-color: #00004d;
color: white;
}
/*courosel media queries*/
#-webkit-keyframes fade-car {
from {
opacity: 0.4
}
to {
opacity: 1
}
}
#keyframes fade-car {
from {
opacity: 0.4
}
to {
opacity: 1
}
}
#media only screen and (max-width: 300px) {
.previous,
.nexxt,
.text {
font-size: 11px
}
}
<!--slider starts-->
<div class="slideshow-container">
<div class="mySlides fade-car">
<div class="project-text">
<img src="images/colorado_view2.jpg" class="slideshow-img img-fluid" alt="global6" />
<p class="slide-hover-p"><i>(My Profile Webpage)</i></p>
</div>
</div>
<div class="mySlides fade-car">
<div class="project-text">
<img src="images/global (35).jpg" class="slideshow-img img-fluid" alt="global6" />
<p class="slide-hover-p"><i>(My Profile Webpage)</i></p>
</div>
</div>
<div class="mySlides fade-car">
<div class="project-text">
<img src="images/global (35).jpg" class="slideshow-img img-fluid" alt="global6" />
<p class="slide-hover-p"><i>(My Profile Webpage)</i></p>
</div>
</div>
<a id="p-others" class="previous" onclick="plusSlides(-1)">❮</a>
<a id="n-others" class="nexxt" onclick="plusSlides(1)">❯</a>
</div>
<!--slideshow ends-->

Got it to work with the help of #RachelGallen by adding the missing elements with the "dot" class. Thanks! Also, sorry, I'm a noob with stackoverflow editing. I don't know why the code is showing like that.
<span class="dot" onclick="currentSlide(1)"></span> <span class="dot" onclick="currentSlide(2)"></span> <span class="dot" onclick="currentSlide(3)"></span>

Carousel content appears then dissapears

So I have a simple carousel that was working perfectly until I decided to add bootstrap. After I added the bootstrap stylesheet (not the script file) the content for my carousel now appears for a second then disappears??
I can click on the controls and the content appears again but then disappears again. I thought the bootstrap stylesheet was overriding my "prev" and "next" classes for the controls so I just renamed them but still nothing. I don't want to change my carousel script either since it was working just fine before but will if needed. Any help in figuring out what's causing it? There's another script for the second carousel but it's pretty much identical to that one. I don't know if my css will help but I posted it anyways. Please help:(
My HTML:
<!--project section headings-->
<div class="projects">
<a>
<div class="box projects-others" style="color: #ffdb4d;">
<h1 style="color: #ffdb4d;">Projects :<br> Others</h1>
<!--slider starts-->
<div class="slideshow-container">
<div class="mySlides fade">
<div class="project-text">
<h2>ProjectD</h2>
</div>
</div>
<div class="mySlides fade">
<div class="project-text">
<h2>ProjectE</h2>
</div>
</div>
<div class="mySlides fade">
<div class="project-text">
<h2>ProjectF</h2>
</div>
</div>
<a class="previous p-others" onclick="plusSlides(-1)">❮</a>
<a class="nexxt n-others" onclick="plusSlides(1)">❯</a>
</div>
</div>
</a>
<a>
<div class="box projects-coding" style="color:#00004d;">
<h1 style="color:#00004d;">Projects :<br> Coding</h1>
<!--second slider starts-->
<div class="slideshow-container">
<div class="mySlides2 fade">
<div class="project-text">
<h2><a>ProjectA</a></h2>
</div>
</div>
<div class="mySlides2 fade">
<div class="project-text">
<h2><a>ProjectB</a></h2>
</div>
</div>
<div class="mySlides2 fade">
<div class="project-text">
<h2><a>ProjectC</a></h2>
</div>
</div>
<a class="previous p-coding" onclick="plusSlides2(-1)">❮</a>
<a class="nexxt n-coding" onclick="plusSlides2(1)">❯</a>
</div>
</div>
</a>
</div>
CSS:
/*project section starts*/
.projects {
overflow: hidden;
height: 27em;
margin-top: 50px;
border: ;
}
.projects a {
cursor: default;
}
.box {
box-sizing: border-box;
box-shadow: 1.1px 1.2px #595959;
}
.projects h1 {
font-size: 4.40em;
text-align: center;
text-shadow: 0 3px 3px rgba(0,0,0,0.9);
font-family: 'Dancing Script', cursive;
line-height: 80px;
padding-top: 55px;
}
.projects-others, .projects-coding {
width: 50%;
-moz-transition: width .3s;
-webkit-transition: width .3s;
-o-transition: width .3s;
transition: width .3s;
height: 27em;
padding: 1em;
box-sizing: border-box;
}
.projects-others {
float: right;
background: #00004d;
background-size: cover;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
}
.projects-coding {
background: white;
border-right:;
}
.projects:hover .projects-others {
width: 40%;
}
.projects-coding:hover {
width: 60% ;
}
.projects-others:hover {
width: 60% !important;
}
.projects-others:hover ~ .projects-coding {
width: 40%;
}
/*courosel section starts*/
.slideshow-container {
max-width: 1000px;
height: 7.5em;
position: relative;
margin: auto;
}
.mySlides, .mySlides2 {
display:none;
}
.project-text {
color:;
display: flex;
font-size: 20px;
padding:12px;
position: absolute;
bottom: 1px;
width: 100%;
justify-content: center;
align-items: center;
font-family: 'Inknut Antiqua', serif;
}
.fade {
-moz-animation-name:fade;
-webkit-animation-name: fade;
-moz-animation-duration: 2.5s;
-webkit-animation-duration: 2.5s;
}
.project-text a, a:visited, {
}
.previous, .nexxt {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top:;
font-weight: bold;
font-size: 28px;
transition:0.85s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
.nexxt {
right:0;
border-radius: 3px 0 0 3px;
}
.previous:hover, .nexxt:hover {
cursor: pointer;
}
.p-others:hover, .n-others:hover {
background-color: white;
color: #00004d;
}
.p-coding:hover, .n-coding:hover {
background-color: #00004d;
color: white;
}
/*courosel media queries*/
#-webkit-keyframes fade {
from {opacity: 0.4}
to {opacity: 1}
}
#keyframes fade {
from {opacity: 0.4}
to {opacity: 1}
}
#media only screen and (max-width: 300px) {
.previous, .nexxt,.text {font-size: 11px}
}
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";
}

The fade class is likely colliding with bootstrap. You can reduce the chance of collision by either giving your class names a unique prefix like .carousel-fade or by scoping your css like this:
.slideshow-container .fade {
-moz-animation-name:fade;
-webkit-animation-name: fade;
-moz-animation-duration: 2.5s;
-webkit-animation-duration: 2.5s;
}
This will make yours apply only for fade class used within a slideshow-container.

How do I put the slideshow selector dots on top of the image?

Via w3 schools, I was able to make this slideshow and add it and make it work on my webpage. Everything is running smoothly except for the locations of the buttons. Currently they are within their own div, but I'm wanting them to be on top of the image in the bottom center.
So far I have tried removing the div and adjusting the position but that isn't working for me.
Below is the code and here is a Codepen. The actual slide may not work in the example (just finding this out now while entering the snippet), but I'm just looking on how to position the 3 dots of the <span class="dot" on top of the image
Thanks in advance!
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";
}
/* SLIDESHOW */
#slideshow {
height: 400px;
width: 100%;
position: relative;
margin: auto;
overflow: hidden;
}
#slideshow img {
height: 400px;
width: 100%;
}
/* 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.4s 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);
}
/* 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;
}
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
<div id="slideshow">
<div class="mySlides fade">
<img src="https://picsum.photos/1600/400">
</div>
<div class="mySlides fade">
<img src="https://picsum.photos/1600/400">
</div>
<div class="mySlides fade">
<img src="https://picsum.photos/1600/400">
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</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>

Put the dots at the bottom of the #slideshow div with a parent div with a classname of "dots". Then add this css to the "dots" div.
.dots {
width: 100px;
position: absolute;
bottom: 0;
left: 50%;
margin-left: -50px;
}

HTML/CSS/JavaScript: Can't click slideshow indicator button

I'm new to webpage design and am trying to add indicator dots on my slideshow, so when clicking on them, i can go to the next image.
see this image
image2
I initially followed the instructions on the W3School page: https://www.w3schools.com/howto/howto_js_slideshow.asp
which put the indicator dots under the tag and below the slideshow banner. However, I want to put the dots ON the slideshow banner so I changed the tag to , but then the JavaScript stopped working.
In short, what I'm looking for is like the "another example" slideshow banner on this page: https://www.w3schools.com/w3css/w3css_slideshow.asp
sadly, the code used on that page was incomplete and i can't directly copy and paste it onto my website.
Please help to see what's wrong with my code OR to save your time, simply let me know how to achieve the feature mentioned in the above paragraph. Thank you so much.
<html>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<div class="slideshow-container">
<!-- Full-width images with number and caption text -->
<div class="mySlides">
<img class="img" src="https://res.cloudinary.com/mkconsulting/image/upload/v1545204835/sunset1.jpg" style="width:100%">
<div id="overlay"></div>
<div class="text">abcde</div>
<div class="indicator">
<button class="dot" onclick="currentSlide(1)"></button>
<button class="dot" onclick="currentSlide(2)"></button> </div>
</div>
<div class="mySlides">
<img class="img" src="https://res.cloudinary.com/mkconsulting/image/upload/v1545204834/sunset2.jpg" style="width:100%">
<div id="overlay"></div>
<div class="text text1">abcde</div>
<div class="indicator">
<button class="dot" onclick="currentSlide(1)"></button>
<button class="dot1" onclick="currentSlide()"></button> </div>
</div>
<!-- Next and previous buttons -->
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
</html>
<style>
.slideshow-container {
max-width: 100%;
position: relative;
padding-top:30px;
margin: auto;
height:auto;
}
.img{
height:350px;
}
.mySlides {
display: none;
}
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
z-index: 2;
}
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
}
.text {
color: #f2f2f2;
font-size: 20px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
top:45%;
font-family:'cwTeXYen';
z-index: 2;
}
.text1 {
color: #f2f2f2;
font-size: 40px;
top:35%;
}
.text2 {
font-family:'Noto Sans TC';
color: black;
font-weight:300;
}
.indicator {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
top:85%;
}
.dot {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: transparent;
border-radius: 50%;
transition: background-color 0.6s ease;
border: 1px solid #ffffff;
}
.active, .dot:hover {
background-color: #ffffff;
}
.dot1{
height: 15px;
width: 15px;
background color:white;
border-radius: 50%;
border: 1px solid #ffffff;
margin-left: 2px;
}
#overlay {
position: absolute;
height:50%;
top: 30%;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,0.5); /* Black background with opacity */
z-index: 1;
}
</style>
<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>

how about this:
<!DOCTYPE html>
<html lang="en">
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<style>
.mySlides {
display: none
}
.w3-left, .w3-right, .w3-badge {
cursor: pointer
}
.w3-badge {
height: 13px;
width: 13px;
padding: 0
}
.w3-display-container {
position: relative;
}
.myCaptions {
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
padding: 0.5rem 2rem;
background-color: rgba(255, 255, 255, 0.5);
}
</style>
<body>
<div class="w3-content w3-display-container" style="max-width:800px; text-align: center">
<p class="myCaptions" style="display: none;">Mountains</p>
<p class="myCaptions" style="display: none;">Nature Wide</p>
<p class="myCaptions" style="display: none;">Snow Wide</p>
<img class="mySlides" src="https://www.w3schools.com/w3css/img_mountains_wide.jpg" style="width:100%" alt="image1">
<img class="mySlides" src="https://www.w3schools.com/w3css/img_nature_wide.jpg" style="width:100%" alt="image2">
<img class="mySlides" src="https://www.w3schools.com/w3css/img_snow_wide.jpg" style="width:100%" alt="image3">
<div class="w3-center w3-container w3-section w3-large w3-text-white w3-display-bottommiddle" style="width:100%">
<div class="w3-left w3-hover-text-khaki" onclick="plusDivs(-1)">❮</div>
<div class="w3-right w3-hover-text-khaki" onclick="plusDivs(1)">❯</div>
<span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(1)"></span>
<span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(2)"></span>
<span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(3)"></span>
</div>
</div>
<script>
let slideIndex = 1
showDivs(slideIndex)
function plusDivs (n) {
showDivs(slideIndex += n)
}
function currentDiv (n) {
showDivs(slideIndex = n)
}
function showDivs (n) {
let i
const x = document.getElementsByClassName('mySlides')
const dots = document.getElementsByClassName('demo')
if (n > x.length) {
slideIndex = 1
}
if (n < 1) {
slideIndex = x.length
}
for (i = 0; i < x.length; i++) {
x[i].style.display = 'none'
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(' w3-white', '')
}
x[slideIndex - 1].style.display = 'block'
dots[slideIndex - 1].className += ' w3-white'
// adjust captions
const captions = document.getElementsByClassName('myCaptions')
for (i = 0; i < captions.length; i++) {
captions[i].style.display = 'none'
}
captions[slideIndex-1].style.display = 'block'
}
</script>
</body>
</html>