I am trying to make a slideshow using HTML, CSS, and JavaScript. I was successfully able to do that, but I have a few issues that I want to resolve.
I am trying to stop the slideshow when I click on any of the manual navigation to control the slide.
The loop is not that perfect. For example, the slideshow is on slide 3, and I click on slide 1 using the manual navigation bar, the slideshow goes all the way to slide 4 after 5 seconds passes.
var counter = 1;
setInterval(function() {
document.getElementById('radio' counter).checked = true;
counter ;
if (counter > 4) {
counter = 1;
}
}, 5000);.slide_container {
position: relative;
width: 100%;
height: 100vh;
}
.slide_container .slider {
position: absolute;
top: 0;
left: 0;
width: 500%;
height: 100%;
float: left;
/*animation: animate 10s linear infinite;
*/
}
.slide_container .slider:hover {
animation-play-state: paused;
}
.slide_container .slider .slide {
position: relative;
width: 20%;
height: 100%;
float: left;
}
.slide_container .slider .slide .caption {
position: absolute;
bottom: 60px;
left: 60px;
right: 60px;
padding: 30px;
background: rgba(0, 0, 0, 0.5);
}
.slide_container .slider .slide .caption h2 {
color: #fff;
font-size: 50px;
text-align: left;
}
.slide_container .slider .slide .caption p {
color: #fff;
font-size: 20px;
text-align: left;
}
.slide_container .slider .slide.slide1 {
background: green;
background-size: cover;
background-position: center;
}
.slide_container .slider .slide.slide2 {
background: blue;
background-size: cover;
background-position: center;
}
.slide_container .slider .slide.slide3 {
background: pink;
background-size: cover;
background-position: center;
}
.slide_container .slider .slide.slide4 {
background: red;
background-size: cover;
background-position: center;
}
@keyframes animate {
0% {
margin-left: 0;
}
20% {
margin-left: 0;
}
25% {
margin-left: -100%;
}
45% {
margin-left: -100%;
}
50% {
margin-left: -200%;
}
70% {
margin-left: -200%;
}
75% {
margin-left: -300%;
}
95% {
margin-left: -300%;
}
}
.slide_nav {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
margin-top: -40px;
display: flex;
justify-content: center;
}
.slide_bar:not(:last-child) {
margin-right: 2px;
}
.slide_bar {
width: 25px;
height: 25px;
border: 2px solid #fff;
border-radius: 15px;
transition: 0.5s;
}
.slide_bar:hover {
background-color: #fff;
border: 2px solid #fff;
cursor: pointer;
}
.slide_container input {
display: none;
}
#radio1:checked~.first {
margin-left: 0;
transition: linear 0.5s;
}
#radio2:checked~.first {
margin-left: -100%;
transition: linear 0.5s;
}
#radio3:checked~.first {
margin-left: -200%;
transition: linear 0.5s;
}
#radio4:checked~.first {
margin-left: -300%;
transition: linear 0.5s;
}
.slide_nav_auto {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
margin-top: -40px;
display: flex;
justify-content: center;
}
.slide_nav_auto div {
width: 25px;
height: 25px;
border: 2px solid #FFF;
border-radius: 15px;
transition: 0.5s;
}
.slide_nav_auto div:not(:last-child) {
margin-right: 2px;
justify-content: center;
}
#radio1:checked~.slide_nav_auto .a_btn1 {
background-color: #fff;
}
#radio2:checked~.slide_nav_auto .a_btn2 {
background-color: #fff;
}
#radio3:checked~.slide_nav_auto .a_btn3 {
background-color: #fff;
}
#radio4:checked~.slide_nav_auto .a_btn4 {
background-color: #fff;
}<div >
<input type="radio" name="radio_button" id="radio1" checked/>
<input type="radio" name="radio_button" id="radio2" />
<input type="radio" name="radio_button" id="radio3" />
<input type="radio" name="radio_button" id="radio4" />
<div >
<div >
<div >
<h2> Slide 1</h2>
<p>ted her footsteps to the path which they had taken. She was just having a good cry all to herself. The mosquitoes made merry over her, biting her firm, round arms and nipping at her bare insteps.but here he sat with a blank screen in front of
him. That blank screen taunting him day after day had started to play with his mind. He didn't understand why he couldn't even type a single word, just one to begin the process and build from there. And yet, he already knew that the eight hours
he was prepared to sit in front of his computer today would end with the screen remaining bl</p>
</div>
</div>
<div >
<div >
<h2> Slide 2</h2>
<p>ted her footsteps to the path which they had taken. She was just having a good cry all to herself. The mosquitoes made merry over her, biting her firm, round arms and nipping at her bare insteps.but here he sat with a blank screen in front of
him. That blank screen taunting him day after day had started to play with his mind. He didn't understand why he couldn't even type a single word, just one to begin the process and build from there. And yet, he already knew that the eight hours
he was prepared to sit in front of his computer today would end with the screen remaining bl</p>
</div>
</div>
<div >
<div >
<h2> Slide 3</h2>
<p>ted her footsteps to the path which they had taken. She was just having a good cry all to herself. The mosquitoes made merry over her, biting her firm, round arms and nipping at her bare insteps.but here he sat with a blank screen in front of
him. That blank screen taunting him day after day had started to play with his mind. He didn't understand why he couldn't even type a single word, just one to begin the process and build from there. And yet, he already knew that the eight hours
he was prepared to sit in front of his computer today would end with the screen remaining bl</p>
</div>
</div>
<div >
<div >
<h2> Slide 4</h2>
<p>ted her footsteps to the path which they had taken. She was just having a good cry all to herself. The mosquitoes made merry over her, biting her firm, round arms and nipping at her bare insteps.but here he sat with a blank screen in front of
him. That blank screen taunting him day after day had started to play with his mind. He didn't understand why he couldn't even type a single word, just one to begin the process and build from there. And yet, he already knew that the eight hours
he was prepared to sit in front of his computer today would end with the screen remaining bl</p>
</div>
</div>
</div>
<div >
<div ></div>
<div ></div>
<div ></div>
<div ></div>
</div>
<div >
<label for="radio1" ></label>
<label for="radio2" ></label>
<label for="radio3" ></label>
<label for="radio4" ></label>
</div>CodePudding user response：
When you set an interval (or a timeout), an identifier is returned. It can be used to cancel any future execution of the provided callback.
var counter = 1;
let intervalRef = setInterval(function() {
document.getElementById('radio' counter).checked = true;
counter ;
if (counter > 4) {
counter = 1;
}
}, 5000);
// An event listener for the nav circles
document.querySelectorAll(".slide_bar").forEach(item => item.addEventListener("click", function(){
clearInterval(intervalRef)
console.log("Slide show stopped")
})).slide_container {
position: relative;
width: 100%;
height: 100vh;
}
.slide_container .slider {
position: absolute;
top: 0;
left: 0;
width: 500%;
height: 100%;
float: left;
/*animation: animate 10s linear infinite;
*/
}
.slide_container .slider:hover {
animation-play-state: paused;
}
.slide_container .slider .slide {
position: relative;
width: 20%;
height: 100%;
float: left;
}
.slide_container .slider .slide .caption {
position: absolute;
bottom: 60px;
left: 60px;
right: 60px;
padding: 30px;
background: rgba(0, 0, 0, 0.5);
}
.slide_container .slider .slide .caption h2 {
color: #fff;
font-size: 50px;
text-align: left;
}
.slide_container .slider .slide .caption p {
color: #fff;
font-size: 20px;
text-align: left;
}
.slide_container .slider .slide.slide1 {
background: green;
background-size: cover;
background-position: center;
}
.slide_container .slider .slide.slide2 {
background: blue;
background-size: cover;
background-position: center;
}
.slide_container .slider .slide.slide3 {
background: pink;
background-size: cover;
background-position: center;
}
.slide_container .slider .slide.slide4 {
background: red;
background-size: cover;
background-position: center;
}
@keyframes animate {
0% {
margin-left: 0;
}
20% {
margin-left: 0;
}
25% {
margin-left: -100%;
}
45% {
margin-left: -100%;
}
50% {
margin-left: -200%;
}
70% {
margin-left: -200%;
}
75% {
margin-left: -300%;
}
95% {
margin-left: -300%;
}
}
.slide_nav {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
margin-top: -40px;
display: flex;
justify-content: center;
}
.slide_bar:not(:last-child) {
margin-right: 2px;
}
.slide_bar {
width: 25px;
height: 25px;
border: 2px solid #fff;
border-radius: 15px;
transition: 0.5s;
}
.slide_bar:hover {
background-color: #fff;
border: 2px solid #fff;
cursor: pointer;
}
.slide_container input {
display: none;
}
#radio1:checked~.first {
margin-left: 0;
transition: linear 0.5s;
}
#radio2:checked~.first {
margin-left: -100%;
transition: linear 0.5s;
}
#radio3:checked~.first {
margin-left: -200%;
transition: linear 0.5s;
}
#radio4:checked~.first {
margin-left: -300%;
transition: linear 0.5s;
}
.slide_nav_auto {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
margin-top: -40px;
display: flex;
justify-content: center;
}
.slide_nav_auto div {
width: 25px;
height: 25px;
border: 2px solid #FFF;
border-radius: 15px;
transition: 0.5s;
}
.slide_nav_auto div:not(:last-child) {
margin-right: 2px;
justify-content: center;
}
#radio1:checked~.slide_nav_auto .a_btn1 {
background-color: #fff;
}
#radio2:checked~.slide_nav_auto .a_btn2 {
background-color: #fff;
}
#radio3:checked~.slide_nav_auto .a_btn3 {
background-color: #fff;
}
#radio4:checked~.slide_nav_auto .a_btn4 {
background-color: #fff;
}<div >
<input type="radio" name="radio_button" id="radio1" checked/>
<input type="radio" name="radio_button" id="radio2" />
<input type="radio" name="radio_button" id="radio3" />
<input type="radio" name="radio_button" id="radio4" />
<div >
<div >
<div >
<h2> Slide 1</h2>
<p>ted her footsteps to the path which they had taken. She was just having a good cry all to herself. The mosquitoes made merry over her, biting her firm, round arms and nipping at her bare insteps.but here he sat with a blank screen in front of
him. That blank screen taunting him day after day had started to play with his mind. He didn't understand why he couldn't even type a single word, just one to begin the process and build from there. And yet, he already knew that the eight hours
he was prepared to sit in front of his computer today would end with the screen remaining bl</p>
</div>
</div>
<div >
<div >
<h2> Slide 2</h2>
<p>ted her footsteps to the path which they had taken. She was just having a good cry all to herself. The mosquitoes made merry over her, biting her firm, round arms and nipping at her bare insteps.but here he sat with a blank screen in front of
him. That blank screen taunting him day after day had started to play with his mind. He didn't understand why he couldn't even type a single word, just one to begin the process and build from there. And yet, he already knew that the eight hours
he was prepared to sit in front of his computer today would end with the screen remaining bl</p>
</div>
</div>
<div >
<div >
<h2> Slide 3</h2>
<p>ted her footsteps to the path which they had taken. She was just having a good cry all to herself. The mosquitoes made merry over her, biting her firm, round arms and nipping at her bare insteps.but here he sat with a blank screen in front of
him. That blank screen taunting him day after day had started to play with his mind. He didn't understand why he couldn't even type a single word, just one to begin the process and build from there. And yet, he already knew that the eight hours
he was prepared to sit in front of his computer today would end with the screen remaining bl</p>
</div>
</div>
<div >
<div >
<h2> Slide 4</h2>
<p>ted her footsteps to the path which they had taken. She was just having a good cry all to herself. The mosquitoes made merry over her, biting her firm, round arms and nipping at her bare insteps.but here he sat with a blank screen in front of
him. That blank screen taunting him day after day had started to play with his mind. He didn't understand why he couldn't even type a single word, just one to begin the process and build from there. And yet, he already knew that the eight hours
he was prepared to sit in front of his computer today would end with the screen remaining bl</p>
</div>
</div>
</div>
<div >
<div ></div>
<div ></div>
<div ></div>
<div ></div>
</div>
<div >
<label for="radio1" ></label>
<label for="radio2" ></label>
<label for="radio3" ></label>
<label for="radio4" ></label>
</div>CodePudding user response：
When clicked, you need to give the clicked slide number to the "counter" variable. Then it continues where it left off. You will define a variable like "var si = setInterval". Each button you click will delete it by saying "clearInterval(si)" and you will need to define "si" again.
CodePudding user response：
You need to clear the interval on each button when it's clicked.
var counter = 1;
const interval = setInterval(function(){
document.getElementById('radio' counter).checked = true;
counter ;
if(counter > 4){
counter = 1;
}
}, 3000);
const buttons = document.querySelectorAll(".slide_bar");
for (let i = 0; i < buttons.length; i ) {
buttons[i].onclick = () => {
clearInterval(interval);
};
}