Изменение размера ползунка изображения до соотношения сторон текущего изображения в JavaScript - PullRequest
Новая
       35

Изменение размера ползунка изображения до соотношения сторон текущего изображения в JavaScript

0 голосов
/ 02 октября 2019

Я сделал этот полностью рабочий слайдер изображений, и теперь единственное, что я хочу, это изменить его высоту до соотношения сторон текущего изображения. Я написал цикл, который вычисляет соотношение сторон для каждого изображения в ползунке, единственная проблема заключается в том, что при выполнении цикл возвращает все значения за раз, когда мне нужно только дать мне одно за другим значение для adjustedHeight каждоещелкните.

Я попытался поместить i++ в цикл, запихивая все значения в массив, что требует другого цикла для перебора значений массива, но все это кажется более сложным, чем нужно. 

<div class="slider-images">
    <img src="https://via.placeholder.com/1280x720.png">
    <img src="https://via.placeholder.com/1280x720.png">
    <img src="https://via.placeholder.com/1280x960.png">
    <img src="https://via.placeholder.com/1280x720.png">
    <img src="https://via.placeholder.com/1280x720.png">
    <img src="https://via.placeholder.com/1280x720.png">
    <img src="https://via.placeholder.com/1280x720.png">
</div>

JavaScript 

const images = document.querySelector('.slider-images');
const image = document.querySelectorAll('.slider-images img');

var i;

function slideRight() {
    //...

    for (i = 0; i < image.length; i++) { // Calculates aspect ratio
        const allImagesWidth = image[i].naturalWidth, 
            allImagesHeight = image[i].naturalHeight;
        const aspectRatio = allImagesWidth / allImagesHeight;
        adjustedHeight = Math.round(slideWidth / aspectRatio); // Final slider height required for a current shown image
    }

    images.style.height = adjustedHeight + 'px'; // Dynamically should add respective height calculated in the loop above

    //...

}
document.querySelector('.slide-right').addEventListener('click', slideRight, false);

CSS 

.slider-images {
    display: flex;
    transition: .5s all cubic-bezier(0.4, 0.0, 0.2, 1);
    max-width: 200%;
    max-height: 512px;
}

.slider-images img {
    width: 50%;
    z-index: -1;
}

1 Ответ

0 голосов
/ 02 октября 2019

Окончательно решено, работает и изменяет размеры по вертикали, как я и хотел. Просто нужно переместить цикл над функцией slideRight, установить новую переменную пустого массива imageArray, push все от цикла до этого массива, а затем установить стиль в функции для чтения из этого массива и изменения ширины на основедля уже существующей переменной position = 0, используемой для работы ползунка.

Также внесены корректировки в стили, удалены max-height из .slider-images и для .slider-images img установлено max-height: unset;, если у вас естьimg по умолчанию max-height: 100%;. 

var position = 0;
var index = 0;
var imageArray = [];

//...

for (index; index < image.length; index++) {
    const allImagesWidth = image[index].naturalWidth, 
        allImagesHeight = image[index].naturalHeight;
    const aspectRatio = allImagesWidth / allImagesHeight;
    var adjustedHeight = slideWidth / aspectRatio;

    imageArray.push(adjustedHeight++);
}

images.style.height = imageArray[position] + 'px';

function slideRight() {
    position--;
    images.style.height = imageArray[position] + 'px';
    if (position == -1) {
        position = imageCount - 1;
    }

    images.style.transform = 'translateX(' + -(slideWidth * position) + 'px)';
}   

// ...

document.querySelector('.slide-right').addEventListener('click', slideRight, false);
...