ebinabo Posted January 9, 2020 Share Posted January 9, 2020 Hello guys, I'm trying to get a region to be able to drag the whole width of the box. Some items are spilled out and overflow is hidden. Trying to get the same effect as a slider in a mobile horizontal scroll or kind of like swiperjs. The bounds property holds true until there's more than 1 element there then it breaks See the Pen PowRWJr by ebinabo (@ebinabo) on CodePen Link to comment Share on other sites More sharing options...
mikel Posted January 9, 2020 Share Posted January 9, 2020 Hey @ebinabo, Do not 'limit' the value left to -100. Try for example this Draggable.create('.draggable', { bounds: {right: 0, left: -1300}, type: 'x' }) Happy dragging ... Mikel Link to comment Share on other sites More sharing options...
ZachSaucier Posted January 9, 2020 Share Posted January 9, 2020 Hey ebinabo. Can you please describe the behavior that you're wanting in more detail? Perhaps using a demo of the swiperjs library that you mention? Link to comment Share on other sites More sharing options...
ebinabo Posted January 9, 2020 Author Share Posted January 9, 2020 4 hours ago, mikel said: Hey @ebinabo, Do not 'limit' the value left to -100. Try for example this Draggable.create('.draggable', { bounds: {right: 0, left: -1300}, type: 'x' }) Happy dragging ... Mikel Hey @Mikel, I tried this and it didn't work, immediately you add for both directions the right boundary stops working Link to comment Share on other sites More sharing options...
ebinabo Posted January 9, 2020 Author Share Posted January 9, 2020 @ZachSaucier hello Zach, I'm trying to display only the white boxes and drag through them in a shelf effect. I don't want the black background to be visible only as margins and not a large portion of it Link to comment Share on other sites More sharing options...
mikel Posted January 9, 2020 Share Posted January 9, 2020 Do you mean it should look like a filmstrip? See the Pen qBEoxRZ by mikeK (@mikeK) on CodePen Link to comment Share on other sites More sharing options...
ebinabo Posted January 9, 2020 Author Share Posted January 9, 2020 2 hours ago, mikel said: Do you mean it should look like a filmstrip? @mikel yes actually, really close to this. I want the black background to be constant then the inner boxes to resemble a filmstrip and you shouldn't be able to scroll beyond the left margin of the first box and the right margin of the last. An example could be seen on limnia.com 's homepage at about 70% of the page Link to comment Share on other sites More sharing options...
mikel Posted January 9, 2020 Share Posted January 9, 2020 Hey Ebinabo, it could be var ww = $(window).innerWidth(), boundLeft = ww - 2250; // take the width of the BOX Draggable.create('.draggable', { bounds: {minX:0, maxX:boundLeft}, type: 'x' }) See the Pen OJPvEmv by mikeK (@mikeK) on CodePen And you need a window resize logic. Happy bounding ... Mikel 3 Link to comment Share on other sites More sharing options...
ebinabo Posted January 10, 2020 Author Share Posted January 10, 2020 @mikel this works fine actually, thank you 2 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now