• 0
tefery

Как растянуть слайдер на всю секцию?

    Вопрос

    tefery

    Есть футер и есть шапка. Футер не фиксированный. Между ними контент. Первый экран контента один большой слайдер. Как его растянуть на всю секцию первого экрана? Шаблон адаптивный. Максимальная ширина контента 1200px.

    Пробую прикрутить jquery плагины со слайдерами, но как их вытянуть на высоту 100%? Думал через абсолют, но во всех слайдерах чёрт ногу сломит и где-то глубоко в коде скриптом задаются стили и позиционирование. И  не факт, что абсолютом заведётся.

    То есть в итоге задача растянуть по высоте и ширине слайдер или бэкграунд слайдера, что бы он был на всю ширину экрана и резиновый по высоте. Но контент слайдера должен быть максимально по ширине 1200px при этом бэкграунд на всю ширину. 

    Писать свой слайдер как-то не комильфо. Может у кого-то есть идеи или кто-то знает наверняка как это сделать?

    Громов-главная)2-экран.jpg

    Поделиться сообщением


    Ссылка на сообщение
    Поделиться на других сайтах

    5 ответов на этот вопрос

    Рекомендуемые сообщения

    • 0
    alejandro13

    Дайте картинкам в слайдере: width:100%; и они растянутся на всю ширину родителя

    Поделиться сообщением


    Ссылка на сообщение
    Поделиться на других сайтах
    • 0
    tefery
    Только что, alejandro13 сказал:

    Дайте картинкам в слайдере: width:100%; и они растянутся на всю ширину родителя

    Ну во первых не растянутся, потому что количество картинок и их ширина задаются где то в глубине скрипта слайдера. Если в настройках плагина выставить один итэм на экран, то, конечно, да. Во-вторых у меня больше проблемы с высотой, а так же с контентом, который должен быть не больше 1200px в то время как бэкраунд должен растягиваться на всю ширину. Но это решаемо. Хотя, конечно, хз как стрелки слайдера настроить под эту ширину. Основная проблема с высотой и с тем, что она должна быть на весь первый экран, исключая хэдер. Не могу найти такой слайдер, что бы задать ему min heght 100% или растянуть абсолютом и это бы сработало.

    Изменено пользователем tefery

    Поделиться сообщением


    Ссылка на сообщение
    Поделиться на других сайтах
    • 0
    alejandro13

    А вы можете этот проект на какой-то хостинг залить, потому что не видя кода вряд ли удастся решить вашу проблему?

     

    Поделиться сообщением


    Ссылка на сообщение
    Поделиться на других сайтах
    • 0
    tefery

    https://yadi.sk/d/j4R3wdGT34SBzv

    Я там потёр свои потуги, оставил только голый слайдер. И то, я не пойму никак, почему он выглядит таким образом при подключении. Слайдер использовался вот этот http://sachinchoolur.github.io/lightslider/

    Чуть подправил скрипт и перезалил.

    Пока до кона не уверен, но кажется у меня получилось. Теперь думаю, как стрелки сделать адаптивными на максимальную ширину 1200px

    Поделиться сообщением


    Ссылка на сообщение
    Поделиться на других сайтах

    Создайте аккаунт или войдите в него для комментирования

    Вы должны быть пользователем, чтобы оставить комментарий

    Создать аккаунт

    Зарегистрируйтесь для получения аккаунта. Это просто!

    Зарегистрировать аккаунт

    Войти

    Уже зарегистрированы? Войдите здесь.

    Войти сейчас

    • Войти через Facebook
    • Войти через Twitter
    • Войти через Microsoft
    • Войти через LinkedIn
    • Войти через Google

    • Похожие публикации

      • qa24
        Автор: qa24
        Здравствуйте!
        Оцените пожалуйста верстку. Если есть ошибки, напишите как правильнo будет.
        Ссылка на сайт  wor.swema.ru
      • начинающий верстаг
        Автор: начинающий верстаг
        дайте оценку хотя бы по 5 ти бальной шкале portfoliox.ru/test
      • VeraVostro
        Автор: VeraVostro
        При настройке Masonry возникает проблема:

        ширина блоков регулируется отлично (и в %, и в px), но, когда возникла необходимость сделать один из блоков в 2 раза выше остальных блоков - низкие блоки не занимают пустое место рядом с высоким блоком и получается то что на картинке ниже.
        Перепробовала, как мне кажется, все: в инициализации указывала ширину колонки в пикселях, в процентах, добавляла в код grid-sizer, убирала grid-sizer...........

        Методом тыка поняла что если увеличить у меня в css ширину блока .grid-item - то колонок становится две - и в таком случае Masonry красиво все располагает.

        Код здесь (постаралась оставить только суть).

    • advertisement_alt
    • advertisement_alt
    • advertisement_alt