Need help interpreting and editing JS

[LrnWdlr]

I’m having some trouble understanding the JS behind this slider and would really appreciate if someone could give it a look and let me know how it works…

I’ve copied/pasted everything correctly but there’s a glitch somewhere and for some reason the CodePen is not working very well… you’ll see what I mean when you run it. That said, the code is all there and this shouldn’t be a problem…

If you see that part of the JS is not being used right now please let me know. I took it from a “bigger” page and that can definitely be the case… I don’t know much about JS so it’s hard to clean it up myself…

the first couple of functions ( prevImage(postid) and nextImage(postid) ) deal with the slider inside the slider. No issue there!

Now here’s what I’d like to understand and the changes I’d like to make:

Right now a total of 8 slides are visible at any moment. How can I edit that number? I tried lowering it to 6 or 4 but never quite got it right…

Right now everything is centered page on the page. However, if I change the width of the sliders (css) the positioning gets messed up… what part of the JS deals with that?

http://codepen.io/LrnWdlr/pen/rxjyep

Any help will be very much appreciated…
Thanks!

Lauren

[LrnWdlr]

Nobody? :(

[Shikkediel]

I did take a look at it and it seems like a lot to do. The demo’s nice but the code comes across as a bit amateuristic, which adds to the amount of time that would go in. I’m not much into cleaning up larger blocks of script at the moment myself (at all, had a bit of an overdose)… but that state of mind might clear up.

[LrnWdlr]

You’re talking about the JS, right?

The CSS still has a lot of junk, I know that… and I’m in the process of cleaning it up, I just posted the whole thing because I didn’t think it would matter much. I’m not looking for anybody to clean it up.

Regarding the JS, I also don’t want you (or anybody else) to clean it up. I mean, of course if you see a chunk that’s not doing anything… it would be good to know… but I understand it’s a lot of work… and it’s not what I’m asking for…

I would just like to id what controls the number of slides that are visible at any time (mainly this!) and if possible the positioning ( I want to be able to change the width and keep the whole thing centered) so that I can adjust both…

I’ve been trying (trial and error) on my own, but never got it quite right.

Is that too much work? I’m a JS n00b so I really can’t tell…

Thanks.

[Shikkediel]

I’d looked at the JS only… and with a compulsatory drive to optimise code already knew I couldn’t help myself from wanting to rewrite the whole thing once I got started. That would probably be the best way to make it independent of the amount of slides in any case.

But I’ll check again if there’s shorter solutions to your specific questions…

[LrnWdlr]

Oh, thanks but there’s no need for that… I mean, that would surely be a lot (!!!) of work… what I have is working so let’s not even think about that! :)

Currently it’s displaying 8 slides. I’d like to be able to lower that number to 6 or 4… that should be doable without having to rewrite anything… that’s priority number one.

Number two would be changing the width of the sliders and be able to recenter them horizontally.

Hopefully that won’t be too much work.
Many thanks!

[LrnWdlr]

@Shikkediel

I don’t want to impose on you, but do you think you’ll be able to give it a look anytime soon? Thanks.

[Shikkediel]

I’ve been going over it already but it doesn’t look like there’s any quick fixes. The script isn’t very “universal” in any way so it needs specific tweaks throughout – and it’s quite intertwined with the HTML structure as well. I’ll see if I can get somewhere over the weekend though.

[LrnWdlr]

Oh, okay.
Please do. I’d really appreciate it!

The HTML has 30-something

<div class="loader card" id="postXXXXXXXXXXX">

but the structure is always the same. I think you can delete most of them and it will work just fine. I didn’t have time to test that properly so I left them all in there just in case…

Thanks again for your help.
Lauren

[Shikkediel]

No problem. The tricky bit with the HTML is that it’s using inline scripting to navigate – no way I could leave that as is, a data attribute and preventDefault() would be much better to contain everything inside a single script.

<a href="javascript:prevImage('post98971673665');" ...

One thing I can tell you already by the way – with the current setup you don’t need the additional scripts you linked to. Just the jQuery library will do.

[LrnWdlr]

@Shikkediel

Quick update:
The 2nd issue (keeping things centered when changing the size of the slides) has nothing to do with the JS. It’s pure CSS. My bad! :facepalm:

Please forget about that. :)

That said, the other issue still persists.
It would be wonderful if you could help me.
Thanks.

[Shikkediel]

I’ve been fiddling around with it but had to come come to the conclusion that this one’s just too much of a task for myself to figure out. It’s written such that it’s hard to see the logic among the apparent clutter. Sorry about that.

[Author]

Posts