Как сверстать слайдер в котором картинки разной ширины?

Question

[Дмитрий Rabbit]

Слайдер я cделал, делал на SlickSlider, всё устраивает, кроме...
Суть такова, что когда листаешь слайдер, в левую сторону - картинки полностью свапаются, но справа, обрезаются так, что видно часть картинки.

Comments

[Ankhena]

Но ведь будет странно, если будет прыгать высота?

[Дмитрий Rabbit]

Ankhena, уважаемый, о какой высоте вы говорите? Речь идёт, о ширине =)

[Andrew]

код будет?
Сделайте фиксированное количество слайдов(item), которое точно вмещается.
В чем проблема?

[Ankhena]

Дмитрий Rabbit, ну.. если у слайдов разная ширина, то чтобы всегда помещалось целое количество слайдов высота должна быть плавающей.
Мне жаль )))
Ну либо будут меняться расстояния между слайдами. Можно так. Либо справа пустое место будет оставаться.

[Дмитрий Rabbit]

Andrew,

<ul id="slider">
        <li class="slide active">
            <img src="../alfa.png" alt="">
        </li>
        <li class="slide active">
            <img src="../audi.png" alt="">
        </li>
        <li class="slide active">
            <img src="../bmw.png" alt="">
        </li>
        <li class="slide active">
            <img src="../chery.png" alt="">
        </li>
        <li class="slide active">
            <img src="../chevrolet.png" alt="">
        </li>
        <li class="slide active">
            <img src="../citroen.png" alt="">
        </li>
        <li class="slide active">
            <img src="../dacia.png" alt="">
        </li>
        <li class="slide active">
            <img src="../daewoo.png" alt="">
        </li>
        <li class="slide active">
            <img src="../dodge.png" alt="">
        </li>
        <li class="slide active">
            <img src="../fiat.png" alt="">
        </li>
    </ul>

body{
    background: grey;
}

#slider{
    width: 90%;
    margin: 0 auto;
    top: 100px;
    height: 200px;
    background: grey;
    list-style-type: none;
}
.slide{
    display:inline-block;
    width: 100%;
}
img {
    -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
    cursor: pointer;
    margin: 0 auto;
    padding-top: 40px;
    transform: scale(0.8);
}
img:hover{
    filter: grayscale(0%);
}

$('#slider').slick({
    infinite: true,
    speed: 300,
    slidesToShow: 7,
    slidesToScroll: 1,
    variableWidth: true
});