So, I got this going on right now:
I want it to overflow the right side like this
But I can't get it working because I have a container to keep it centered, if I remove it the left side goes all the way to the left, margin and padding doesn't work because I don't know how much I need to align it with the other divs. I tried position absolute and z-index but when I drag the carousel the first element on the left disappears.
Any ideas?
Edit: It should have white space on the left just when it starts, when I drag some item I want the carousel to be full width.
Just add a element right inside your container, within all the slide stuff. And add a total width to it (greater than the container). And add overflow: visible to the centered container.
Related
I want to make a slick slider showing 3 slides , I want the right slide aligned with the container to the right and the left slides aligned to the left, so the margin between slides need to be dynamic if I change screen width.
The problem with the example I have is if I add margin between slides they will be no more aligned with the arrows
Without a code example it's really hard to help to get an idea.
In css maybe you could use calculate?
https://css-tricks.com/a-couple-of-use-cases-for-calc/
I am want to create a react site where while scroll when I get to services section page should change from vertical scroll to horizontal scroll for that section. Any idea how can I achieve this?
How to get scrollbar position with Javascript?
this might help you if you got scroll position and add a condition on scroll
You can use framer-motion: https://codesandbox.io/s/framer-motion-horizontal-scroll-by-scrolling-vertically-forked-473s1?file=/src/SmoothScroll.js
Framer-motion uses "ghost" div. Height of that div is equal to the slider length, you scroll it and framer create horizontal scrolling. It also check's when your slider is in a viewport.
I have a bit of a funny creative coding situation/a logo - where I have a div consisting of around 130 other colored divs and they together form the logo when at the top of the page, and as you scroll the page, the divs shift around and distort the logo, you can see it in action here:
https://warehouse.netlify.app/ and the div situation here: https://github.com/nejurgis/warehouse/blob/master/src/components/DivOverlay.js
as you scroll - the container div width shrinks and in that way it pushes all the children divs around
now the question is:
would anyone have an idea how to shrink the container div width according to the height of the whole page a.k.a. how to make the logo 'collapse' only at the end of the scroll and not mid-way as it is now?
Cool idea!
Consider using css grid https://css-tricks.com/snippets/css/complete-guide-grid/
using this you can specify the columns and rows of your grid and have all your divs automatically fill out each spot.
Im trying to make the gallery on the left fixed and 100% height when it reaches a specific point on scroll. It's currently fixed but seems that the bottom of the image is being cut as you scroll.
Live example
So i made sort of a grid-layout in javascript, but it isn't working like it should yet. I have set it up so that it changes the left margin of an elemenent to make it "slide" to the left/right. However, for some reason it refuses to slide to the last slide. No idea why, can't seem to find the bug!
Here's a copy of the whole page:
http://jsbin.com/obivap/3/edit#preview
Click on one of the other "pages" to slide to the next slide.
Any ideas?
You're animating with margins and floats. So once you push the leftmost box out of its container with a margin, the boxes to its right (which until now have moved with it, because of the float) will stop moving. At -600px the box leaves the container entirely, so the next boxes are now up against the container's border. You're not animating their margins, so they won't leave their container.
If you try and solve this by animating their margins, it will get messy. I haven't gone over your code thoroughly, but if the boxes are already position:relative, so you might as well style all of their left amounts. This means two simple changes in the code: remove every :first selector (since you want to animate them all), and change all marginLeft to just left.
http://jsbin.com/obivap/6/edit