How to make a slider correctly?

Question

JavaScript

I’ll make a reservation right away that I know that there are just a lot of slider plugins on the network. But I want to figure out how their layout is done myself, especially considering the moment that the slider layouts that I found on the net do not fit my example. And my example will be modified a little more from case to case on the site (i.e. on the site there are several different-looking sliders, but similar functionality).
The animation of the slider will be normal - the movement of the tape forward and backward, looped (after the last element, the first one leaves next), with arrows left and right.

So, our slider elements are blocks with text. The block has a fixed width of 300px, the height of the block is not fixed (this is important, otherwise everything would be much simpler), it depends on the content.

The slider rides inside a 640px wide block, which is aligned to the center of the screen (the standard layout of the site layout is a column in the center of a fixed width). Accordingly, it is necessary that all elements of the slider "stand" in one line from left to right and those elements that do not fit into the width are hidden (overflow:hidden).

Then problems begin: regardless of whether the slider element is a block element with float or inline, elements that do not fit into 640px are still transferred to the second and subsequent lines. You can, of course, raise these elements using position: relative and the top property, but this turns out to be very clumsy, because different elements will have a different top value (since some elements are on the second line, others on the third).

How would I align them the way I described at the beginning? To subsequently use jQuery to use the animation by clicking on the arrows so that the ribbon moves.

Code on jsfiddle .

Answer 1

I would make a wrapper, say a div that has white-space: nowrap; which forbids the transfer to the next line of blocks nested in it that have display: inline-block; In addition, you can specify vertical-align: middle for nested blocks.
Example: jsfiddle.net/49zqV
And this is already in action and animated: jsfiddle.net/UqYCM

spoiler

<div class="carousel">
    <div class="wrap">
        <div class="item-1"></div>
        <div class="item-2"></div>
        <div class="item-3"></div>
    </div>
</div>

.carousel {
    width: 300px;
    border: 1px solid red;
}
.wrap {
    white-space: nowrap;
}
.wrap > div {
    vertical-align: middle;
    display: inline-block;
    width: 300px;
}
.item-1 {
    height: 250px;
    background: red;
}
.item-2 {
    height: 350px;
    background: blue;
}
.item-3 {
    height: 300px;
    background: green;
}

Answer 2

I usually nest the elements inside another div, and give it a really big width. jsfiddle.net/krL7q/1