Если данный туториал не то, что Вы искали, у Вас все еще остались вопросы или предложения - дайте нам знать. Пожалуйста, помогите нам обслуживать Вас лучше!

Ваше имя

Ваш e-mail

Ваше сообщение (обязательно)

captcha

Новые шаблоны

JS Animated. Как предотвратить обрезание изображений слайдера на экране мобильного телефона

Из этого туториала Вы узнаете, как изменить размеры слайдера (slides dimensions) в JS-анимированном шаблоне для мобильных устройств для того, чтобы изображения сохраняли свои пропорции и не обрезались по бокам.

JS Animated. Как предотвратить обрезание изображений слайдера на экране мобильного телефона

По умолчанию, слайды обрезеются по бокам на небольших экранах, таких как экран мобильного телефона. Это позволяет максимизировать высоту слайдера:JS_Animated._How_to_prevent_slide_images_from_being_cut_off_on_the_mobile_views-1

Простые изменения CSS позволят сохранить изначальные пропорции изображений слайдера.

Для того чтобы изменить размеры слайдера для мобильных устройств, Вам необходимо сделать следующее:

  1. Откройте файл css/camera.css.js и прокрутите вниз страницы.

  2. Добавьте следующий код, который изменит размеры изображений для мобильных устройств и правильно разместит их в слайдере:

    			@media (max-width: 768px) {
    			.slider img {
    			width: 100% !important;
    			height: auto !important;
    			margin-left: 0 !important;
    			}
    			}
    		
  3. Добавьте следующий код, который изменит высоту слайдера для того, чтобы удалить свободное место под изображениями слайдера:

    			@media (max-width: 479px) {
    			.camera_wrap {
    			height: 126px !important;
    			}
    			}
    		
  4. Сохраните изменения в файле css/camera.css.js и загрузите его на сервер.

    Результат должен выглядеть следующим образом:

    JS_Animated._How_to_prevent_slide_images_from_being_cut_off_on_the_mobile_views-2

Вы можете также ознакомиться с детальным видео-туториалом ниже:

JS Animated. Как предотвратить обрезание изображений слайдера на экране мобильного телефона
 
Чат
We help you to choose the right product.
Начать чат