We Keep Coding

How can i add a smooth transition effect between slides?

Im not that good at coding but i try some ways to put a transition effect but didint work.
Can you guys help me ?I will appreciate it a lot..........................................................................................................................................................................................................................................................................................................
Java
let sliderImages = document.querySelectorAll(".slide"),
arrowLeft = document.querySelector("#arrow-left"),
arrowRight = document.querySelector("#arrow-right"),
current = 0;
// Clear all images
function reset() {
for (let i = 0; i < sliderImages.length; i++) {
sliderImages[i].style.display = "none";
}
}
// Init slider
function startSlide() {
reset();
sliderImages[0].style.display = "block";
}
// Show prev
function slideLeft() {
reset();
sliderImages[current - 1].style.display = "block";
current--;
}
// Show next
function slideRight() {
reset();
sliderImages[current + 1].style.display = "block";
current++;
}
// Left arrow click
arrowLeft.addEventListener("click", function() {
if (current === 0) {
current = sliderImages.length;
}
slideLeft();
});
// Right arrow click
arrowRight.addEventListener("click", function() {
if (current === sliderImages.length - 1) {
current = -1;
}
slideRight();
});
startSlide();
css
body,
#slider,
.wrap,
.slide-content {
margin: 0;
padding: 0;
width: 100%;
height: 100vh;
overflow-x: hidden;
}
.wrap {
position: relative;
}
.slide {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
/* .slide-content {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
} */
.delimitare {
background-color: r#141313ed;
width: 100%;
height: 100%;
padding-left: 10%;
padding-right: 10%;
}
.content-interior {
background-color: #141313;
width: 100%;
height: 100%;
}
.slide-content span {
font-size: 5rem;
color: #fff;
}
.arrow {
cursor: pointer;
position: absolute;
top: 50%;
margin-top: -35px;
width: 0;
height: 0;
border-style: solid;
}
#arrow-left {
border-width: 30px 40px 30px 0;
border-color: transparent #fff transparent transparent;
left: 0;
margin-left: 30px;
}
#arrow-right {
border-width: 30px 0 30px 40px;
border-color: transparent transparent transparent #fff;
right: 0;
margin-right: 30px;
}
html
<div class="wrap">
<div id="arrow-left" class="arrow"></div>
<div id="slider">
<div class="slide slide1">
<div class="slide-content">
</div>
</div>
</div>
<div class="slide slide2">
<div class="slide-content">
<span>Image Two</span>
</div>
</div>
<div class="slide slide3">
<div class="slide-content">
<span>Image Three</span>
</div>
</div>
</div>
<div id="arrow-right" class="arrow"></div>
</div>

So far you're doing well!
There's a lot of different ways to accomplish a fading slide, but the CSS "transition" property is an easy way to do it.
The problem here, though, is that you cannot transition the "display" property. Going from "display: block" to "display: none" cannot be transitioned. It either displays or doesn't. On or off, like a boolean.
I have put together a working example by updating the code you provided. Instead of using display to switch between slides, I updated it to change the opacity instead. Opacity can be transitioned, so I added the CSS to handle that as well.
(I also had to set the slide position to absolute so the slides stacked on top of each other.)
Quick side note: when you initially shared your code, you labeled your JavaScript as "Java". Java and JavaScript are two different coding languages so be careful with that in the future.
let sliderImages = document.querySelectorAll(".slide"),
arrowLeft = document.querySelector("#arrow-left"),
arrowRight = document.querySelector("#arrow-right"),
current = 0;
// Clear all images
function reset() {
for (let i = 0; i < sliderImages.length; i++) {
sliderImages[i].style.opacity = "0";
}
}
// Init slider
function startSlide() {
reset();
sliderImages[0].style.opacity = "1";
}
// Show prev
function slideLeft() {
reset();
sliderImages[current - 1].style.opacity = "1";
current--;
}
// Show next
function slideRight() {
reset();
sliderImages[current + 1].style.opacity = "1";
current++;
}
// Left arrow click
arrowLeft.addEventListener("click", function () {
if (current === 0) {
current = sliderImages.length;
}
slideLeft();
});
// Right arrow click
arrowRight.addEventListener("click", function () {
if (current === sliderImages.length - 1) {
current = -1;
}
slideRight();
});
startSlide();
body,
#slider,
.wrap,
.slide-content {
margin: 0;
padding: 0;
width: 100%;
height: 100vh;
overflow-x: hidden;
background-color: blue;
}
.wrap {
position: relative;
}
.slide {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
opacity: 0;
transition: opacity 0.5s ease;
position: absolute;
left: 0;
right: 0;
margin: auto;
}
.slide-content {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}
.delimitare {
background-color: r#141313ed;
width: 100%;
height: 100%;
padding-left: 10%;
padding-right: 10%;
}
.content-interior {
background-color: #141313;
width: 100%;
height: 100%;
}
.slide-content span {
font-size: 5rem;
color: #fff;
}
.arrow {
cursor: pointer;
position: absolute;
top: 50%;
margin-top: -35px;
width: 0;
height: 0;
border-style: solid;
z-index: 2;
}
#arrow-left {
border-width: 30px 40px 30px 0;
border-color: transparent #fff transparent transparent;
left: 0;
margin-left: 30px;
}
#arrow-right {
border-width: 30px 0 30px 40px;
border-color: transparent transparent transparent #fff;
right: 0;
margin-right: 30px;
}
<div class="wrap">
<div id="arrow-left" class="arrow">
</div>
<div id="slider">
<div class="slide slide1">
<div class="slide-content">
<span>Image One</span>
</div>
</div>
<div class="slide slide2">
<div class="slide-content">
<span>Image Two</span>
</div>
</div>
<div class="slide slide3">
<div class="slide-content">
<span>Image Three</span>
</div>
</div>
</div>
<div id="arrow-right" class="arrow"></div>
</div>

Jquery Slider arrows not appearing

I'm doing a Jquery Slider and I have a problem with my last image.
The arrows are appearing for all the images but not the last one it disappear and I don't understand why, can anybody help me ?
Here's my codepen : https://codepen.io/Softee/pen/WNZpXGa
here's my code :
var slideIndex = 1;
showImage(slideIndex);
function plusIndex(n) {
showImage(slideIndex += n);
}
function currentSlide(n) {
showImage(slideIndex = n);
}
function showImage(n) {
var slide = document.getElementsByClassName("slides");
var dots = document.getElementsByClassName("dots");
if (n > slide.length) {
slideIndex = 1
};
if (n < 1) {
slideIndex = slide.length
};
for (var i = 0; i < slide.length; i++) {
slide[i].style.display = "none";
};
slide[slideIndex - 1].style.display = "block";
for (var i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace("active", "");
};
}
autoSlide();
function autoSlide(){
var i;
var x = document.getElementsByClassName("slides");
for(i=0;i<x.length;i++);
{
x[i].style.display = "none";
}
if(index > x.length){ index = 1}
x[index-1].style.display = "block";
index++;
setTimeout(autoSlide,2000);
}
body {
margin: 0;
font-family: verdana, sans-serif;
}
.slideshow-container {
width: 800px;
position: relative;
margin: auto;
}
.slides {
display: none;
}
.slideshow-container img {
width: 800px;
}
.number {
position: absolute;
padding: 8px 12px;
color: #f2f2f2;
}
.text {
text-align: center;
font-size: 18px;
position: absolute;
width: 100%;
padding: 8px 16px;
bottom: 55px;
color: #f2f2f2;
font-weight: bold;
}
.prev,
.next {
position: absolute;
margin-top: -250px;
color: #f2f2f2;
font-weight: bold;
padding: 10px 10px;
font-size: 18px;
border-radius: 0 3px 3px 0;
cursor: pointer;
}
.next {
border-radius: 3px 0 0 3px;
right: 0;
}
.prev:hover,
.next:hover {
background: rgba(0, 0, 0, 0.8);
}
.dots {
width: 10px;
height: 10px;
display: inline-block;
background: grey;
padding: 5px;
border-radius: 50%;
cursor: pointer;
}
.fade {
animation-name: fade;
animation-duration: 0.5s;
}
#keyframes fade {
from {
opacity: 0.4;
}
to {
opacity: 1;
}
}
.active,
.dots:hover {
background: #333;
}
<!--Container Slide Show-->
<div class="slideshow-container">
<div class="slides fade">
<div class="number">1 / 4</div>
<div><img src="https://www.merveilles-du-monde.com/Sept/images/Vignettes/Modernes/Machu-Picchu-V.jpg"></div>
<div class="text">Le Taj Mahal</div>
</div>
<div class="slideshow-container">
<div class="slides">
<div class="number">2 / 4</div>
<div><img src="https://www.merveilles-du-monde.com/Sept/images/Vignettes/Modernes/Machu-Picchu-V.jpg"></div>
<div class="text">Le Chichen Itza</div>
</div>
<div class="slideshow-container">
<div class="slides">
<div class="number">3 / 4</div>
<div><img src="https://www.merveilles-du-monde.com/Sept/images/Vignettes/Modernes/Machu-Picchu-V.jpg"></div>
<div class="text">Le Colisée</div>
</div>
<div class="slideshow-container">
<div class="slides">
<div class="number">4 / 4</div>
<div><img src="https://www.merveilles-du-monde.com/Sept/images/Vignettes/Modernes/Machu-Picchu-V.jpg"></div>
<div class="text">Le Machu Picchu</div>
</div>
<a class="prev" onclick="plusIndex(-1)">&#10094</a>
<a class="next" onclick="plusIndex(+1)">&#10095</a>
</div>
<br/>
<div style="text-align:center">
<span class="dots" onclick="currentSlide(1)"></span>
<span class="dots" onclick="currentSlide(2)"></span>
<span class="dots" onclick="currentSlide(3)"></span>
<span class="dots" onclick="currentSlide(4)"></span>
</div>
....................................

This issue can be fixed by editing your CSS. So rather than:
.prev, .next {
position: absolute;
top: -250px;
do:
.prev,.next {
position: absolute;
margin-top: -250px;
This prevents the arrows from moving above the .slides divs when you reach the last slide.
For the autoslide functionality, there's no need for all the complicated code. Just trigger a call to the click event on the .next div. Also, use setInterval() and not setTimeout. So replace the entire definition and call to the autoslide() function with the following code:
setInterval(() => {
document.querySelector(".next").click()
}, 2000);
Check out the updated pen on https://codepen.io/cedric-ipkiss/pen/BamzBmz

why i add 1 to the variable but it adds "2" every time?

In the code below I want to add 1 to the page variable but every time I click on next button it adds 2 to the variable.
Code in Codepen
var slides = document.querySelectorAll('.slides');
var dots = document.querySelectorAll('.dot');
var page = 0;
function Swiper(page) {
if (page > slides.length) page = 0;
if (page < 0) page = slides.length;
for (let i = 0; i < slides.length; i++) {
slides[i].classList.remove('active');
}
slides[page].classList.add('active');
for (let i = 0; i < dots.length; i++) {
dots[i].classList.remove('active-dot');
}
dots[page].classList.add('active-dot');
for (let i = 0; i < dots.length; i++) {
dots[i].classList.remove('active-dot');
}
dots[page].classList.add('active-dot');
}
function Slider(slider) {
console.log(page)
console.log(slider)
Swiper(page += slider);
console.log(page += slider)
}
function currentSlide(pagination) {
Swiper(page = pagination);
}
* {
font-family: Raleway;
box-sizing: border-box;
outline: none;
}
body {
min-height: 100vh;
margin: 0;
padding: 16px;
}
/* body>h1,body>h2,body>h3,body>h4,body>h5,body>h6,body>p{
padding-left: 16px;
.btnload:hover{
background-color: #4169E1;
} */
.flexbox {
display: flex;
flex-wrap: wrap;
}
.col-25 {
flex: 25%;
}
.col-50 {
flex: 50%;
}
.col-75 {
flex: 75%;
}
.col-100 {
flex: 100%;
}
button,
input {
outline: none;
}
.container {
max-width: 1000px;
position: relative;
margin-left: auto;
margin-right: auto;
}
.slides {
width: 100%;
height: 100%;
position: absolute;
display: none;
animation: slide 0.4s ease;
}
#keyframes slide {
0% {
opacity: 0.2
}
100% {
opacity: 1
}
}
.active {
display: block;
}
.slides .page-number {
position: absolute;
top: 0;
left: 0;
padding: 12px 8px;
color: white;
}
.slides .desc {
color: white;
position: absolute;
top: 310px;
left: 50%;
}
img {
width: 100%;
height: auto;
}
.container a {
padding: 16px;
color: white;
text-decoration: none;
transition: 0.4s;
font-size: 20px;
top: 150px;
position: absolute;
}
img {
width: 100%;
height: auto;
}
.container a:hover {
background-color: rgba(0, 0, 0, 0.616);
}
.container #right-slide {
right: 0px;
}
.container #left-slide {
left: 0px;
}
.pagination {
display: flex;
max-width: 1000px;
height: 100px;
position: relative;
top: 380px;
justify-content: center;
margin-left: auto;
margin-right: auto;
}
.pagination .dot {
border-radius: 50%;
height: 15px;
width: 15px;
cursor: pointer;
margin: 2px;
transition: 0.6s;
}
.pagination .dot:hover {
background-color: rgb(138, 138, 138);
}
.dot {
background-color: #ddd;
}
.active-dot {
background-color: rgb(138, 138, 138);
}
.no-active {
background-color: #ddd;
}
<div class="container">
<div class="slides active">
<div class="page-number">1/4</div>
<img src="https://www.w3schools.com/howto/img_nature_wide.jpg" alt="">
<div class="desc">Caption One</div>
</div>
<div class="slides">
<div class="page-number">2/4</div>
<img src="https://www.w3schools.com/howto/img_snow_wide.jpg" alt="">
<div class="desc">Caption Two</div>
</div>
<div class="slides">
<div class="page-number">3/4</div>
<img src="https://www.w3schools.com/howto/img_mountains_wide.jpg" alt="">
<div class="desc">Caption Three</div>
</div>
<div class="slides">
<div class="page-number">4/4</div>
<img src="Images/img_mountains_wide.jpg" alt="">
<div class="desc">Caption Four</div>
</div>
<a onclick="Slider(-1)" id="left-slide" href="#">❮</a>
<a onclick="Slider(+1)" id="right-slide" href="#">❯</a>
</div>
<div class="pagination">
<span class="dot dot-color active-dot" onclick="currentSlide(0, event)"></span>
<span class="dot dot-color" onclick="currentSlide(1, event)"></span>
<span class="dot dot-color" onclick="currentSlide(2, event)"></span>
<span class="dot dot-color" onclick="currentSlide(3, event)"></span>
</div>

Swiper(page += slider);
console.log(page += slider)
First you add slider to page (updating the value of page) and pass the result to Swiper.
Then you add slider to (the new value of) page (updating the value of page again) and pass the result to console.log.
As a rule of thumb, combining operations that modify variables with operations that pass them to functions is a good way to confuse yourself.
You might want to split out the actions for clarity.
page += slider;
Swiper(page);
console.log(page);

I think because of this line console.log(page += slider)
It makes the page increase 2 times
function Slider(slider) {
console.log(page)
console.log(slider)
Swiper(page += slider);
console.log(page += slider) // <<<--------------- This line
}

images not showing up on simple slider

so I have copied a piece of code from a tutorial from a youtube video for a simple slider project, I have gone over the code a number of times and can not figure out what is wrong with it. pictures do not show up, and if i change code which on line 46 of JS to starterslide images come but once i get to image three and use right arrow key, i get a plain white page.
const sliderImages = document.querySelectorAll(".slide")
, arrowLeft = document.querySelector ("#arrow-left")
, arrowRight = document.querySelector ("#arrow-right")
;
var current = 0
;
function reset() {
for(let i = 0; i < sliderImages.length; i++) {
sliderImages[i].style.display = "none";
}
}
function startSlide() {
reset();
sliderImages[0],style.display = "block";
}
function slideLeft () {
reset();
sliderImages[current -1].style.display = "block";
current--;
}
function slideRight(){
reset();
sliderImages[current + 1].style.display = "block";
current++;
}
arrowLeft.addEventListener("click", function() {
if (current === 0) {
current = sliderImages.length;
}
slideLeft();
});
arrowRight.addEventListener("click", function() {
if (current === sliderImages.lenght - 1){
current = -1;
}
slideRight();
});
startSlide();
body, #slider, .wrap, .slide-content{
margin:0;
padding:0;
font-family: Arial, Helvetica, sans-serif;
width:100%;
height:100vh;
overflow-x: hidden;
}
.wrap {
position:relative
}
.slide {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.slide1 {
background-image: url("images slider/pexels-alan-daysh-5198585.jpg");
}
.slide2 {
background-image: url("images slider/pexels-barikive-5282392.jpg");
}
.slide3 {
background-image: url("images slider/pexels-kei-scampa-3009487.jpg");
}
.slide-content {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}
.slide-content span{
font-size: 5rem;
color: white;
}
.arrow {
cursor: pointer;
position: absolute;
top: 50%;
margin-top: -35px;
width: 0;
height: 0;
border-style: solid;
}
#arrow-left {
border-width: 30px 40px 30px 0;
border-color: transparent white transparent transparent;
left: 0;
margin-left: 30px;
}
#arrow-right{
border-width: 30px 0 30px 40px;
border-color: transparent transparent transparent white;
right: 0;
margin-right: 30px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel='stylesheet' href='style.css'>
<title>Fullscreen Slider</title>
</head>
<body>
<div class="wrap">
<div id="arrow-left" class="arrow"></div>
<div id="slider">
<div class="slide slide1">
<div class="slide-content">
<span>Image one</span>
</div>
</div>
<div class="slide slide2">
<div class="slide-content">
<span>Image two</span>
</div>
</div>
<div class="slide slide3">
<div class="slide-content">
<span>Image three</span>
</div>
</div>
</div>
<div id='arrow-right' class='arrow'></div>
</div>
</body>
<script src='script.js'></script>
</html>

length spell incorrectly in the code.I have corrected and now it is working fine,
let sliderImages = document.querySelectorAll(".slide");
arrowLeft = document.querySelector("#arrow-left");
arrowRight = document.querySelector("#arrow-right");
current = 0;
function reset() {
for (let i = 0; i < sliderImages.length; i++) {
sliderImages[i].style.display = "none";
}
}
function startSlide() {
reset();
sliderImages[0].style.display = "block";
}
function slideLeft() {
reset();
sliderImages[current - 1].style.display = "block";
current--;
}
function slideRight() {
reset();
sliderImages[current + 1].style.display = "block";
current++;
}
arrowLeft.addEventListener("click", function() {
if (current === 0) {
current = sliderImages.length;
}
slideLeft();
});
arrowRight.addEventListener("click", function() {
if (current === sliderImages.length - 1) {
current = -1;
}
slideRight();
});
startSlide();
body,
#slider,
.wrap,
.slide-content {
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
width: 100%;
height: 100vh;
overflow-x: hidden;
}
.wrap {
position: relative
}
.slide {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.slide1 {
background-image: url("https://images.unsplash.com/photo-1519455953755-af066f52f1a6?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2261&q=80");
}
.slide2 {
background-image: url("https://images.unsplash.com/photo-1519455953755-af066f52f1a6?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2261&q=80");
}
.slide3 {
background-image: url("https://images.unsplash.com/photo-1519455953755-af066f52f1a6?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2261&q=80");
}
.slide-content {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}
.slide-content span {
font-size: 5rem;
color: white;
}
.arrow {
cursor: pointer;
position: absolute;
top: 50%;
margin-top: -35px;
width: 0;
height: 0;
border-style: solid;
}
#arrow-left {
border-width: 30px 40px 30px 0;
border-color: transparent white transparent transparent;
left: 0;
margin-left: 30px;
}
#arrow-right {
border-width: 30px 0 30px 40px;
border-color: transparent transparent transparent white;
right: 0;
margin-right: 30px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fullscreen Slider</title>
</head>
<body>
<div class="wrap">
<div id="arrow-left" class="arrow"></div>
<div id="slider">
<div class="slide slide1">
<div class="slide-content">
<span>Image one</span>
</div>
</div>
<div class="slide slide2">
<div class="slide-content">
<span>Image two</span>
</div>
</div>
<div class="slide slide3">
<div class="slide-content">
<span>Image three</span>
</div>
</div>
</div>
<div id='arrow-right' class='arrow'></div>
</div>
</body>
</html>

Prefer to use Modulo operation
const
sliderImages = document.querySelectorAll(".slide")
, arrowLeft = document.querySelector("#arrow-left")
, arrowRight = document.querySelector("#arrow-right")
;
var current = 0 ;
function setSlideMov(mov) {
current = (current + mov + sliderImages.length) % sliderImages.length
sliderImages.forEach((sl,i)=> {
sl.style.display = (i==current) ? 'block' : 'none'
})
}
arrowLeft.addEventListener("click", function () { setSlideMov(-1) })
arrowRight.addEventListener("click", function () { setSlideMov(+1) })
setSlideMov(0);
in context:
const
sliderImages = document.querySelectorAll(".slide")
, arrowLeft = document.querySelector("#arrow-left")
, arrowRight = document.querySelector("#arrow-right")
;
var current = 0 ;
function setSlideMov(mov) {
current = (current + mov + sliderImages.length) % sliderImages.length
sliderImages.forEach((sl,i)=> {
sl.style.display = (i==current) ? 'block' : 'none'
})
}
arrowLeft.addEventListener("click", function () { setSlideMov(-1) })
arrowRight.addEventListener("click", function () { setSlideMov(+1) })
setSlideMov(0);
body,
#slider,
.wrap,
.slide-content {
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
width: 100%;
height: 100vh;
overflow-x: hidden;
}
.wrap {
position: relative
}
.slide {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.slide1 {
background-image: url("https://picsum.photos/id/251/500/300.jpg");
}
.slide2 {
background-image: url("https://picsum.photos/id/257/500/300.jpg");
}
.slide3 {
background-image: url("https://picsum.photos/id/253/500/300.jpg");
}
.slide-content {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}
.slide-content span {
font-size: 5rem;
color: white;
}
.arrow {
cursor: pointer;
position: absolute;
top: 50%;
margin-top: -35px;
width: 0;
height: 0;
border-style: solid;
}
#arrow-left {
border-width: 30px 40px 30px 0;
border-color: transparent white transparent transparent;
left: 0;
margin-left: 30px;
}
#arrow-right {
border-width: 30px 0 30px 40px;
border-color: transparent transparent transparent white;
right: 0;
margin-right: 30px;
}
<div class="wrap">
<div id="arrow-left" class="arrow"></div>
<div id="slider">
<div class="slide slide1">
<div class="slide-content">
<span>Image one</span>
</div>
</div>
<div class="slide slide2">
<div class="slide-content">
<span>Image two</span>
</div>
</div>
<div class="slide slide3">
<div class="slide-content">
<span>Image three</span>
</div>
</div>
</div>
<div id='arrow-right' class='arrow'></div>
</div>

How to slide images by clicking arrows bullets and auto slide images by javascript?

I want bullets move when i clicked arrow,i tried to think how to code it but my knowledge and experience is still not enough so i really need help from people.
$(document).ready(function () {
$("#mainTopics").click(function (e) {
e.preventDefault();
e.stopPropagation();
$("#sub-topics").toggle();
});
$("html").on('click', function () {
if ($("#sub-topics").is(':visible')) {
$("#sub-topics").toggle();
}
});
});
var sliderImages = document.querySelectorAll('.slide');
var arrowLeft = document.querySelector('#arrow-left');
var arrowRight = document.querySelector('#arrow-right');
var arrowSlide = document.querySelectorAll('.arrow');
var sliderBullets = document.querySelectorAll('.bullets');
var current = 0;
//reset slideimages
function resetSlide() {
for (var i = 0; i < sliderImages.length; i++) {
sliderImages[i].style.display = 'none';
}
}
//slide left
function slideLeft() {
resetSlide();
sliderImages[current - 1].style.display = 'block';
current--;
}
//slide right
function slideRight() {
resetSlide();
sliderImages[current + 1].style.display = 'block';
current++;
}
//arrow left
arrowLeft.addEventListener('click', function () {
if (current === 0) {
current = sliderImages.length;
}
slideLeft();
});
//arrow right
arrowRight.addEventListener('click', function () {
if (current === sliderImages.length - 1) {
current = -1;
}
slideRight();
});
//start to slideimages
function startSlide() {
resetSlide();
sliderImages[0].style.display = 'block';
}
//called startslide function
startSlide();
body {
margin: 0;
}
li, a{
text-decoration: none;
list-style-type: none;
text-decoration-line: none;
color: black;
}
/*main-menu*/
#main-menu {
position: relative;
}
#main-menu ul {
margin: 0;
padding: 0;
}
#main-menu li {
display: inline-block;
}
#main-menu a {
display: block;
width: 100px;
padding: 10px;
border: 1px solid;
text-align: center;
}
/*sub-topics*/
#sub-topics {
position: absolute;
display: none;
margin-top: 10px;
width: 100%;
left: 0;
}
#sub-topics ul {
margin: 0;
padding: 0;
}
#sub-topics li {
display: block;
}
#subTopics a {
text-align: left;
}
/*columns*/
#column1, #column2, #column3 {
position: relative;
float: left;
left: 125px;
margin: 0px 5px 0px 0px;
}
/*hover underline*/
#main-menu li:hover {
text-decoration: underline;
}
/*slideshow*/
#slideshow {
position: relative;
width: 100%;
height: 100%;
}
#slide1 {
background-image: url(https://preview.ibb.co/mV3TR7/1.jpg);
}
#slide2 {
background-image: url(https://preview.ibb.co/bSCBeS/2.jpg);
}
#slide3 {
background-image: url(https://preview.ibb.co/kgG9Yn/3.jpg);
}
.slide {
background-repeat: no-repeat;
background-position: center;
background-size: 800px 400px;
width: 800px;
height: 400px;
margin: auto;
margin-top: 40px;
}
.slide-contain {
position: absolute;
left: 50%;
bottom: 50%;
transform: translate3d(-50%,-50%,0);
text-align: center;
}
.slide-contain span {
color: white;
}
/*arrow*/
.arrow {
position: absolute;
cursor: pointer;
top: 200px;
width: 0;
height: 0;
border-style: solid;
}
.arrow:hover {
background-color: #e0dede;
transition: background-color 0.6s ease;
}
/*arrow-left*/
#arrow-left {
position: absolute;
border-width: 30px 40px 30px 0px;
border-color: transparent gray transparent transparent;
left: 0;
margin-left: 300px;
}
/*arrow-right*/
#arrow-right {
border-width: 30px 0px 30px 40px;
border-color: transparent transparent transparent gray;
right: 0;
margin-right: 300px;
}
/*bullets*/
#slidebullet {
position: relative;
top: -30px;
text-align: center;
}
.bullets {
display: inline-block;
background-color: gray;
width: 15px;
height: 15px;
border-radius: 10px;
cursor: pointer;
transition: background-color 0.6s ease;
}
.active, .bullets:hover {
background-color: #e0dede;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="index.css" />
</head>
<body>
<header></header>
<nav>
<div id="main-menu">
<ul>
<li>Logo</li>
<li>Home</li>
<li>
Topics
<div id="sub-topics">
<div id="column1" class="columns">
<ul>
<li>example1</li>
<li>example2</li>
</ul>
</div>
</div>
</li>
</ul>
</div>
</nav>
<div id="slideshow">
<div id="arrow-left" class="arrow"></div>
<div id="slide1" class="slide">
<div class="slide-contain">
<span>Image One</span>
</div>
</div>
<div id="slide2" class="slide">
<div class="slide-contain">
<span>Image Two</span>
</div>
</div>
<div id="slide3" class="slide">
<div class="slide-contain">
<span>Image Three</span>
</div>
</div>
<div id="slidebullet">
<div id="bullet1" class="bullets"></div>
<div id="bullet2" class="bullets"></div>
<div id="bullet3" class="bullets"></div>
</div>
<div id="arrow-right" class="arrow"></div>
</div>
<script src="jquery.js"></script>
<script src="index.js"></script>
<script>
</script>
</body>
</html>
Above is the code that i have learned from website asked people and youtube.
My website now the arrows work fine can change to other slides,but the bullets are not moving the same time like arrows.

Your goal can be reached by adding the following javascript code to your js file:
for (var i=0 ;i<sliderBullets.length;i++)
{
bullet=sliderBullets[i];
bullet.addEventListener("click",function(){
var i=this.id;
i=i.replace("bullet","");
current=parseInt(i)-1;
resetSlide();
sliderImages[current].style.display = 'block';
});
}

Try this one , its very easy .
https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_carousel&stacked=h