• Страница 1 из 1
  • 1
Модератор форума: JonMagon  
Сообщество uCoz » Вебмастеру » JavaScript, Flash и прочие технологии » Слайдер 1920px с центрированием изображения
Слайдер 1920px с центрированием изображения
Сестра-Таланта
Сообщений: 255
Репутация: 80

Сообщение # 1 | 23:13:20
Голова изломана, все варианты перебраны, но итоги плачевны...
Поэтому обращаюсь со слезами и мольбой о помощи :)

Жизненно необходим слайдер с позиционированием на всю ширину экрана (1920px x 520px) НО что бы при уменьшении ширины экрана изображение было центровано.

Все что бы не было придумано изображение остается прижато к левому краю :(((

Если есть рабочий слайдер, дайте пожалуйста, умаляю sad
Solaris(Olga)
Сообщений: 342
Репутация: 240

Сообщение # 2 | 01:06:41
Как я понимаю, изображение не должно ужиматься на небольших разрешениях и растягиваться на 100% ширины экрана, ибо будет слишком мелким... А вместо этого необходимо его просто сдвинуть влево и вверх за границу слайдера... как бы обрезать(?) Готовый слайдер будет найти не просто, но знаю, как поправить любой имеющийся.

1. Слайды нужно поместить в контейнер, которому задать position:relative.
2. В самих же слайдах задаем position:absolute.
3. После этого можно двигать слайды в любую сторону, вправо, влево, вверх, вниз. Причем в процентных единицах, дабы было больше адаптивности. Для этого используем top и left.
4. overflow:hidden нужно для того, чтобы "обрезать" все лишнее, что выходит за границы слайдера.

Код
.conteyner{overflow:hidden;position:relative;}
.conteyner img{position:absolute;top:-20%;left:-30%;}


Код
<p class="conteyner"><img src="ссылка" /></p>


В этом примере, на небольших экранах слайд будет сдвинут влево на 30% и вверх на 20%. Тем самым картинка центрируется + медиа-запросы и все получится!
Что еще важно - картинкам нужно задать max-width, чтобы привести их к единому размеру.
Также подобрать под основные разрешения экрана оптимальные проценты top let. Промежуточными разрешениями заморачиваться не стоит. Возможно слайды будут немного "плавать" - центр картинки незначительно смещаться на промежуточных разрешениях, но ничего страшного - посетитель сайта ничего не поймет, т.к. выглядит все очень даже здорово! Может есть решение и изящнее, но я делала так.

Другой возможный вариант, это вставлять слайды не тэгом <img> а фоном background в CSS. Это позволит с помощью медиазапросов загружать разные картинки для разных разрешений экранов. Плюсы - картинки будут хорошо подходить под любое разрешение экрана. Для мобильных можно подгружать легкие картинки, а не те, которые на 1900 px smile Минусы - нужно делать несколько картинок для каждого слайда... Но зато будет нормально и оптимизировано.
Чтобы все получилось, небольшую css-ку нужно встроить в страницу с медиазапросами, а не прописывать во внешнем файле. Тогда будет возможность писать так:

Код
@media screen and (min-width:800px)
{
.conteyner-slide { background:url($IMG_URL2$); }
}

То есть в зависимости от размера экрана выводить разные картинки системными кодами:

$IMG_URL1$ - оригинал
$IMG_URL2$ - для средних экранов
$IMG_URL3$ - для маленьких экранов

$IMG_SMALL_URL1$ - было бы удобно использовать, но это не ваш вариант... С другой стороны, можно подумать над использованием $IMG_SMALL_URL2 вместо $$IMG_URL3$. Тогда достаточно будет закачать 2 картинки - оригинал и для средних экранов.

В общем варианты есть. Но если вам нужно именно готовое решение, то помочь ничем не смогу. Если бы дали сразу вариант, который нужно доделать, то легче было бы сделать, чем долго все это расписывать, а брать любой слайдер на выбор было бы странно smile
Сообщение отредактировал Solaris(Olga) - Четверг, 30 Июн 2016, 03:04:38
Сестра-Таланта
Сообщений: 255
Репутация: 80

Сообщение # 3 | 09:26:08
Solaris(Olga), спасибо за развернутый ответ. Но к сожалению не подошел первый вариант, а второй не может подходить для слайдера с несколькими изображениями :(

Может есть у кого готовый вариант?
Поделитесь пожалуйста.
Сообщество uCoz » Вебмастеру » JavaScript, Flash и прочие технологии » Слайдер 1920px с центрированием изображения
  • Страница 1 из 1
  • 1
Поиск: