Адаптированные изображения в Слайдере - SlidesJs
/ Просмотров: 6051

Подскажите пожалуйста, как можно адаптировать изображения в слайдере MaxSite CMS SlidesJs?
Дело в том, что изображения помещённые в слайдер при масштабировании начинаю обрезаться:
Пробовал различные способы CSS (max-width)- но они не срабатывают.
Может кто то сталкивался с подобной настройкой слайдера?
2015-02-21 в 13:21:27
Скорее всего вы неправильно выбрали точку приложения ваших модификаций в css или вы неверно понимаете (и ожидаете от него) задачу свойства max-width.
2015-02-21 в 13:27:30
2015-02-21 в 15:57:04
Сайт пока на локальном сервере, хотелось бы использовать именно SlidesJs, пробовал max-width:100% в разных сочетаниях. Nivo-Slides адаптивен, но не так гибок как SlidesJs и в прошлых проектах приходилось останавливаться на нём. Чуть позже выложу сайт в сеть.
2015-02-21 в 16:05:14
lider30, попробуйте чуть изменить компонент файл компонента slidesjs.php строка 111:
css:
2015-02-21 в 16:17:58
Причём, когда в опциях слайдера оставляю одно изображение и применяю к блоку соответствующие настройки CSS, то слайдер начинает адаптироваться: http://pikucha.ru/iecMY http://pikucha.ru/iecMZ
Как только добавляю второй слайдер - изображение сползает, обрезается
2015-02-21 в 16:25:48
А подробнее про
Что касается изображений
2015-02-21 в 16:38:40
Когда в опциях слайдера SlidesJ в панели админа добавляю слайдер - когда их становится больше одного, адаптивность при:
исчезаетВышеперечисленные манипуляции проблемы не решают, но спасибо за вашу отзывчивость.
Работаю над дизайном, как сайт появится в сети - будем разговаривать предметно
2015-02-21 в 16:47:08
Чуть мозг не сломал...
Может речь идёт про добавление слайда, а не слайдера?
2015-02-21 в 16:48:43
Согласен - не правильно выразился - СЛАЙД.
2015-02-21 в 16:50:41
Коротко по коду.
height: auto; -- будет автоматом расширяться картинка по высоте относительно ширины.
max-width: 100%; -- смысл тут какой заложен?
по большому счету нет ограничений, чтобы картинка вписалась в рамки
2015-02-21 в 17:02:03
height: auto - это не окончательно решение, основное это max-width: 100% - задаёт ограничение при увеличении масштаба блока с картинкой не давая ей выпадать соответствуя ширине его контейнера, обрезаться.
Когда слайд один, то ограничение срабатывает, когда добавляю второй слайд ограничение не действует.
2015-02-21 в 17:12:34
По моему скромному разумению, слайдер предполагает картинки определённого размера. Возможно, имеет смысл изначально их подготовить. Так же задать жестко размеры в css. И тогда не будет заметно, если они будут растягиваться/сжиматься на несколько px.
Но это сугубо моё имхо, т.к. не хватает данных по конечному использованию слайдера.
Можно покопаться в стилях SlidesJs слайдера -- http://hospek.com
2015-02-21 в 17:24:19
http://hospek.com - лишён адаптивности. С изображениями поколдовать можно конечно и вывести слайдер на переломном моменте (когда существенная часть картинки начнёт обрезаться, к примеру на 1000 px) в display: none, но буду стремиться к гибкости. Пока разговор получается не о чём, выложу сайт - дам знать.
2015-02-21 в 17:31:57
Адаптивности под что?
Ну да, там с 800 до 660px доходит, дальше ограничение ширины самого шаблона стоит.
2015-02-21 в 17:42:02
Адаптивности по мобильные устройства. Проверьте сайт hospek.com на http://ami.responsivedesign.is
2015-02-21 в 17:58:03
Телефон и гугл инструменты разработчика совсем другое показывают. Это так, для инфы
2015-02-21 в 18:20:58
Гугл инструмент брешит: http://pikucha.ru/iecPx
На смартофоне отображается не верно.
2015-02-22 в 12:00:45
медиа запросы наш костыль для адаптивности. А грамотно продуманный дизайн на уровне css решит все проблемы.
http://www.responsinator.com/?url=http://altermetal.net
2015-02-22 в 12:07:20
lider30 flexslider мне лучше лично. Я его юзаю. отличий особо нет.
2015-02-25 в 16:38:14
1. Подскажите пожалуйста, как можно вставлять image-nivo-slider в конкретном месте выборочной страницы? Если это можно сделать с помощью УШКИ, то какой код нужно взять для вставки при формировании УШКИ?
2. И как можно создать несколько разных слайдеров image-nivo-slider для использования? - получается нужно создать копию компонента image-nivo-slider с другими ID в коде и для него опции?
2015-02-25 в 16:43:50
Дмитрий, просто так в любое место страницы nivo slider не вставишь. Я делал плагин для таких задач. Там можно было специальный бб-код использовать для записей и виджет для сайдбара. Уже почти опубликовал эту разработку, но отвлекли
Может за время праздников опубликую. Ну или может кто-нибудь подскажет сейчас как иначе решить вашу задачу.
2015-02-26 в 01:35:37
Задача у меня просто не стандартная: с выводом image-nivo-slider на главной понятно - вывели. Теперь нужно image-nivo-slider с подобным расположением, со своим набором изображений вывести на странице с записью.
Я так понимаю:
1. Клонируем компонент
2. В опцию клонированного image-nivo-slider добавляем окно с указанием ID записи, либо этот ID нужно прописать где то в теле компонента?
2015-02-27 в 10:24:47
Дмитрий, нашёл таки код, которым я заставил slidejs стать адаптивным. У меня этот код размещается в файле \css-less\components\slidesjs.less папки шаблона.
Для совсем мелких разрешений решили выключить слайдер, ибо совсем уж картинки измельчали.
В общем, надеюсь, что вам мой код поможет.
2015-02-27 в 14:26:49
Илья я ещё до использования компилятора less не дорос, всё понял кроме
div.r2 {
bottom: 0;
}
Это что описываем в CSS?
2015-02-28 в 04:19:00
Дмитрий, LESS - это продвинутая версия css. Освоить его можно буквально за час, если знаете css и вам знакомо программирование хотя бы на php. Большая часть less-кода выглядит именно как css (я про приведённый вами фрагмент). Ну разве ещё только добавляется вложенность (позволяет сократить описание селекторов) и появляются переменные, а также подобие функций. В общем, очень рекомендую потратить немного времени на освоение.