Слайдер во всю ширину с выравниванием по центру

Тема в разделе "Изменение шаблона (кастомизация)", создана пользователем Hwoarang7, 05.10.2015.

  1. Hwoarang7
    Offline

    Hwoarang7 Недавно здесь

    Регистрация:
    07.08.2015
    Сообщения:
    24
    Симпатии:
    3
    Пол:
    Мужской
    Всем привет!
    Собственно в чем заключается вопрос, нужен слайдер, который выставляется во всю ширину страницы, и принципиально, картинка не в зависимости от ширины окна должна оставалась по центру, а не прижималась к левому краю. Пример желаемого слайдера. Перебрал кучу разных слайдеров, но таких чтобы были как мне нужны, к сожалению нет, все они "респонсив" и когда сужаешь экран, они прижимаются к левому краю. Фишка слайдер который указан в моем примере, слайдер строиться из див-ов, а картинки находятся не в самих див-ах, как это собственно сделано у всех слайдеров, а картинка накладывается как background див-а, и поэтому когда сужаешь окно, картинка остается по центру, именно так, как мне нужно.

    Собственно, именно такой слайдер нужен для сайта, в котором слайдер будет во всю ширину экрана (1920 пиксов) и фиксированной высотой, картинки будут тоже шириной 1920 пиксов, но основная информация слайда/картинки будет находиться ровно по центру и ширина этого сектора основной инфы будет стандартной 960 пиксов. Т.е. если человек заходит с ноутбука, он увидит основную информацию слайда, и не много продолжение слайда по бокам, человек у которого 1920 разрешение, будет видеть весь слайд. Что то подобное сделано вот здесь, но там по боком просто за ретушировали фоном определенным для слайда цветом, я же хочу чтобы это не был фон, а было продолжение слайда, сама концепция и дизайн кстати у них идеален для моих целей, но реализация просто фон определенного цвета не то, хотя если кто знает есть ли слайдеры в точности такой же слайдер как на втором примере на джумле, было бы тоже не плохо.

    Заранее благодарю всех людей не равнодушных к чужой проблеме, благодарю.
     
  2.  
  3. OlegK
    Offline

    OlegK Russian Joomla! Team Команда форума ⇒ Профи ⇐

    Регистрация:
    17.01.2011
    Сообщения:
    7 812
    Симпатии:
    771
    Пол:
    Мужской
    Не знаю такого - центрируешь всю страницу по центру и слайдер не выходить из блока и по центру
     
  4. Hwoarang7
    Offline

    Hwoarang7 Недавно здесь

    Регистрация:
    07.08.2015
    Сообщения:
    24
    Симпатии:
    3
    Пол:
    Мужской
    Вы не до конца поняли, что я имел в виду. Вот здесь посмотрите на первом слайде я отметил в пайнте центр слайда, и теперь попробуйте сделать экран уже, Вы увидите что центральная зона останется справа, а должна быть по центру. Вариант чтобы слайдер под адаптивен не подходит, т.к. высота будет отличаться меняя свое соотношение в зависимости от ширины экрана.
     
    Последнее редактирование: 06.10.2015
  5. OlegK
    Offline

    OlegK Russian Joomla! Team Команда форума ⇒ Профи ⇐

    Регистрация:
    17.01.2011
    Сообщения:
    7 812
    Симпатии:
    771
    Пол:
    Мужской
    ты с самого начала верстал шаблон?
    Убери
    Код (css):
    1. .sprocket-features-img-container {
    2.   min-width: 1920px !important;
    3. }

    Все блоки , кроме слайдера имеют фиксированную ширину.
     
  6. Hwoarang7
    Offline

    Hwoarang7 Недавно здесь

    Регистрация:
    07.08.2015
    Сообщения:
    24
    Симпатии:
    3
    Пол:
    Мужской
    Убрал специально для Вас, показать, что получится вообще не о чем, я не просто так это поставил. Повторяю, нужно фиксированная высота слайдера при всех разрешениях/размерах окна. Как посмотрите, скажите, верну все на место
     
  7. OlegK
    Offline

    OlegK Russian Joomla! Team Команда форума ⇒ Профи ⇐

    Регистрация:
    17.01.2011
    Сообщения:
    7 812
    Симпатии:
    771
    Пол:
    Мужской
    посмотрел.Перенес тему в Шаблоны
    --- добавлено: 06.10.2015, первое сообщение размещено: 06.10.2015 ---
    Только понял.Так это нужно тогда блок со слайдером вывести с общего блока - position:absolute
     
  8. Hwoarang7
    Offline

    Hwoarang7 Недавно здесь

    Регистрация:
    07.08.2015
    Сообщения:
    24
    Симпатии:
    3
    Пол:
    Мужской
    Увы, такой вариант с position:absolute уже пробовал, эффект такой же, как есть сейчас. Узнать бы, как сделано на том сайте из первого примера, там слайдер не самописный, интересно какая цмс-ка стоит, и что конкретно за слайдер они используют.
    --- добавлено: 07.10.2015, первое сообщение размещено: 06.10.2015 ---
    Решил вопрос вот так, если кому интересно как был сделан такой слайдер, вкратце - подключались библиотеки mootools, и слайдер был сверстан с нуля и вставлен в виде html-модуля. Сами слайды сделаны как background div-ов (впринципе, я знал такой вариант решения слайдера, просто хотел сделать слайдер по простому, в виде подключенного расширения, и чтобы слайды можно было легко добавлять, т.к. видел на первом примере слайдер сделанный в виде расширения сайта, но как говориться лучше рабочий вариант, чем вообще не какого).

    Если кому интересно более детально, как был сделан слайдер, пишите и я скину подробный мануал
     
  9. Offline

    Tanyk75 Недавно здесь

    Регистрация:
    11.11.2015
    Сообщения:
    1
    Симпатии:
    0
    Пол:
    Женский
    Очень интересно, как раз сейчас решается вопрос со слайдером если можно ваш мануал почитать. Заранее благодарю)))
     

Поделиться этой страницей

Загрузка...