Home › Forums › JavaScript › Custom jQuery Content Slider
- This topic is empty.
-
AuthorPosts
-
February 15, 2013 at 7:21 am #124727yeeyangParticipant
set your `infinite` to `:false` and that should take care of the reload.
February 15, 2013 at 7:22 am #124728chrisburtonParticipant@yeeyang Didn’t work.
February 15, 2013 at 5:56 pm #124837yeeyangParticipantdid 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.
February 15, 2013 at 11:36 pm #124846chrisburtonParticipant@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.
February 16, 2013 at 8:27 am #124872chrisburtonParticipantWould 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.
February 16, 2013 at 9:44 am #124878chrisburtonParticipant@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?
February 16, 2013 at 10:10 am #124884chrisburtonParticipant@CrocoDillon I tried implementing it live but it’s not working for some reason.
All right, sounds good.
February 16, 2013 at 10:20 am #124887chrisburtonParticipant@CrocoDillon Ha, nice catch. Everything works like a charm. Thanks again.
Not a problem for the attribution. Updated.
February 17, 2013 at 1:29 pm #124970chrisburtonParticipant@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.
February 17, 2013 at 7:56 pm #125002chrisburtonParticipant@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.
February 18, 2013 at 4:33 am #125038chrisburtonParticipantDarn. It doesn’t work either. When the browser is resized and you click the arrow, it doesn’t calculate correctly.
February 18, 2013 at 5:55 am #125047chrisburtonParticipant@Crocodillon Yeah, I figured that was the best option for now. Take your time, much appreciated for the help.
February 18, 2013 at 7:51 pm #125142chrisburtonParticipant@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?
February 18, 2013 at 8:17 pm #125144chrisburtonParticipant@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!
-
AuthorPosts
- The forum ‘JavaScript’ is closed to new topics and replies.