Having issues on my image slider, and really not sure why - javascript

Trying to do an image slider but nothing works. I am having so much difficulty with something that everyone keeps saying pretty easy to do. I been going along with this tutorial.
https://www.youtube.com/watch?v=KcdBOoK3Pfw&list=WL&index=19&t=601s
Yet the button doesn't seem to work. The Images wont fit inside. I don't care if three of them show up at this point I just want it to work.
The images won't just go into the container. They all go in. The 2 in one wasn't my intention. I wanted one pic than the next pic shows.
I'm still pretty new to this. So probably will keep on trying and trying and understanding but trying to finish this for a personal project. Can anyone help out and explain to me what I am doing wrong.
HERE IS MY CODE:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="gallery.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="container">
<div class="slide">
<img src="./image/pic7.jpg" id="lastClone">
<img src="image/pic1.jpg">
<img src="image/pic2.jpg">
<img src="image/pic3.jpg">
<img src="image/pic4.jpg">
<img src="image/pic6.jpg">
<img src="image/pic7.jpg">
<img src="./image/pic1.jpg" id="firstclone">
</div>
</div>
<button id="prevbtn">Prev</button>
<button id="nextbtn">Next</button>
<script src="app.js"></script>
</body>
</html>
CSS:
*{
padding:0px;
margin:0px;
box-sizing: border-box;
}
.container {
width: 40%;
margin:auto;
border: 5px solid black;
overflow:hidden;
}
.slide {
display:flex;
width:100%;
height:500px;
}
button{
padding:20px;
border:none;
background:#37f;
font-size: 30px;
color:white;
position:absolute;
top:45%;
}
#nextbtn{
border-radius: 10px 0px 0px 10px;
margin-left:950px;
}
#prevbtn{
border-radius: 0px 10px 10px 0px;
}
JAVASCRIPT:
const carouselSlide =docuement.querySelector('.slide');
const carouselImages=document.querySelectorAll('.slide img');
const prevbtn = document.querySelector('#prevbtn');
const nextbtn = document.querySelector('#nextbtn');
let counter=1;
const size=carouselImages[0].clientWidth;
carouselSlide.style.transform='translateX(' + (-size *counter) + 'px)';
nextbtn.addEventListener('click',()=>{
if (counter >= carouselImages.length-1) return;
carouselSlide.style.transition = "transform 0.4s ease-in-out";
counter ++;
carouselSlide.style.transform = 'translateX(' + (-size * counter) + 'px)';
});
prevbtn.addEventListener('click',()=>{
if (counter <= 0) return;
carouselSlide.style.transition = "transform 0.4s ease-in-out";
counter ++;
carouselSlide.style.transform = 'translateX(' + (-size * counter) + 'px)';
});
carouselSlide.addEventListener('transitionend', () => {
if (carouselImages[counter].id=='lastClone') {
carouselSlide.style.transition = "none";
counter=carouselImages.length -2;
carouselSlide.style.transform= 'translateX(' +(-size * counter) + 'px)';
}
if (carouselImaages[counter].id=='firstClone') {
carouselSlide.style.transition = "none";
counter=carouselImaages.length -counter;
carouselSlide.style.transform= 'translateX(' +(-size * counter) + 'px)';
}
});

Well right off the bat you have spaces between the counters and '++' on the event listeners, so that's not gonna work.
Some unsolicited advice: 9/10 when I was a beginner programmer it was a typo that was causing my frustrations or something missing. Before getting frustrated take a step back and look for such things.

Related

how do i apply magentic effect to all sides (left , right , bottom) it only applies it to the top currently

guys how do i apply the magnetic effect to all sides left,bottom,right. right now it only applies it top part
her the vid of it https://youtu.be/M1F6CR2cs44
i want it to be like this without the color change and also i didnt use the code of this video as its not fitting into my code i used the magentic effect code from another website.
https://www.youtube.com/watch?v=8befSxPPKpY
const btns = document.querySelectorAll(".navv");
btns.forEach((btn) => {
btn.addEventListener("mousemove", function(e){
const position = btn.getBoundingClientRect();
const x = e.pageX - position.left - position.width / 2;
const y = e.pageY - position.top - position.height / 2;
btn.children[0].style.transform = "translate(" + x * 0.3 + "px, " + y * 0.5 + "px)";
});
});
btns.forEach((btn) => {
btn.addEventListener("mouseout", function(e){
btn.children[0].style.transform = "translate(0px, 0px)";
});
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>store</title>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.cdnfonts.com/css/metropolis" rel="stylesheet">
</head>
<body>
<nav class="firstnav">
<img src="imgs/logo.png" alt="" class="logo">
<ul>
<li>Shop</li>—
<li>Community</li>—
<li>Catalogue</li>
</ul>
<div class="navv">
<div class="navm" g-component="SampleComponent">
<img src="imgs/menu.png" alt="" id="fanav" onclick="nav()">
</div>
</div>
Cart 0
<script src="script.js"></script>
</nav>
</body>
</html>
The crucial part is that you didn't include your css. The properties of the element (the size of each navv in your example) will determine at which point the mouseover event will be triggered.
To simplify the issue I've added a more minimal example. I have an anchor which contains a span. as you can see as soon as you enter the blue area, the event will be triggered (since you put the event listener on the anchor) and the span will move. If you can't make it work with this example, please include your css.
const btns = document.querySelectorAll(".btn");
btns.forEach((btn) => {
btn.addEventListener("mousemove", function(e){
const position = btn.getBoundingClientRect();
const x = e.pageX - position.left - position.width / 2;
const y = e.pageY - position.top - position.height / 2;
btn.children[0].style.transform = "translate(" + x * 0.3 + "px, " + y * 0.5 + "px)";
});
});
btns.forEach((btn) => {
btn.addEventListener("mouseout", function(e){
btn.children[0].style.transform = "translate(0px, 0px)";
});
});
.btn{
position: relative;
text-align: center;
cursor: pointer;
}
.btn span{
position: relative;
display: inline-block;
color: #000000;
font-size: 1.2em;
font-weight: 500;
text-decoration: none;
width: 120px;
margin: 150px;
border-radius: 8px;
background-color: grey;
transition: transform 0.15s linear;
}
a {
background-color: blue;
}
<a href="#" class="btn">
<span>Hover Me</span>
</a>

Unable to add automatic "next slide" to my image slideshow

I am unable to add a automatic function that shows the next image in my slideshow. I have tried different approaches i found on this forum using setinterval() alas to no success.
Here is a snippet of the JS code.
const pizzaSlide = document.querySelector(".pizza-slide");
const pizzaImages = document.querySelectorAll(".pizza-slide img"); //Selector for all images
//Buttons
const prevBtn = document.querySelector("#prevBtn");
const nextBtn = document.querySelector("#nextBtn");
//Counter - To figure out what image we are on we need a counter.
let counter = 1; //Starting from the first image
const size = pizzaImages[0].clientWidth; //Width of the image, so we know how much we need to slide.
pizzaSlide.style.transform = "translateX(" + (-size * counter ) + "px)"; //Moves one picture forward
//Timer
let timer = setInterval(() => pluscounter(1), 1000); - does not work.
//Button Listeners
nextBtn.addEventListener("click",()=>{ //Listens on click - adds transition
if(counter >= pizzaImages.length -1) return; //This is to prevent slideshow bugging out if nextBtn is clicked too fast.
pizzaSlide.style.transition = "transform 0.4s ease-in-out"; // The speed of the transitions.
counter++; //Adds one to counter
pizzaSlide.style.transform = "translateX(" + (-size * counter ) + "px)";
setInterval(nextBtn, 500);
});
prevBtn.addEventListener("click",()=>{ //Listens on click - adds transition
if (counter <= 0) return; //This is to prevent slideshow bugging out if prevBtn is clicked too fast.
pizzaSlide.style.transition = "transform 0.4s ease-in-out"; // The speed of the transitions.
counter--; //Retracts one from counter
pizzaSlide.style.transform = "translateX(" + (-size * counter ) + "px)";
});
pizzaSlide.addEventListener("transitionend", ()=>{ //Returns back to original image after the transform finishes - resets the transition if the picture is a "clone".
if(pizzaImages[counter].id === "lastClone"){
pizzaSlide.style.transition = "none"; //Translates it back to original picture
counter = pizzaImages.length -2;
pizzaSlide.style.transform = "translateX(" + (-size * counter ) + "px)";
}
if(pizzaImages[counter].id === "firstClone"){
pizzaSlide.style.transition = "none";
counter = pizzaImages.length - counter; //Translates it back to original picture
pizzaSlide.style.transform = "translateX(" + (-size * counter ) + "px)";
}
});
Update1
CSS
*{
padding: 0px;
margin: 0px;
box-sizing: border-box;
}
.pizza-container{
width: 60%;
margin: auto;
border: 5px solid black;
overflow: hidden;
position: relative;
}
.pizza-slide {
display: flex;
width: 100%;
height: 500px;
}
#prevBtn, #nextBtn {
position: absolute;
height: 40px;
width: 40px;
top: 50%;
z-index: 10;
font-size: 20px;
color: #ffffff;
opacity: 0.8;
cursor: pointer;
background-color: #444444;
border-radius: 50%;
margin-top: -20px;
text-align: center;
line-height: 40px;
}
#prevBtn{
left: 5%;
}
#nextBtn{
right: 5%;
}
#prevBtn:hover, #nextBtn:hover{
box-shadow: 0px 0px 10px black;
background-color: #29a8e2;
}
HTML
<!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>slideshow</title>
</head>
<body>
<div class="pizza-container">
<!-- slider controls -->
<div id="prevBtn"><</div>
<div id="nextBtn">></div>
<!-- slider controls -->
<div class="pizza-slide">
<img src="./img/bilde3.jpg" id="lastClone" alt="">
<img src="./img/bilde4.jpg" alt="">
<img src="./img/bilde2.jpg" alt="">
<img src="./img/bilde3.jpg" alt="">
<img src="./img/bilde4.jpg" id="firstClone" alt="">
<!-- to get a smooth infinite loop we need to clone the last and first image-->
</div>
</div>
<script src="slideshow.js"></script>
</body>
</html>
IGNORE THIS
It looks like your post is mostly code; please add some more details.It looks like your post is mostly code; please add some more details.It looks like your post is mostly code; please add some more details.It looks like your post is mostly code; please add some more details.
The manual and your desired automatic control of the slideshow have one thing in common: both do the same thing! So instead of adding anonymous functions to the click event listeners of your buttons, let's make a function that can be called manually and automatically. In 'automatic mode' I'd rather use setTimeout instead of setInterval though. This way the function calls itself again periodically and resets the timer to the desired interval if the user pressed on one of the navigation buttons.
There's just one more problem with your code:
const size = pizzaImages[0].clientWidth;
this line gives size the value of whatever the first <img> element's width in your <div> is - which can also mean it might be 0 as the image might not be loaded yet. So let's make sure it finished loading and afterwards populate size with the correct size. Additionally this would be the perfect time to start automatic playback of your slideshow.
pizzaImages[0].addEventListener("load", function(e) {
size = e.target.clientWidth;
timer = setTimeout(nextPressed, 1500);
});
Here's the complete working example (just click on 'Run code snippet'):
const pizzaSlide = document.querySelector(".pizza-slide");
const pizzaImages = document.querySelectorAll(".pizza-slide img");
const prevBtn = document.querySelector("#prevBtn");
const nextBtn = document.querySelector("#nextBtn");
let counter = 0;
let size;
let timer;
pizzaSlide.style.transform = "translateX(" + (-size * counter) + "px)";
function nextPressed() {
if (counter >= pizzaImages.length - 1) return;
clearTimeout(timer);
timer = setTimeout(nextPressed, 1500);
pizzaSlide.style.transition = "transform 0.4s ease-in-out";
counter++;
pizzaSlide.style.transform = "translateX(" + (-size * counter) + "px)";
}
function prevPressed() {
if (counter <= 0) return;
clearTimeout(timer);
timer = setTimeout(prevPressed, 1500);
pizzaSlide.style.transition = "transform 0.4s ease-in-out";
counter--;
pizzaSlide.style.transform = "translateX(" + (-size * counter) + "px)";
}
nextBtn.addEventListener("click", nextPressed);
prevBtn.addEventListener("click", prevPressed);
pizzaSlide.addEventListener("transitionend", () => {
if (pizzaImages[counter].id === "lastClone") {
pizzaSlide.style.transition = "none";
counter = pizzaImages.length - 2;
pizzaSlide.style.transform = "translateX(" + (-size * counter) + "px)";
}
if (pizzaImages[counter].id === "firstClone") {
pizzaSlide.style.transition = "none";
counter = 1;
pizzaSlide.style.transform = "translateX(" + (-size * counter) + "px)";
}
});
pizzaImages[0].addEventListener("load", function(e) {
size = e.target.clientWidth;
timer = setTimeout(nextPressed, 1500);
});
* {
padding: 0px;
margin: 0px;
box-sizing: border-box;
}
.pizza-container {
width: 60%;
margin: auto;
border: 5px solid black;
overflow: hidden;
position: relative;
}
.pizza-slide {
display: flex;
width: 100%;
height: 500px;
}
#prevBtn,
#nextBtn {
position: absolute;
height: 40px;
width: 40px;
top: 50%;
z-index: 10;
font-size: 20px;
color: #ffffff;
opacity: 0.8;
cursor: pointer;
background-color: #444444;
border-radius: 50%;
margin-top: -20px;
text-align: center;
line-height: 40px;
}
#prevBtn {
left: 5%;
}
#nextBtn {
right: 5%;
}
#prevBtn:hover,
#nextBtn:hover {
box-shadow: 0px 0px 10px black;
background-color: #29a8e2;
}
<div class="pizza-container">
<!-- slider controls -->
<div id="prevBtn">
<</div>
<div id="nextBtn">></div>
<!-- slider controls -->
<div class="pizza-slide">
<img src="https://picsum.photos/id/1/200/300" id="lastClone" alt="">
<img src="https://picsum.photos/id/2/200/300" alt="">
<img src="https://picsum.photos/id/3/200/300" alt="">
<img src="https://picsum.photos/id/1/200/300" alt="">
<img src="https://picsum.photos/id/2/200/300" id="firstClone" alt="">
<!-- to get a smooth infinite loop we need to clone the last and first image-->
</div>
</div>

CSS animation. transition applies to all the other times, but not the first time

I'm trying to make a sample where when the user click on the window, the circle (div) will move to that place with a transition. However, it does not work on the first click, but all the others. So I wonder what's making it do that.
<!doctype html>
<html>
<head>
<title>Hover</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="CSS/mystyles.css" >
</head>
<body>
<div id = "divGroup" class = 'group'>
</div>
<script src="JS/code.js"></script>
</body>
</html>
the javascript (i'm using javascript to receive the values and define new values:
var divGroup = document.getElementById("divGroup");
window.onclick = function(evt) {
divGroup.style.left = (evt.clientX - 25) + "px";
divGroup.style.top = (evt.clientY - 25) + "px";
}
the css:
#divGroup {
width: 50px;
height:50px;
background-color:lightblue;
border-radius:50%;
position: absolute;
transition: all 0.5s;
}
You should add initial left and top values in css for #divGroup
var divGroup = document.getElementById("divGroup");
window.onclick = function(evt) {
divGroup.style.left = (evt.clientX - 25) + "px";
divGroup.style.top = (evt.clientY - 25) + "px";
}
#divGroup {
width: 50px;
height: 50px;
background-color: lightblue;
border-radius: 50%;
position: absolute;
transition: all 0.5s;
left: 0;
top: 0;
}
<div id="divGroup" class='group'>

How can I stop a slideshow? [duplicate]

This question already has answers here:
Pause button for Javascript slideshow
(3 answers)
Closed 4 years ago.
When I click on some of the buttons I want the slideshow to stop working and let me see the img for 10s or 15s and then it goes back to work. I tried the setTimeout function but I think I didn't use it right. I checked some solutions here on stackoverflow for some problems that seemed like mine but nothing helped me.
Here is an executable version of my code:
https://codepen.io/Amoocris/pen/MZXQYb?send-to-phone=5555555#0
Here is my code:
var slideIndex = 0;
showSlide();
function currentSlide(n) {
showSlide(slideIndex = n);
}
function showSlide(n) {
var i;
slide = document.getElementsByClassName("mySlide");
dotz = document.getElementsByClassName("btn");
for (i = 0; i < slide.length; i++) {
slide[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slide.length) {
slideIndex = 1
}
for (i = 0; i < dotz.length; i++) {
dotz[i].className = dotz[i].className.replace("active", "");
}
slide[slideIndex - 1].style.display = "block";
slide[slideIndex - 1].className += "active";
setTimeout(showSlide, 3000);
}
* {
box-sizing: border-box;
}
.img {
width: 100%;
height: 666.656px;
}
.mySlide {
max-width: 1000px;
position: relative;
margin: auto;
}
.btns {
text-align: center;
}
.btn {
cursor: pointer;
display: inline-block;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: #bbb;
margin: 0 2px;
}
.active,
.btn:hover {
background-color: pink;
}
.fade {
animation-name: fade;
animation-duration: 1.5s;
}
#keyframes fade {
0% {
opacity: 0.4;
}
100% {
opacity: 1;
}
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<link rel="stylesheet" href="style.css">
<body>
<div class="slider-container">
<div class="mySlide fade">
<img src="https://images.pexels.com/photos/70497/pexels-photo-70497.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="" class="img">
</div>
<div class="mySlide fade">
<img src="https://images.pexels.com/photos/1639557/pexels-photo-1639557.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="" class="img">
</div>
<div class="mySlide fade">
<img src="https://images.pexels.com/photos/1639565/pexels-photo-1639565.jpeg?cs=srgb&dl=burger-close-up-delicious-1639565.jpg&fm=jpg" alt="" class="img">
</div>
<div class="btns">
<span class="btn" onclick="currentSlide(1)"></span>
<span class="btn" onclick="currentSlide(2)"></span>
<span class="btn" onclick="currentSlide(3)"></span>
</div>
</div>
<script src="script.js" charset="utf-8"></script>
</body>
</html>
You can set up a variable to keep track of slideshow’s auto play. When a button is clicked, the auto play is cancelled until after a certain time period, say 5s.
Let’s set the variable to be timer and define it at the beginning of the slideshow section in the JS file:
var timer = null;
Then in the showSlide function, in addition to calling setTimeout function like you are currently doing, you can assign the the return value of the function to timer so that you can cancel it whenever you need to:
timer = setTimeout(showSlide, 3000);
Then in the button click function you’ll write, add the following code to temporarily cancel autoplay and set to resume it after 5 seconds:
clearTimeout(timer);
timer = setTimeout(showSlide, 5000);
Hope this helps.

Javascript/JQuery Math.random to onclick fade to

I am making a simple game for my school project and the basic Idea is when you press a button to start the game random images will fade in and you have to click as many of them as you can in 30 seconds. I am using Math.random and Javascript for if statements and JQuery for its built in onclick and fadeTo. The function is not working however and I dont know why.Here is my html
<!DOCTYPE html>
<html>
<head>
<title>My test game</title>
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<h1>Click as many as you can in 30 seconds</h1>
<input id="clickMe" type="button" value="clickme"onclick="randomNumFunc();" />
<!-- Game Area -->
<div id="game-area">
<div id="circle1"></div>
</div>
<!-- Javascript/Jquery -->
<script src="js/JQuery.js"></script>
<script src="js/script.js"></script>
</body>
CSS:
body {
background-color: #CEF6F5;
}
#game-area {
border: 5px solid black;
height: 500px;
background-color: white;
}
#circle1 {
-moz-border-radius: 50px/50px;
-webkit-border-radius: 50px 50px;
border-radius: 50px/50px;
border: solid 21px #f00;
width: 50px;
height: 50px;
opacity: 0.5;
}
and Javascript/Jquery:
/* RNG variable */
var randomNum = Math.floor((Math.random() * 3) + 1);
/* Picture Assignments */
var pic1 = 1;
var pic2 = 2;
var pic3 = 3;
/* RNG Code */
function randomNumFunc() {
document.getElementById('#circle1').innerHTML;
if (randomNum == 1) {
$(document).ready(function() {
$(document).fadeTo('fast', 1);
});
$(document).onclick(function() {
$(document).fadeTo('fast', 0);
});
}
}
Your <input> element should be,
<input id="clickMe" type="button" value="clickme"/>
And the javaScript/jQuery code look like,
$(document).ready(function() {
var randomNum = Math.floor((Math.random() * 3) + 1);
$('#clickMe').click(function(){
if(randomNum == 1){
$('#circle1').fadeTo('fast', 1);
}
else{
$('#circle1').fadeTo('fast', 0);
}
})
});
I think that this is what you want:
script.js:
$(document).ready(function() {
var pic1 = 1;
var pic2 = 2;
var pic3 = 3;
var randomNum = Math.floor((Math.random() * 3) + 1); //every time you click it, will be generate a new randonNum
console.log(randoNum); //It will show in console the number
$('#clickMe').click(function() {
if (randomNum == 1) {
$('#circle1').fadeIn('fast');
} else {
$('#circle1').fadeOut('fast');
}
});
});
and you can remove the onClick method in the input:
<input id="clickMe" type="button" value="clickme" />

Categories

Resources