Опубликовано: 18 ноября 2015
Как сделать что бы изображения в слайдере не обрезались? Есть решение
При загрузке изображений в слайдер на главной странице (отображение промо карточек). Слайдер обрезает края (сверху или снизу).
Как сделать, что бы изображение не обрезалось?
Комментарии (10)
* Внимание! данное описание предназначено для шаблона версии 1.1.0
* для версии 1.2.0
Описание текущей реализации
Изображение для слайдера на главной, используется как фон.
Ширина каждого из слайдов определена заранее и размеры изображений не учитываются (фон масштабируется но по правилу "background-size:cover;" - http://htmlbook.ru/css/background-size)
Цель подобной реализации - одинаковые размеры всех слайдов вне зависимости от размеров изображений.
Как переделать слайдер?
Конечно же можно переделать слайдер таким образом, что бы изображения не обрезались. Но в этом случае Вам придется все изображения подогнать под один определенный размер - иначе каждый слайд будет изменять высоту всего слайдера, влияя на расположение последующих элементов на странице.
в файле "homepage.slider.html" (магазин-витрина-шаблоны)
1. в самом начале файла вставьте конструкцию
<style type="text/css">
.slider-homepage .bx-wrapper .bx-viewport{
height:auto !important;
}
.slider-homepage .bx-viewport a{
margin-bottom:0;
}
ul.homepage-bxslider{
max-height:none;
}
</style>
2. замените код
<li style="background-image: url('{$promo.image}');">
<a href="{$promo.link|escape}">
{if !empty($promo.title)}<h3>{$promo.title|escape}</h3>{/if}
{if !empty($promo.body)}<p>{$promo.body}</p>{/if}
</a>
</li>
на
<li style="position:relative; max-height:none;">
<a href="{$promo.link|escape}" style=" height:auto;">
<div style="position:absolute; width:100%;">
{if !empty($promo.title)}<h3>{$promo.title|escape}</h3>{/if}
{if !empty($promo.body)}<p>{$promo.body}</p>{/if}
</div>
<img src="{$promo.image}" style="width:100%;" />
</a>
</li>
Формат изображений
1. сделайте все изображения одинакового размера
а) масимально возможная ширина изображений - 1258px (обязательно одинаковая ширина у всех изображений)
б) высота произвольная но одинаковая для всех изображений
2. для интернет используются изображения с расширением: png, jpg, gif http://wm-azbook.ru/index.php/znachenija/optimizat...
А как сделать слайдер, что бы был такой же, как в шаблоне удобная покупка. Мне кажется это самый удачный слайдер.
Уточните
С динамикой, пример
ural-suvenir.ru
такой динамики нет в библиотеке слайдера на теме "выгодная покупка"
но в шаблоне нет закрытых участков кода - Вы можете заменить библиоетку слайдера на любою другую
инструкцию не напишу - т.к.
1. инструкции по вставке слайдеров есть на сайтах разработчиков
2. текст описания получится очень объемным - это может быть выполнено только в качестве доп. договоренности
* если наши клиенты предложат понравившийся слайдер и за него проголосуют хотя бы 10%, то в будущих версиях шаблона, мы заменим библиотеку слайдера
И как сделать голосование?
В этом топике каждый желающий может предложить понравившийся слайдер.
я напишу подойдет он или не подойдет.
Другие зарегистрированные пользователи форума смогут поддержать то или иное предложение
Игорь, мой комментарий и ваш ответ пропали, вот адрес сайта http://z-nails.ru/
В файле homepage.slider.html удалите строки:
.slider-homepage .bx-wrapper .bx-viewport{ height:auto !important; }Для шаблона версии 1.2.0
В файле "homepage.slider.html" (магазин-витрина-шаблоны)
замените строку
imageBackground=true
на
imageBackground=false
Сделала как вы сказали для версии 1.2.0. заменила строку на imageBackground=false. Сайт с сайтбаром. Картинки слайдера 938 х 400 px.
Картинки растягиваются автоматически до 938 х 547 px, как это исправить, чтобы не растягивалось?
на почту (kolmakov.igor@gmail.com) напишите адрес сайта и доступ в админку
Какой сейчас лучше размер изображений использовать для слайдера, для последней версии шаблона чтобы не обрезалось и не растягивалось? Есть разница в размере картинок с сайдбаром и без?
ширина 1258, высота любая ! но одинаковая для всех изображений
* масштабироваться будет в зависимости от ширины экрана и наличия/отсувствия левого сайтбара