Reduce code length - javascript

I want to have multiple independent slideshows in the same webpage I have this script and is working well but I want to know is there a shorter way to make this because I need to add five more slideshows to the page I used this example from w3 slideshow
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
"use strict";
showSlides(slideIndex += n);
}
function currentSlide(n) {
"use strict";
showSlides(slideIndex = n);
}
function showSlides(n) {
"use strict";
var i;
var slides = document.getElementsByClassName("comment-box");
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";
slides[slideIndex - 1].style.margin = "0 auto";
dots[slideIndex - 1].className += " active";
}
var slideIndex1 = 1;
showSlides1(slideIndex1);
function plusSlides1(n) {
"use strict";
showSlides1(slideIndex1 += n);
}
function currentSlide1(n) {
"use strict";
showSlides1(slideIndex1 = n);
}
function showSlides1(n) {
"use strict";
var j;
var slides1 = document.getElementsByClassName("mini-box1");
var dots1 = document.getElementsByClassName("dot1");
if (n > slides1.length) {
slideIndex1 = 1;
}
if (n < 1) {
slideIndex1 = slides1.length;
}
for (j = 0; j < slides1.length; j++) {
slides1[j].style.display = "none";
}
for (j = 0; j < dots1.length; j++) {
dots1[j].className = dots1[j].className.replace(" active", "");
}
slides1[slideIndex1 - 1].style.display = "block";
slides1[slideIndex1 - 1].style.margin = "0 auto";
dots1[slideIndex1 - 1].className += " active";
}
var slideIndex2 = 1;
showSlides2(slideIndex2);
function plusSlides2(n) {
"use strict";
showSlides2(slideIndex2 += n);
}
function currentSlide2(n) {
"use strict";
showSlides2(slideIndex2 = n);
}
function showSlides2(n) {
"use strict";
var k;
var slides2 = document.getElementsByClassName("mini-box2");
var dots2 = document.getElementsByClassName("dot2");
if (n > slides2.length) {
slideIndex2 = 1;
}
if (n < 1) {
slideIndex2 = slides2.length;
}
for (k = 0; k < slides2.length; k++) {
slides2[k].style.display = "none";
}
for (k = 0; k < dots2.length; k++) {
dots2[k].className = dots2[k].className.replace(" active", "");
}
slides2[slideIndex2 - 1].style.display = "block";
slides2[slideIndex2 - 1].style.margin = "0 auto";
dots2[slideIndex2 - 1].className += " active";
}
var slideIndex3 = 1;
showSlides3(slideIndex3);
function plusSlides3(n) {
"use strict";
showSlides3(slideIndex3 += n);
}
function currentSlide3(n) {
"use strict";
showSlides3(slideIndex3 = n);
}
function showSlides3(n) {
"use strict";
var l;
var slides3 = document.getElementsByClassName("mini-box3");
var dots3 = document.getElementsByClassName("dot3");
if (n > slides3.length) {
slideIndex3 = 1;
}
if (n < 1) {
slideIndex3 = slides3.length;
}
for (l = 0; l < slides3.length; l++) {
slides3[l].style.display = "none";
}
for (l = 0; l < dots3.length; l++) {
dots3[l].className = dots3[l].className.replace(" active", "");
}
slides3[slideIndex3 - 1].style.display = "block";
slides3[slideIndex3 - 1].style.margin = "0 auto";
dots3[slideIndex3 - 1].className += " active";
}

Well, you could convert the first (dynamic block) into a JavaScript object/class structure.
Then you can create five or more instances of a Slideshow and each one will have its own index to keep track of the current slide. Each function will be a method on the object instead, so they should be independent of each other.
function Slideshow(options) {
this.slideIndex = 1;
this.slideClass = options.slideClass;
this.dotClass = options.dotClass;
}
Slideshow.prototype.plusSlides = function(n) {
this.showSlides(this.slideIndex += n);
}
Slideshow.prototype.currentSlide = function(n) {
this.showSlides(this.slideIndex = n);
}
Slideshow.prototype.showSlides = function(n) {
var i;
var slides = document.getElementsByClassName(this.slideClass);
var dots = document.getElementsByClassName(this.dotClass);
if (n > slides.length) {
this.slideIndex = 1;
}
if (n < 1) {
this.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[this.slideIndex - 1].style.display = "block";
slides[this.slideIndex - 1].style.margin = "0 auto";
dots[this.slideIndex - 1].className += " active";
}
Usage
var mySlideshow = new Slideshow({
slideClass : "comment-box",
dotClass : "dot"
});
mySlideshow.showSlides(mySlideshow.slideIndex);
Demo
Here is a demo showing two slideshows running concurrently.
function Slideshow(options) {
this.slideIndex = 1;
this.selector = options.selector;
this.el = document.getElementById(options.id);
this.createListeners();
this.showSlides(this.slideIndex);
}
Slideshow.prototype.createListeners = function(n) {
var self = this;
var dots = self.el.getElementsByClassName('slideshow-dot');
for (var i = 0; i < dots.length; i++) {
self.createDotListener(dots[i], i + 1);
}
self.el.getElementsByClassName('slideshow-prev')[0]
.addEventListener('click', function() {
self.plusSlides(-1);
});
self.el.getElementsByClassName('slideshow-next')[0]
.addEventListener('click', function() {
self.plusSlides(1);
});
};
Slideshow.prototype.createDotListener = function(dot, index) {
var self = this;
dot.addEventListener('click', function() {
return self.currentSlide(index);
});
};
Slideshow.prototype.plusSlides = function(n) {
this.showSlides(this.slideIndex += n);
};
Slideshow.prototype.currentSlide = function(n) {
this.showSlides(this.slideIndex = n);
};
Slideshow.prototype.showSlides = function(n) {
var i;
var slides = this.el.getElementsByClassName('slideshow-slide');
var dots = this.el.getElementsByClassName('slideshow-dot');
if (n > slides.length) {
this.slideIndex = 1;
}
if (n < 1) {
this.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[this.slideIndex - 1].style.display = 'block';
slides[this.slideIndex - 1].style.margin = '0 auto';
dots[this.slideIndex - 1].className += ' active';
};
var mySlideshow1 = new Slideshow({ id : 'my-slideshow-1' });
var mySlideshow2 = new Slideshow({ id : 'my-slideshow-2' });
* {box-sizing:border-box}
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
.slideshow-slide {
display: none;
}
/* Next & previous buttons */
.slideshow-prev, .slideshow-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;
}
/* Position the "next button" to the right */
.slideshow-next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.slideshow-prev:hover, .slideshow-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 */
.slideshow-dot {
cursor:pointer;
height: 13px;
width: 13px;
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 {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
#-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
#keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
<div id="my-slideshow-1">
<div class="slideshow-container">
<div class="slideshow-slide fade">
<div class="numbertext">1 / 3</div>
<img src="https://www.w3schools.com/howto/img_nature_wide.jpg" style="width:100%">
<div class="text">Caption Text</div>
</div>
<div class="slideshow-slide fade">
<div class="numbertext">2 / 3</div>
<img src="https://www.w3schools.com/howto/img_fjords_wide.jpg" style="width:100%">
<div class="text">Caption Two</div>
</div>
<div class="slideshow-slide fade">
<div class="numbertext">3 / 3</div>
<img src="https://www.w3schools.com/howto/img_lights_wide.jpg" style="width:100%">
<div class="text">Caption Three</div>
</div>
<a class="slideshow-prev">❮</a>
<a class="slideshow-next">❯</a>
</div>
<br>
<div style="text-align:center">
<span class="slideshow-dot"></span>
<span class="slideshow-dot"></span>
<span class="slideshow-dot"></span>
</div>
</div>
<div id="my-slideshow-2">
<div class="slideshow-container">
<div class="slideshow-slide fade">
<div class="numbertext">1 / 3</div>
<img src="https://www.w3schools.com/howto/img_nature_wide.jpg" style="width:100%">
<div class="text">Caption Text</div>
</div>
<div class="slideshow-slide fade">
<div class="numbertext">2 / 3</div>
<img src="https://www.w3schools.com/howto/img_fjords_wide.jpg" style="width:100%">
<div class="text">Caption Two</div>
</div>
<div class="slideshow-slide fade">
<div class="numbertext">3 / 3</div>
<img src="https://www.w3schools.com/howto/img_lights_wide.jpg" style="width:100%">
<div class="text">Caption Three</div>
</div>
<a class="slideshow-prev">❮</a>
<a class="slideshow-next">❯</a>
</div>
<br>
<div style="text-align:center">
<span class="slideshow-dot"></span>
<span class="slideshow-dot"></span>
<span class="slideshow-dot"></span>
</div>
</div>

Related

How to make the apple into green text?

I have got a snake game from Snake Code - Make the face of the snake an image, and I'm wondering how to make the apple into text with the same font as the Score in the upper right corner, and green using the JavaScript recognized color LimeGreen, or its Hex equivalent #32CD32.
Here's the continuous HTML code for your viewing:
<!DOCTYPE html>
<html style="background-color: #000000">
<head>
<title>Snake!</title>
</head>
<body>
<script>
(function() {
/////////////////////////////////////////////////////////////
// Canvas & Context
var canvas;
var ctx;
// Snake
var snake;
var snake_dir;
var snake_next_dir;
var snake_speed;
// Food
var food = {
x: 0,
y: 0
};
// Score
var score;
// Wall
var wall;
// HTML Elements
var screen_snake;
var screen_menu;
var screen_setting;
var screen_gameover;
var button_newgame_menu;
var button_newgame_setting;
var button_newgame_gameover;
var button_setting_menu;
var button_setting_gameover;
var ele_score;
var speed_setting;
var wall_setting;
/////////////////////////////////////////////////////////////
var activeDot = function(x, y) {
ctx.fillStyle = "LimeGreen";
ctx.fillRect(x * 10, y * 10, 10, 10);
}
/////////////////////////////////////////////////////////////
var changeDir = function(key) {
if (key == 38 && snake_dir != 2) {
snake_next_dir = 0;
} else {
if (key == 39 && snake_dir != 3) {
snake_next_dir = 1;
} else {
if (key == 40 && snake_dir != 0) {
snake_next_dir = 2;
} else {
if (key == 37 && snake_dir != 1) {
snake_next_dir = 3;
}
}
}
}
}
/////////////////////////////////////////////////////////////
var addFood = function() {
food.x = Math.floor(Math.random() * ((canvas.width / 10) - 1));
food.y = Math.floor(Math.random() * ((canvas.height / 10) - 1));
for (var i = 0; i < snake.length; i++) {
if (checkBlock(food.x, food.y, snake[i].x, snake[i].y)) {
addFood();
}
}
}
/////////////////////////////////////////////////////////////
var checkBlock = function(x, y, _x, _y) {
return (x == _x && y == _y) ? true : false;
}
/////////////////////////////////////////////////////////////
var altScore = function(score_val) {
ele_score.innerHTML = String(score_val);
}
/////////////////////////////////////////////////////////////
var mainLoop = function() {
var _x = snake[0].x;
var _y = snake[0].y;
snake_dir = snake_next_dir;
// 0 - Up, 1 - Right, 2 - Down, 3 - Left
switch (snake_dir) {
case 0:
_y--;
break;
case 1:
_x++;
break;
case 2:
_y++;
break;
case 3:
_x--;
break;
}
snake.pop();
snake.unshift({
x: _x,
y: _y
});
// --------------------
// Wall
if (wall == 1) {
// On
if (snake[0].x < 0 || snake[0].x == canvas.width / 10 || snake[0].y < 0 || snake[0].y == canvas.height / 10) {
showScreen(3);
return;
}
} else {
// Off
for (var j = 0, x = snake.length; j < x; j++) {
if (snake[j].x < 0) {
snake[j].x = snake[j].x + (canvas.width / 10);
}
if (snake[j].x == canvas.width / 10) {
snake[j].x = snake[j].x - (canvas.width / 10);
}
if (snake[j].y < 0) {
snake[j].y = snake[j].y + (canvas.height / 10);
}
if (snake[j].y == canvas.height / 10) {
snake[j].y = snake[j].y - (canvas.height / 10);
}
}
}
// --------------------
// Autophagy death
for (var i = 1; i < snake.length; i++) {
if (snake[0].x == snake[i].x && snake[0].y == snake[i].y) {
showScreen(3);
return;
}
}
// --------------------
// Eat Food
if (checkBlock(snake[0].x, snake[0].y, food.x, food.y)) {
snake[snake.length] = {
x: snake[0].x,
y: snake[0].y
};
score += 1;
altScore(score);
addFood();
activeDot(food.x, food.y);
}
// --------------------
ctx.beginPath();
ctx.fillStyle = "#000000";
ctx.fillRect(0, 0, canvas.width, canvas.height);
// --------------------
for (var i = 0; i < snake.length; i++) {
activeDot(snake[i].x, snake[i].y);
}
// --------------------
activeDot(food.x, food.y);
// Debug
//document.getElementById("debug").innerHTML = snake_dir + " " + snake_next_dir + " " + snake[0].x + " " + snake[0].y;
setTimeout(mainLoop, snake_speed);
}
/////////////////////////////////////////////////////////////
var newGame = function() {
showScreen(0);
screen_snake.focus();
snake = [];
for (var i = 4; i >= 0; i--) {
snake.push({
x: i,
y: 15
});
}
snake_next_dir = 1;
score = 0;
altScore(score);
addFood();
canvas.onkeydown = function(evt) {
evt = evt || window.event;
changeDir(evt.keyCode);
}
mainLoop();
}
/////////////////////////////////////////////////////////////
// Change the snake speed...
// 150 = slow
// 100 = normal
// 50 = fast
var setSnakeSpeed = function(speed_value) {
snake_speed = speed_value;
}
/////////////////////////////////////////////////////////////
var setWall = function(wall_value) {
wall = wall_value;
if (wall == 0) {
screen_snake.style.borderColor = "#606060";
}
if (wall == 1) {
screen_snake.style.borderColor = "#FFFFFF";
}
}
/////////////////////////////////////////////////////////////
// 0 for the game
// 1 for the main menu
// 2 for the settings screen
// 3 for the game over screen
var showScreen = function(screen_opt) {
switch (screen_opt) {
case 0:
screen_snake.style.display = "block";
screen_menu.style.display = "none";
screen_setting.style.display = "none";
screen_gameover.style.display = "none";
break;
case 1:
screen_snake.style.display = "none";
screen_menu.style.display = "block";
screen_setting.style.display = "none";
screen_gameover.style.display = "none";
break;
case 2:
screen_snake.style.display = "none";
screen_menu.style.display = "none";
screen_setting.style.display = "block";
screen_gameover.style.display = "none";
break;
case 3:
screen_snake.style.display = "none";
screen_menu.style.display = "none";
screen_setting.style.display = "none";
screen_gameover.style.display = "block";
break;
}
}
/////////////////////////////////////////////////////////////
window.onload = function() {
canvas = document.getElementById("snake");
ctx = canvas.getContext("2d");
// Screens
screen_snake = document.getElementById("snake");
screen_menu = document.getElementById("menu");
screen_gameover = document.getElementById("gameover");
screen_setting = document.getElementById("setting");
// Buttons
button_newgame_menu = document.getElementById("newgame_menu");
button_newgame_setting = document.getElementById("newgame_setting");
button_newgame_gameover = document.getElementById("newgame_gameover");
button_setting_menu = document.getElementById("setting_menu");
button_setting_gameover = document.getElementById("setting_gameover");
// etc
ele_score = document.getElementById("score_value");
speed_setting = document.getElementsByName("speed");
wall_setting = document.getElementsByName("wall");
// --------------------
button_newgame_menu.onclick = function() {
newGame();
};
button_newgame_gameover.onclick = function() {
newGame();
};
button_newgame_setting.onclick = function() {
newGame();
};
button_setting_menu.onclick = function() {
showScreen(2);
};
button_setting_gameover.onclick = function() {
showScreen(2)
};
setSnakeSpeed(150);
setWall(1);
showScreen("menu");
// --------------------
// Settings
// speed
for (var i = 0; i < speed_setting.length; i++) {
speed_setting[i].addEventListener("click", function() {
for (var i = 0; i < speed_setting.length; i++) {
if (speed_setting[i].checked) {
setSnakeSpeed(speed_setting[i].value);
}
}
});
}
// wall
for (var i = 0; i < wall_setting.length; i++) {
wall_setting[i].addEventListener("click", function() {
for (var i = 0; i < wall_setting.length; i++) {
if (wall_setting[i].checked) {
setWall(wall_setting[i].value);
}
}
});
}
document.onkeydown = function(evt) {
if (screen_gameover.style.display == "block") {
evt = evt || window.event;
if (evt.keyCode == 32) {
newGame();
}
}
}
}
})();
</script>
<style>
::selection {
color: #FFFFFF;
background: transparent;
}
::-moz-selection {
color: #FFFFFF;
background: transparent;
}
* {
margin: 0;
padding: 0;
font-family: "VT323";
}
body {
background-color: #000000;
}
.wrap {
margin-left: auto;
margin-right: auto;
}
header {
width: 340px;
font-size: 0;
}
canvas {
display: none;
border-style: solid;
border-width: 10px;
border-color: #FFFFFF;
}
canvas:focus {
outline: none;
}
/* Top Styles */
h1 {
display: inline-block;
width: 100px;
font-size: 32px;
color: #FFFFFF;
}
.score {
display: inline-block;
width: 240px;
font-size: 20px;
color: #FFFFFF;
text-align: right;
}
.score_value {
font-size: inherit;
}
/* All screens style */
#gameover a,
#setting a,
#menu a {
display: block;
}
#gameover a,
#setting a:hover,
#menu a:hover {
cursor: pointer;
}
#gameover a:hover::before,
#setting a:hover::before,
#menu a:hover::before {
content: ">";
margin-right: 10px;
}
/* Menu Screen Style */
#menu {
display: block;
width: 340px;
padding-top: 95px;
padding-bottom: 95px;
font-size: 40px;
margin-left: auto;
margin-right: auto;
text-align: center;
color: #FFF;
}
#menu h2 {
-webkit-animation: logo-ani 1000ms linear infinite;
animation: logo-ani 1000ms linear infinite;
margin-bottom: 30px;
}
#menu a {
font-size: 30px;
}
#-webkit-keyframes logo-ani {
50% {
-webkit-transform: scale(1.3, 1.3);
}
100% {
-webkit-transform: scale(1.0, 1.0);
}
}
#keyframes logo-ani {
50% {
transform: scale(1.3, 1.3);
}
100% {
transform: scale(1.0, 1.0);
}
}
/* Game Over Screen Style */
#gameover {
display: none;
width: 340px;
padding-top: 95px;
padding-bottom: 95px;
margin-left: auto;
margin-right: auto;
text-align: center;
font-size: 30px;
color: #FFF;
}
#gameover p {
margin-top: 25px;
font-size: 20px;
}
/* Settings Screen Style */
#setting {
display: none;
width: 340px;
margin-left: auto;
margin-right: auto;
padding-top: 85px;
padding-bottom: 85px;
font-size: 30px;
color: #FFF;
text-align: center;
}
#setting h2 {
margin-bottom: 15px;
}
#setting p {
margin-top: 10px;
}
#setting input {
display: none;
}
#setting label {
cursor: pointer;
}
#setting input:checked+label {
background-color: #FFF;
color: #000;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css2?family=VT323&display=swap" rel="stylesheet">
<header class="wrap">
<h1>Snake</h1>
<p class="score">Score: <span id="score_value">0</span></p>
</header>
<canvas class="wrap" id="snake" width="600" height="600" tabindex="1"></canvas>
<!-- Game Over Screen -->
<div id="gameover">
<h2>Game Over</h2>
<p>press <span style="background-color: #FFFFFF; color: #000000">space</span> to begin a</p>
<a id="newgame_gameover">new game</a>
<a id="setting_gameover">settings</a>
</div>
<!-- Setting screen -->
<div id="setting">
<h2>Settings</h2>
<a id="newgame_setting">new game</a>
<p>Speed:
<input id="speed1" type="radio" name="speed" value="120" checked/>
<label for="speed1">Slow</label>
<input id="speed2" type="radio" name="speed" value="75" />
<label for="speed2">Normal</label>
<input id="speed3" type="radio" name="speed" value="35" />
<label for="speed3">Fast</label>
</p>
<p>Wall:
<input id="wallon" type="radio" name="wall" value="1" checked/>
<label for="wallon">On</label>
<input id="walloff" type="radio" name="wall" value="0" />
<label for="walloff">Off</label>
</p>
</div>
<!-- Main Menu Screen -->
<div id="menu">
<h2>Snake</h2>
<a id="newgame_menu">new game</a>
<a id="setting_menu">settings</a>
</div>
</body>
</html>
Thanks in advance!
Add a 3rd param to activeDot, pass the colour.
var activeDot = function(x, y, color) {
ctx.fillStyle = color;
ctx.fillRect(x * 10, y * 10, 10, 10);
}
It's used in 3 places, activeDot(food.x, food.y, 'LimeGreen');

Why does my code change ALL the p tags in my page?

This code
var current = 0,
slides = document.getElementsByTagName("p");
setInterval(function() {
for (var i = 0; i < slides.length; i++) {
slides[i].style.opacity = 0;
}
current = (current != slides.length - 1) ? current + 1 : 0;
slides[current].style.opacity = 1;
}, 1000);
p {
position: absolute;
transition: opacity .5s ease-in;
}
p + p { opacity: 0; }
<p>1</p>
<p>2</p>
<p>3</p>
is what I'm looking for to change the text on my page. However, when I add the p tags
<p>1</p>
<p>2</p>
<p>3</p>
all the paragraphs on the page will start to change. How can I specifically target just these three paragraphs tags?
Wrap the Ps in a container or give them a class and use querySelectorAll
https://jsfiddle.net/mplungjan/nb7pkqy5/
slides = document.querySelectorAll("#container p");
var current = 0,
slides = document.querySelectorAll("#container p");
setInterval(function() {
for (var i = 0; i < slides.length; i++) {
slides[i].style.opacity = 0;
}
current = (current != slides.length - 1) ? current + 1 : 0;
slides[current].style.opacity = 1;
}, 1000);
#container p {
position: absolute;
transition: opacity .5s ease-in;
}
#container p+p {
opacity: 0;
}
<p>Other paragraph</p>
<div id="container">
<p>1</p>
<p>2</p>
<p>3</p>
</div>

setTimeout In HTML/CSS/JavaScript slideshow

I have a simple slider made with HTML/CSS/Javascript
My problem is that I don't know how to make a simple setTimeout. My idea is that the slides
must change when you click on any of the control dots ( that is already done by me and it works as expected). But a timer needs to work there too, so every 4 seconds this timer must change the active slide and if a control dot is clicked, the timer must resets and counts for another 4 seconds.
Here is my code
HTML
<div class="slideshow-container">
<div class="slides">
<div class="intro-slide fade">
<h2>title</h2>
<p>
text
</p>
</div>
<!--slide-->
<div class="intro-slide fade">
<h2>title</h2>
<p>
text
</p>
</div>
<!--slide-->
<div class="intro-slide fade">
<h2>title</h2>
<p>
text
</p>
</div>
<!--slide-->
</div>
<!--slides-->
<div class="control-dots">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
</div>
<!--control-dots
</div>
<!--slideshow-container -->
SCSS
.slideshow-container {
width: 570px;
h2 {
font-weight: 800;
font-size: 34px;
line-height: 1.27;
margin-bottom: 20px;
font-family: 'Raleway';
}
.control-dots {
width: 100%;
text-align: center;
margin-bottom: 40px;
}
.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;
&:hover,
&.active {
background-color: #fff;
}
}
}
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("intro-slide");
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";
setTimeout(showSlides, 4000); // Change image every 4 seconds
}
Thanks in advance
So cancel the timeout if it is running. The timeout returns the id of the timer. So you store that into a variable and cancel it.
function plusSlides(n) {
n = n || 1
showSlides(slideIndex += n);
}
var activeTimer
function showSlides(n) {
if (activeTimer) window.clearTimeout(activeTimer)
// ...
activeTimer = window.setTimeout(plusSlides, 4000);
}

How to create divs for slideshow image change left/ right on click?

I am trying to create a div that is 50% width left and another 50% width right of the viewport. I want each div to change the slideshow image previous / next on click
Example: https://jonoverrall.com/colin/owzib05x14nq1xd08etgqoe7nmmvum
Does anyone have any suggestions on how to achieve this?
<div class="slideshow-container">
<div class="mySlides fade">
<img src="001%20(1).jpg" onclick="plusSlides(1)">
<div class="text">As a Fountain 2017</div>
<div class="opacity">001 </div>
</div>
<div class="mySlides fade">
<img src="001%20(2).jpg" onclick="plusSlides(1)">
<div class="text">Deliverance 2017</div>
<div class="opacity">002 </div>
</div>
CSS
img {
height: 100%;
width: 100%;
max-height: 100vh;
max-width: 100vh;
object-fit: contain;
}
.mySlides img {
display: inline-block;
vertical-align: middle;
}
.slideshow-container img {
display: block;
margin: 0px auto;
}
JS
var slideIndex = 1;
var indexes = document.querySelectorAll(".numbertext span");
var slides = document.getElementsByClassName("mySlides");
indexes[1].innerHTML = slides.length;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
if (n > slides.length) {
slideIndex = 1
}
if (n < 1) {
slideIndex = slides.length
}
indexes[0].innerHTML = slideIndex;
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slides[slideIndex - 1].style.display = "block";
}
https://codepen.io/anon/pen/xobQRM

How do I get the buttons to stop at first and last image

Hope I am not breaking Stack Overflow protocol or etiquette here.
I am reposting this solution from another question that was posted.
Original Question: show-and-hide-images-with-next-previous-button-using-javascript
Asked by: user1199537
Prefered solution given by: bunjerd-sparrow
This code works great, but I need it to stop at image 1 (using previous button) and stop at image 11 (using next button), not continuously roll through the images.
I am sure this is light work for you guys.
I just can't figure it out to save my life.
Any and all help is greatly appreciated.
var $c = 0;
function next() {
var boxes = document.getElementsByClassName("box");
$c += 1;
if ($c >= boxes.length) $c = 0;
for (var $i = 0; $i < boxes.length; $i++) {
boxes[$i].style.display = "none";
}
boxes[$c].style.display = "block";
return false;
}
function prev() {
var boxes = document.getElementsByClassName("box");
$c -= 1;
if ($c < 0) $c = (boxes.length - 1);
for (var $i = 0; $i < boxes.length; $i++) {
boxes[$i].style.display = "none";
}
boxes[$c].style.display = "block";
return false;
}
#container {
position: relative;
width: 120px;
height: 120px;
}
#container div {
position: absolute;
width: 120px;
height: 120px;
}
#box-red {
background: red;
}
#box-yellow {
background: yellow;
display: none;
}
#box-green {
background: green;
display: none;
}
#box-maroon {
background: maroon;
display: none;
}
<div id="container">
<div id="box-red" class="box">DIV1</div>
<div id="box-yellow" class="box">DIV2</div>
<div id="box-green" class="box">DIV3</div>
<div id="box-maroon" class="box">DIV4</div>
</div>
<button onClick="return prev();">previous</button>
<button onClick="return next();">next</button>
Change
if ($c < 0) $c = (boxes.length - 1);
to not wrap:
if ($c < 0) $c=0;
and
if ($c >= boxes.length) $c = 0;
to not wrap
if ($c >= boxes.length) $c = boxes.length-1;
var $c = 0;
function next() {
var boxes = document.getElementsByClassName("box");
$c += 1;
if ($c >= boxes.length) $c = boxes.length - 1;
for (var $i = 0; $i < boxes.length; $i++) {
boxes[$i].style.display = "none";
}
boxes[$c].style.display = "block";
return false;
}
function prev() {
var boxes = document.getElementsByClassName("box");
$c -= 1;
if ($c < 0) $c = 0;
for (var $i = 0; $i < boxes.length; $i++) {
boxes[$i].style.display = "none";
}
boxes[$c].style.display = "block";
return false;
}
#container {
position: relative;
width: 120px;
height: 120px;
}
#container div {
position: absolute;
width: 120px;
height: 120px;
}
#box-red {
background: red;
}
#box-yellow {
background: yellow;
display: none;
}
#box-green {
background: green;
display: none;
}
#box-maroon {
background: maroon;
display: none;
}
<div id="container">
<div id="box-one" class="box">10</div>
<div id="box-two" class="box">9</div>
<div id="box-three" class="box">8</div>
<div id="box-four" class="box">7</div>
<div id="box-five" class="box">6</div>
<div id="box-six" class="box">5</div>
<div id="box-seven" class="box">4</div>
<div id="box-eight" class="box">3</div>
<div id="box-nine" class="box">2</div>
<div id="box-ten" class="box">1</div>
<div id="box-nothing" class="box">0</div>
</div>
<button onClick="return prev();">previous</button>
<button onClick="return next();">next</button>
Just don't run the code to show a new box and increase/decrease the counter when hitting the first or last image.
if ($c < boxes.length - 1) {
// Do logic
}
and
if ($c > 0) {
// Do logic
}
Example
var $c = 0;
function next() {
var boxes = document.getElementsByClassName("box");
if ($c < boxes.length - 1) {
$c += 1;
for (var $i = 0; $i < boxes.length; $i++) {
boxes[$i].style.display = "none";
}
boxes[$c].style.display = "block";
}
return false;
}
function prev() {
var boxes = document.getElementsByClassName("box");
if ($c > 0) {
$c -= 1;
for (var $i = 0; $i < boxes.length; $i++) {
boxes[$i].style.display = "none";
}
boxes[$c].style.display = "block";
}
return false;
}
#container {
position: relative;
width: 120px;
height: 120px;
}
#container div {
position: absolute;
width: 120px;
height: 120px;
}
#box-red {
background: red;
}
#box-yellow {
background: yellow;
display: none;
}
#box-green {
background: green;
display: none;
}
#box-maroon {
background: maroon;
display: none;
}
<div id="container">
<div id="box-red" class="box">DIV1</div>
<div id="box-yellow" class="box">DIV2</div>
<div id="box-green" class="box">DIV3</div>
<div id="box-maroon" class="box">DIV4</div>
</div>
<button onClick="return prev();">previous</button>
<button onClick="return next();">next</button>

Categories

Resources