Custom jQuery Content Slider

[yeeyang]

set your `infinite` to `:false` and that should take care of the reload.

[chrisburton]

@yeeyang Didn’t work.

[yeeyang]

did you have `circular` set to `false` as well? the example at the very bottom of their homepage is what you’re looking for functionally. Checkout their javascript call and settings.

[chrisburton]

@yeeyang Nope, that’s actually not what I wanted. I wanted the last item by itself instead of sliding over one. I emailed them and they said it isn’t possible currently. I have to use an entirely different plugin which I think I’ve found.

[chrisburton]

Would anyone mind helping me create a lightweight content slider from scratch? I can’t find one that fits what I need it to do.

Basically I want it to just show 3 articles and slide to the next set. Soo, if I have 7 content blocks, it should do this:

3 blocks -> (slide) -> 3 blocks -> (slide) -> last block

Most content sliders will do this:

3 blocks -> (slide) -> 3 blocks -> (slide) -> last block + first 2 blocks

So it slides 3 blocks twice and adds two of the beginning blocks on the last one. This is not ideal nor what I’d like. It’s been quite frustrating that I can’t seem to find one that doesn’t do what I explained in the second example.

I took the liberty to upload the content to CodePen in case anyone would like to help. I also renamed the title.

http://codepen.io/chrisburton/full/eEwoD

[chrisburton]

@CrocoDillon Dude, you’re a rock star. Thank you. One question, how can I replace your arrows with my own?

Edit: Nevermind. I removed the overriding backgrounds. How can I attribute you, URL + name or just name?

[chrisburton]

@CrocoDillon I tried implementing it live but it’s not working for some reason.

http://chrisburton.me/dev

All right, sounds good.

[chrisburton]

@CrocoDillon Ha, nice catch. Everything works like a charm. Thanks again.

Not a problem for the attribution. Updated.

[chrisburton]

@CrocoDillon Sorry to bother you again, is there any way to stop the blocks from shifting when resizing the browser?

Click the right arrow once until you get to the numbers 4, 3 and 2. Now, resize the browser and you will see 4 leaves the area while 1 slips in.

site: http://chrisburton.me/dev

JS file: http://chrisburton.me/dev/assets/js/functions.js

[chrisburton]

@CrocoDillon Perhaps all three widths (320px * 3 = 960) and a margin of the arrow (320px * 3 + 25px = 985px)? Although, I’m not seeing anything rendering 985px. I wonder if wrapping it in another div might help.

Update: I don’t want to jump the gun here but using percentages rather than pixels is working when I hard code it into Web Inspector.

[chrisburton]

Darn. It doesn’t work either. When the browser is resized and you click the arrow, it doesn’t calculate correctly.

[chrisburton]

@Crocodillon Yeah, I figured that was the best option for now. Take your time, much appreciated for the help.

[chrisburton]

@Crocodillon That’s actually weird because I was applying `box-sizing: border-box;` if you take a look at my reset: http://chrisburton.me/dev/assets/styles/reset.css

But it seems to work on localhost perfectly so maybe it was because I didn’t declare it in CodePen?

[chrisburton]

@CrocoDillon Gotcha. Well, from what I can tell it does work now. Any minor issues I can fix with media queries, I think. Thanks again for taking the time to help me out with this!

[Author]

Posts