The above was build using an owl carousel slider, but now I believe that conceiving 3rd party library is too taxing on the overall code. The simple JS can deliver such a thing.
Please help me to get the mathematical logic clear I want to give an honest attempt to make one without seeing any example; that will be the first principal approach.
15 items are there(Hypothetically, for example): At JS level what will happen that adjacent text boxes will be replaced till the end of the queue based on which arrow is triggered.
Finally I refined the code, but still could not put it in synchronization with the actual HTML so that first element in slide should get modified and sliding happens→
<script>
const slide = document.getElementsByClassName("slide");
const leftSlide = document.querySelector(".left");
const rightSlide = document.querySelector(".right");
leftSlide.addEventListener("click", IncreaseZero);
function IncreaseZero() {
for (var i = 0; i < slide.length; i++) {
slide[0] = slide[i];
i = i++;
}
}
rightSlide.addEventListener("click", DecreaseZero);
function DecreaseZero() {
for (var i = 0; i < slide.length; i++) {
slide[0] = slide[i];
i = i--;
}
}
</script>
I think we have to assign an extra class first to first element and based on node inccrement/decrement we have to change that class/toggling.
Well the idea is not to modify any .slide at all, but apply a transform to the .slider – add the widths of the slides up to the current index, and translate the slider horizontally so that the previous slides are overflowing to the left (and thus hidden).
If you wish I can show you code I have that works (but it’s not responsive as it stands). It is an alternative approach but I’m not saying it is more refined
OK, here is my code that I wrote before the first reply to this thread.
My terminology is somewhat different . . . .
The whole thing has class “slider”;
Within the slider is a “view” (red border) and an element for the buttons (“buttons”);
Within the view is a “container” wider than the view, with its overflow hidden;
Within the “container” are a number of text boxes with class “box”.
I have used negative values of CSS margin-left to move the container instead of using CSS transform.
Note the “-400” in the JavaScript limits the shifting of the container. That would need to be changed by calculation if there are more text boxes or the width of the “view” is changed. At present it allows no more than two text boxes (200 pixels wide) to disappear off to the left.
With sliders like this there is always a question as to which way the arrows should point.
Standby for comments on my code from this forum’s coding puritans
Transform is more performant and utilises the GPU. I think you’ll find margin-left is a more expensive operation and triggers repaints (I had a list somewhere of all the properties that trigger re-flows)
You can kind of see it when you scroll, it’s a bit jittery.
