Why Doesn't My JavaScript/Html/Css Auto Slider Work?... Please Help

Community Off Topic
1

// Here is My Javascript

<script>

var img = document.getElementById('imgs');
var imag = ('pic1.jpg', 'pic2.jpg', 'pic3.jpg', 'pic4.jpg');
var x = 0;
function slide(){
if (x < "imag".length) {
x = x + 1;
} else {
x = 1;
}
img.innerHTML="<img src=" + imag[x - 1] + >"";
}

setInterval(slide, 2000);

</script>

//Here is My Div Setup

<div class="slideshow">
<div id="imgs">

<img src="assets/pic1.jpg" >

</div>

</div>

//Here is My Css

.slideshow{
width: 50%;
height: 500px;
box-sizing: border-box;
box-shadow: 5px 5px 10px grey;
margin: 20px auto;
overflow: hidden;
}
img{
width:100%;
height: 100%;
animation: ani 2s linear;
}
@keyframes ani{
0%{transform: scale(1.2);}
10%{transform: scale(1);}
100%{transform: scale(1);}
}
2

lets look at the type of imag:

var imag = ('pic1.jpg', 'pic2.jpg', 'pic3.jpg', 'pic4.jpg');
console.log(typeof imag);

hmā€¦ a string, is that right?

okay, lets inspect the value then:

var imag = ('pic1.jpg', 'pic2.jpg', 'pic3.jpg', 'pic4.jpg');
console.log(imag);

that doesnā€™t look right. If you donā€™t know how to open the browser console, you can run your code on jsbin.

3

Compare to,

img.innerHTML="<img src=" + imag[x - 1] + >"";

Following the suggestion above, inspect element, you will discover that JavaScript does not support tuples. Use array syntax.

var img = document.querySelector('#imgs');
var imag = ['pic1.jpg', 'pic2.jpg', 'pic3.jpg', 'pic4.jpg'];
img.innerHTML=`<img src="assets/pic${x}.jpg">`;  // cheat
4

@stetim94 how do I get all the images to slide?

5

How well do you understand setInterval()?

6

Not at all sir, I have below average knowledge on Java altogether:cry:

7

I copied and paste the java setup from another source and just tweaked the var names and used my own jpgā€™s

8

img.innerHTML=ā€œā€;

When I did a page inspection its telling me i canā€™y use the innerHTML property

9

Becaiuse the syntax is not correct

10

its javascript, not java.

That you do not understand javascript very well is reflected in your code. For example here:

if (x < "imag".length)

you use a string, while you should use the imag variable which contains an array of your images.

If you want to do this, i would highly recommend studying javascript

11

That is the elephant in the room that was bound to come up, eventually. How often do we see a naive learner who wishes to side step the rudiments and fundamentals in favor of the finished product (that they copy)? They see it work and think it is simple to learn from only to find it is not quite so easy.

1 Like
12

I know that its ā€œJavaScriptā€ as you clearly see in the beginning of this Post I didnā€™t think I had to keep fully spelling it out for everybody :face_with_raised_eyebrow:. Anyway I know I have to learn more about ā€œJavaScriptā€ and I will in the near future. I just wanted to try this code I found to use this specific Slider. Below is how I originally had it setup. I already have a basic understanding of variables, value, strings, Boolean, numbers, and properties. I just thought I could be guided in the right direction with this specific code to make it work which iā€™m clearly not getting from you or @mtf, you doing a lot of critiquing about unnecessary things and less explaining the code I have, If you canā€™t focus on helping me with this code than you can stop replying because so far your not helping at all. I thought this forum is a place to get help??

var img = document.getElementById(ā€˜imgsā€™);
var imag = [ā€˜pic1.jpgā€™, ā€˜pic2.jpgā€™, ā€˜pic3.jpgā€™, ā€˜pic4.jpgā€™];
var x = 0;
function slide(){
if (x < imag.length) {
x = x + 1;
} else {
x = 1;
}
img.innerHTML="";
}

setInterval(slide, 2000);

14

then type JS.

what about arrays? Have you even implemented the array like mtf suggested?

You do not demonstrate your understanding of variables here:

if (x < "imag".length)

The problem is that you are in over your head, then helping becomes really difficult.

15

Like @stetim94 has suggested, you are jumping into the deep end then expecting everyone to come forward to help you out. That is not fair to the members. If you cannot take some time on your own to learn the basics, that is, really learn, then you are only wasting our time for your own gratification. Youā€™ll not get very far doing things this way, imho.

And, one thing you will find invaluable in the forum worldā€¦ A thick skin. If you cannot handle a little critiquing then you are in the wrong place.

16

If the code I posted loaded correctly in that reply you would see I posted the original way I had it set up like this

//Original JavaScript setup
<script>
var img = document.getElementById('imgs');
var imag = ['pic1.jpg', 'pic2.jpg', 'pic3.jpg', 'pic4.jpg'];
var x = 0;
function slide(){
if (x < imag.length) {
x = x + 1;
} else {
x = 1;
}
img.innerHTML=<img src=" + imag [x - 1] +>;
}

setInterval(slide, 2000);

</script>
17

here imag is actually an array, imag is not array in your code

Why did you decide to replace [] with () if you donā€™t know the consequences?

In this comparison, the if condition uses the variable, you changed this as well in your code, why?

18

Dont worry about this part, I know where the quote marks go, I had set it up a certain way so It could post, idk whats going on with this posting maybe the site postā€™s code comments slow or my connection slow Iā€™ll try to be more patient with this posting

19

Iā€™m not jumping in too deep I just had the wrong expectations about this forum thatā€™s all as I clearly see by constantly going back and forth with you guys. So by the way you guys are commenting this seems to be only a place where people basically help people remember the things they already learned and thatā€™s kool I get that now so my fault for the misunderstanding, and I have thick skin more than you can imagine I donā€™t mind critiquing but when itā€™s just all I see every other post :face_with_raised_eyebrow: :laughing: its a waste of typing back and forth on both sides in my opinion, I look at things on a time basis thatā€™s what was irritating me I felt you were wasting my time I could care less what you or anybody think of me I only care when I fell my time is being played with :laughing: and I know iā€™m Impatient at times so I Apologize for my impatiences and the misunderstandingsā€¦ By all means I really do plan to learn JavaScript just like I took the time to learn HTML and CSS because I want to be proficient as a Web Designer. I just simply wanted to see this code work real quick and I know thereā€™s a quick help solution to this before I really dig deep in my learning to Javascript if I find it kool if not then oh well either way Iā€™m still going to Really Learn JS in the near future, I just canā€™t find the quick way to this solution here and Iā€™m kool with that too because I still love this site even as a New member this is were Iā€™m going to spend most of my learning, the courses are very informative, I just canā€™t put the time right now to get deep in JS with so much I have to get done in my personal life at the moment.

1 Like
20
Spoiler 
<script>
function slide(){
    x += x < imag.length ? 1 : -x;
    img.innerHTML = '<img src="assets/' + imag[x - 1] + '">';
}
var img = document.getElementById('imgs');
var imag = ['pic1.jpg', 'pic2.jpg', 'pic3.jpg', 'pic4.jpg'];
var x = 0;
setInterval(slide, 2000);
</script>

The slide function you already know about, but ternary expressions are a long ways up the learning curve, though not hard to understand. The ternary operator ? follows a conditional expression. Depending upon that boolean, the first parameter is assigned (true) otherwise the second parameter is assigned. Furthermore, in the above example we used a compound assignment operator which is the equivalent of x = x + ?.

Letā€™s walk that through. given a length of 4.

1. x is 0
2. setInterval invokes callback
3. x is less than 4 so has 1 added
4. imag[0] is passed to the DOM interpolated in an IMG tag
5. x is 1, invoke callback
6. x becomes 2
7. imag[1] is passed to DOM
8. x is 2, invoke callback
9. x becomes 3
10. imag[2] displays
11. x is 3, invoke callback
12. x becomes 4
13. imag[3] displays
14. x is 4, invoke callback
15. x becomes 4 - 4 => back to line 1