I believe some wrong approach to CSS is used slide is not working as it was expected that one image should slide either in +ve or -ve axis.
Well it’s doing exactly what you told it to do, I just dont understand why you’re doing it.
If you’re trying to slide images around, why are you applying a transform to the div containing the whole thing?
I am trying to slide the whole container by N * 100% on the X axis. N can be +ve or negative but a non decimal number.
100% is the whole thing. If you have 10 images across then you’d only want to move it 100% / 10 (i.e. 10%) to see the next image (assuming for now that one image at a time is seen).
Bear in mind that you don’t want the container that holds all the images to have a width either as it needs to grow with the images it holds.
I believe we gave you a fully working version of something like this last year for you so I will not offer code as you obviously want to build from scratch.
You need to revise your logic a little 
2 Likes
And you’re doing that.
Why?
1 Like
This point is not clear sir, Can you please help with some examples?
Last year slider is this One → https://codepen.io/codeispoetry/pen/zYMdNQL
In this slider was not that 100% translation was applied where is my reasoning flawed in the current implementation?
My understanding is oslider container should move on the X-axis to its current with multiplied by the number N.
You’ve fundamentally changed the code from the previous discussion. You’ve removed a layer of container, but are trying to apply the logic to the outer container instead; you are using flex display on the container, but not defining flex on the items contained within it; you’ve stripped the animation code out…
I would suggest you go back to the example Paul gave you, and try to understand it better.
In the other example of yours that I just amended the logic (in css) would be like this.
.
oslider{
transform:translateX(calc(-100% - var(--flex-gap) * 1));
}
Then to slide again it would be:
.oslider{
transform:translateX(calc(-200% - var(--flex-gap) * 2));
}
and so on…
Of course that part would need to be generated in js etc.
Remember though that when the screen is resized larger you have more items across so imagine you were starting at 1 image across and then you would have to translate 10 times x 100% to see the last image… If you then widen the screen then there are now 10 images across you won’t see them because the outer is translated 1000% to the left but all your images fit into 100%. I believe these issues were previously addressed in your similar old threads.
1 Like
I am still unable to understand the logic. I was reading the code of the old code but could not draw a connection. Also, we can drop the gap feature for some time as that is causing so many issues.
Sir, Can you help me with some more examples to grab the feature and its logic may be in the old thread. Thank you so much.
In the current case when arrows for swipe are pressed the 100%, or 200%, which div should slide?
In your example in your first post you need to set the width of the recurrence div to 100% divided by the number of slides it contains. You can then use 100% on the parent and slide in blocks of 100% assuming no gap property.
I’ve added that code to your pen.
EDIT: Actually scrub that demo above as its not really working properly. I’ll come back to it tomorrow.
In that last example there is only ever one image across so there will not be a problem. However if you have media queries as in this other example then the following will happen.
There are 4 across on large screens and translateX(-100%) moves the whole block of 4 to the left. However if you resized the screen smaller there is only one across now and 100% only moves one item at a time. Therefore if you move the one item to the left say 4 tomes it will be 600% to the left. Then when you resize to large screen the element is still 600% to the left but as you can now fit 4 across you would need 24 slides to see anything. That’s why in the previous demos we reset the slides to the first position when the window was resized.
That is working perfectly in the this demo and you should move your js into that demo for testing (bearing in mind you changed all the class names)
1 Like
Ok adjusted to work with one image across only.
1 Like
In the latest HTML this is the scenario →
-
There is a parent DIV with a class
pslider, It has a maximum width set to 800px and a margin auto -
Its immediate child is div with class oslider, which is an actual container of all children with class recurrence, which is siblings among themselves and are blocks that need to be slided. Its width is 100% of the width of the parent container with a class
pslider. -
Currently, if we refrain from full width and just one image/slide, which div should be slided in multiples of 100% so that each time I get a new image. What is the final purpose is served when the flex-basis of class recurrence is set to 100%
Sir, Most of my logic and code were correct, the biggest issue was the wrong use of overflow property, as soon as I shifted overflow property from oslider class to plsider majority of issues were fixed.
and later applying the below-mentioned code.
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
html,
body {
margin: 0;
padding: 0;
}
Even after correctly applying overflow property still I could not visualize how out this property at oslider class was causing the issue.
Latest Modification of my code →
The element is 100% wide which means it’s effectively 800px wide as it’s the width of its parent. You then place a series of images that are all 100% wide(I.e. 800px on wide screens).
Therefore all the images except the first one are not contained within the 100% and the rest overflow to the right. If you then add overflow hidden all those images that overflow will be hidden forever.
Just because an element holds a lot of images it’s actual width is not always the sum of it’s content because overflowing content does not contribute to its width. That’s what allows you to move in blocks of 100% which is effectively one slide width. The container is only 800px wide and when you move it by 100% (800px) you then see the next image that was previously overflowing the container. If the overflow was hidden then it would be blank.
If you don’t do that then all the images will be squashed to fit in the one screen jut like flex normally does. You need each image to be as wide as the 100% container.
1 Like
I added the gap logic to the multiple slide demo to show it working and to illustrate my other point.
The gap is hard coded into the js but really you should get the js to update the css custom property automatically rather than having to manage in two places (that’s pretty easy to do but didn’t want to complicate things yet).
The point I was making before is that if you close the screen until there is only one or 2 slides across and then slide them until you get to the last ones. If you now widen your browser to full width the screen will be blank as the images will be several thousand pixels off the left of the screen. This is because you scroll one or two at a time on small screen but on large screen you scroll up to 4 at a time.(e.g. if there are 12 images and they are 4 across you lonly need to click the button 3 times to get to the end of the images. On a small screen at one across you need to click the button 12 times to see them all. That means your slideval is 12 and when you open the screen wide 12 x 100% sends the images into space).
That’s why in last years demos I suggested than when the screen is resized you reset the slideval back to its initial value and start again from the first slide. Alternatively for a better approach rather than hogging the resize event you could monitor the media queries in js and when a breakpoint is breached you adjust the logic of the slideVal to account for the number of images across (similar to the demo I did for you last year where I reset the slides to 1 when a media query was breached.).
1 Like
Thanks, In a way this can also be interpreted as when we set overflow:hidden, it allots a maximum available width, and permanently chips out(actually make it invisible) any extra part of the actual total width of the div container. That is the reason
Sort of
When you set overflow other than visible then any content that does not fit into the container is either hidden or accessed by local scroll bars.
This only happens if the element has a width or height defined other than auto. If neither width nor height are applied then the overflow does nothing as the element grows to accommodate it’s content.
If a container is defined as say 800px wide and you then put 1200px width of content inside it
then the element is still only 800px wide but the overflow is visible and takes no part in the flow of the document.
1 Like
Trying to add more features → https://codepen.io/codeispoetry/pen/VwVXamR
Issue: The Thumbnail slide doesn’t stop sliding when the last child to the .thumbnail class is visible.
In the last year’s discussion, the function was this:
function nextSlide() {
var ratio = getSlidesAcross();
if (Math.abs(slideVal) >= ratio - 1) {
return;
}
slideVal -= 1;
hslider.style.transform = `translateX(${slideVal * 100}%)`;
console.log('Next clicked')
}
I have rewritten this function like this →
function nextSlide() {
const lastChild = oSlider.lastElementChild;
const oSliderRect = oSlider.getBoundingClientRect();
const lastChildRect = lastChild.getBoundingClientRect();
if (Math.abs(slideVal) + 1 >= numSlides || lastChildRect.right <= oSliderRect.right) {
return;
}
slideVal -= 1;
oSlider.style.transform = `translateX(${slideVal * 100}%)`;
}
Certainly there is some logical mistake in the new function.
Why are you doing all that?
Right at the start of the code you have a variable called numSlides which tells you how many slides there are. Surely all you need to do is check numSlides against slideVal and act appropriately. No need to interrogate the dom each time which is en expensive operation especially as everything you need is already known.
e.g.
function nextSlide() {
if (Math.abs(slideVal) + 1 >= numSlides) {
return;
}
slideVal -= 1;
oSlider.style.transform = `translateX(${slideVal * 100}%)`;
}
Why did you think you needed all that other code? Were you planning for something else?
1 Like
Sir, I will write my agenda very soon so that you can help and guide me. Thanks.