Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Matt Campbell
Matt Campbell
9,767 Points

jQuery sliding row of images

Hi folks,

I'm looking for a little advice and help. I'm trying to build something in jquery that is a row of 9 images in this case, that slides left and right by one image each time the left and right arrow is clicked. See here for example: http://ultimatewebdevs.co.uk/testspace3/

What I'm struggling with, is how to deactivate the ability to slide left and right once you get to the end of the row.

Currently, I'm using animate right -= and += 264px, the width of one image. This works great but now I'm trying to find the best way to stop the slider at the end of the row. Was thinking of adding 1 to a variable and as long as the number equals less than 6, number of clicks to get to the end, then the button works but my jquery is not extensive enough for this.

I was also thinking of using the right property that increases by 264px each time the slider moves. Again, as long as the number is less than, the button will work, otherwise nothing will happen.

Or, am I going about this the wrong way and I should be using next child item or something on the parent div, slide-runner?

Hope for some grade A guidance as always seems to be delivered by this forum. One for Andrew Chalkley perhaps.

Thanks.

Navdeep Singh
Navdeep Singh
1,569 Points

Hi Matthew,

I tried to solve this.. Hope u will get idea

Its set of 3. Total sliding right dimension is = Total elements (9) x 264 = 2376

bcoz there must no movement on last 3.. so 3 x 264 = 792

2376 - 792 = 1584

so just return false if above value is encountered

Let me give u a logic to calculate above value :

var constant = 3; var x = total_size; // Suppose 9 var each_elem_size = 264 ; var set_size = 792 ;

y = x % constant x-y = z z = ( z * each_elem_size ) - set_size // we get actual right dimension to move result = z + (y*each_elem_size ) // additional to move.. if value is odd

For example for 10 elems 10%3 = 1 10-1 = 9 ( 9*264 )- 792 1584 + (1*264) = 1848

Thanks.. Happy Coding..

Matt Campbell
Matt Campbell
9,767 Points

Navdeep Singh, would it be possible for you to implement this into this codepen.io please? While I understand what you're saying, I haven't seen anything like this before and so am clueless as to how to actually implement it into my page.

Here's the pen: http://codepen.io/Th3M8dH8tt3r/pen/npuKh

I've changed out pictures for just divs with backgrounds but that shouldn't be an issue.

One thing which is important is that this is going to be used in WordPress and needs to autogenerate a new slide when another product is added to the category and autoadjust widths etc.

Is there no way to get from the the CSS a value of a property to use in jQuery? Would make life so much easier or will this code you've written be able to autorespond to the number of slides changing?

Thank you ever so much for your help, it's been a long long day and my brain is fried.

Andrew Chalkley
Andrew Chalkley
Treehouse Guest Teacher
Andrew Chalkley
Andrew Chalkley
Treehouse Guest Teacher

Is there no way to get from the the CSS a value of a property to use in jQuery? Would make life so much easier or will this code you've written be able to autorespond to the number of slides changing?

If you ever need to you can get a property value in jQuery using the .css() method http://api.jquery.com/css/.

You have to be careful with certain properties though, if you set magin or padding as it sets the "margin-left" etc. And to confuse things you need to use it camel case "marginLeft".

1 Answer