Как подстраивать размер слайдера под текущую просматриваемую картинку?

Question

[gazes12]

Здравствуйте.

https://gazes12.github.io/help/
Я не хочу чтобы картинки подстраивались под размер слайдера, я хочу чтобы слайдер подстраивался под картинки, причем именно только под просматриваемую картинку. Если на сайте будет 3 разных картинок с разными размерами, при пролистывание слайдер три раза должен изменить размер. Когда вручную меняю размер slider-wrap, то получается картинки уменьшаются:

Потому-что у них max-width: 100%; а если не будет max-width: 100%; то огромная картинка разлезется на весь сайт.

Как мне быть? Как решить такую задачу? Буду очень рад за помощь!

Comments

[Ankhena]

Чтобы уменьшался сам слайдер - пишите JS

Обычно вашу задачу решают так:
https://swiperjs.com/demos#slides-per-view-auto

[gazes12]

Ankhena, Понятно что js. Проблема в том, что когда я хоть как-то уменьшаю slider, то картинки в нем сразу же становятся в 10 раз меньше.

[Ankhena]

gazes12,
- задаете слайдеру высоту
- картинкам height 100% по высоте слайдера
- убираете ограничение по ширине max-width 100%
- получаете ширину текущего слайда
- задаете её слайдеру

Но всё будет прыгать и дергаться при перелистывании слайдов из-за разной ширины картинок.

[gazes12]

Ankhena, Мне слайдеру, слайдеру-wrap или слайдеру-line задавать высоту?

[Ankhena]

gazes12,
как вам удобнее

[gazes12]

Ankhena, Эффект будет один и тот же?

[Ankhena]

gazes12, я бы задала для -line, просто потому что писать меньше. Родительские блоки сами подстроятся.

[gazes12]

Ankhena, Здравствуйте. Подскажите пожалуйста, как я могу получить ширину текущего слайда?
Я делаю так:

const sliderImages = document.querySelectorAll('.slider__item img');
    /*Получение ширины картинки в item`e*/
    let widthSliderImage = 0;
    sliderImages.forEach(sliderImage =>{
        widthSliderImage = sliderImage.offsetWidth;
        sliderLine.style.width = widthSliderImage + 'px';
    });

Получаю не то что надо.

.slider__line {
    display: flex;
    transition: .3s;

    height: 500px;
}

.slider__item {
    flex: 1 0 100%;
    img{
        height: 100%;
    }
}

[Ankhena]

gazes12, например, через счетчик. Стрелка вперед +1, стрелка назад -1

Перед тем как это делать, подумайте о том, действительно ли вам нужны эти кошмарные прыжки слайдера и что будете делать, если картинка окажется шире контентной области.

[gazes12]

Ankhena, Возможно ли через forEach получить картинку по счетчику?

/*Вычисление текущей картинки*/
            console.log(counter); /*При нажатие на next, counter++, при нажатие на prev, counter --*/
            sliderImages.forEach(sliderImage =>{
                console.log(sliderImage[counter]);
            });

Выводит 3 раза undefined. Как можно по другому сделать? Подскажите пожалуйста.

[Ankhena]

gazes12, исправлять ваш код слайдера не имеет смысла.
Тут полно разных https://codepen.io/search/pens?q=slider, смотрите и разбирайтесь как сделано.

[gazes12]

Ankhena, Спасибо за слайдеры!