Hello,
I am pretty new in JavaScript. These days I am implementing slideshow on my project. But I am facing with two problems:
Problem number 1: I would like my slideshow to have two options :
- option number 1: arrays with user can slide images manually
- option number 2 I want images to slide automatically for (lets say) 5 seconds.
My problem is that I can`t implement these two options to run together. On w3schools.com they are codes for option number 1 and option number 2 but are separately, and I can`t implement to run together. Is there any way there options to run together?
Problem number 2: It will be much better for my project if I can implement some cool slides when my images slides. For now, they are sliding normal from right to left, but as I can see, they are options for images to slides on very cool way. Here there are some cool slides: https://amazingslider.com/examples/
My code is here:
CSS:
.slideshow-container {
position: relative;
max-width: 1200px;
box-sizing: border-box;
margin: auto;
}
.number {
position: absolute;
color: white;
margin: 15px;
font-size: 18px;
}
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
.prev {
position: absolute;
top: 50%;
color: white;
font-size: 35px;
left: 0;
padding-left: 15px;
padding-right: 15px;
background-color: black;
}
.next {
position: absolute;
top: 50%;
color: white;
font-size: 35px;
right: 0;
padding-left: 15px;
padding-right: 15px;
box-sizing: border-box;
background-color: black;
}
.prev:hover,
.next:hover {
background-color: gray;
cursor: pointer;
}
.dot {
width: 15px;
height: 15px;
background-color: lightgray;
border-radius: 50%;
margin: 5px;
display: inline-block;
cursor: pointer;
}
.active {
background-color: #717171;
}
.container {
position: relative;
width: 50%;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: transparent;
overflow: hidden;
width: 100%;
height: 10%;
transition: 0.5s ease;
}
.container:hover .overlay {
height: 100%;
}
.text-overlay {
color: #333;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
.images-overlay {
display: flex;
margin-left: 15%;
margin-right: 15%;
}
Javascript
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(showSlides, 1000);
}
