Как сделать ширину картинки в swiper.js?

Question

[Magnus Keef]

Есть слайдер, в десктопной версии:

В мобильной версии это чудо приобретает ужасный вид:

<div class="slider">
        <!-- Swiper -->
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide"><img src="../img/news/div-img.png"> </div>
                <div class="swiper-slide"><img src="../img/news/div-img.png"> </div>
                <div class="swiper-slide"><img src="../img/news/div-img.png"> </div>

            </div>

        </div>
    </div>

<script>
    var swiper = new Swiper('.swiper-container', {
        loop: true,
        slidesPerView: 1,
        spaceBetween: 30,
        freeMode: true,
        breakpoints: {
            420: {
                
            }
        }

    });
</script>

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

P.S. width не меняет ничего

Answer 1

[Magnus Keef]

Я устал уже....поэтому не догадался сразу.

.swiper-slide img{
width:327px;
height:auto;
}

Comments

[Andrew]

P.S. width не меняет ничего

:)

[Magnus Keef]

Andrew, я имел ввиду свойство width для скрипта

<script>
    var swiper = new Swiper('.swiper-container', {
        width: 228,      <<<------------------------------------как это работает не понятно
        loop: true,
        slidesPerView: 1,
        spaceBetween: 30,
        freeMode: true,
        breakpoints: {
            420: {
                
            }
        }

    });
</script>

[Andrew]

Magnus Keef, в брэйкпоинтах пробовали писать?
Мне сразу подумалось, что

P.S. width не меняет ничего

вы его в CSS выставили.

Answer 2

[SpawnLeon]

.swiper-slide img{
display: block;
max-width: 100%;
height:auto;
}