Бесконечная загрузка с Jquery - PullRequest
Новая
       11

Бесконечная загрузка с Jquery

0 голосов
/ 18 февраля 2019

Я делаю адаптивный слайдер, и в некоторых разрешениях мой текст не соответствует моему слайду.

Я хочу уменьшить размер шрифта в этом случае, но я бы хотел, чтобы он уменьшался только при необходимости.

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

Спасибо (цель в том, что высота .desktop-slider-container всегда меньше 

 $('.desktop-slider-item').each(function(){
        var img = $(this).children('.desktop-slider-img');
        var cont = $(this).find('.desktop-slider-container');
        var mult = 1;
        if(cont.height() > img.height()){
            while(cont.height() > img.height() - 50){
                mult = mult - 0.05
                cont.find('.desktop-slider-name').css('font-size',toString(4*mult)+'rem');
                cont.find('.desktop-slider-role').css('font-size',toString(1.25*mult)+'rem');
                cont.find('.desktop-slider-name').css('font-size',toString(1*mult)+'rem');
            }
        }
    })
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="desktop-slider-item">
    <div class="desktop-slider-body">
        <div class="desktop-slider-container">
            <h2 class="desktop-slider-name">
                <span>SomeText</span>
                <span>Some Text</span>
            </h2>
            <div class="desktop-slider-role">Some Text</div>
                <a href="sometext" class="desktop-slider-link">Some text
                    <span class="right_arrow" style="background-image:url('../images/next_arrow.png');"> </span>
                </a>
        </div>
    </div>
        <div class="desktop-slider-img">
            <img src="sometext" alt="">
            <div class="desktop-slider-date">
                <span class="day">09</span>
                <span class="mounth">avril</span>
                <span class="year">2019</span>
            </div>
        </div>
    </div>
</div>
...