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

Discussion in 'Изменение шаблона (кастомизация)' started by Hwoarang7, Oct 5, 2015.

  1. Hwoarang7
    Offline

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

    Joined:
    Aug 7, 2015
    Messages:
    24
    Likes Received:
    3
    Gender:
    Male
    Всем привет!
    Собственно в чем заключается вопрос, нужен слайдер, который выставляется во всю ширину страницы, и принципиально, картинка не в зависимости от ширины окна должна оставалась по центру, а не прижималась к левому краю. Пример желаемого слайдера. Перебрал кучу разных слайдеров, но таких чтобы были как мне нужны, к сожалению нет, все они "респонсив" и когда сужаешь экран, они прижимаются к левому краю. Фишка слайдер который указан в моем примере, слайдер строиться из див-ов, а картинки находятся не в самих див-ах, как это собственно сделано у всех слайдеров, а картинка накладывается как background див-а, и поэтому когда сужаешь окно, картинка остается по центру, именно так, как мне нужно.

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

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

    OlegK Russian Joomla! Team Staff Member ⇒ Профи ⇐

    Joined:
    Jan 17, 2011
    Messages:
    7,812
    Likes Received:
    771
    Gender:
    Male
    Не знаю такого - центрируешь всю страницу по центру и слайдер не выходить из блока и по центру
     
  4. Hwoarang7
    Offline

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

    Joined:
    Aug 7, 2015
    Messages:
    24
    Likes Received:
    3
    Gender:
    Male
    Вы не до конца поняли, что я имел в виду. Вот здесь посмотрите на первом слайде я отметил в пайнте центр слайда, и теперь попробуйте сделать экран уже, Вы увидите что центральная зона останется справа, а должна быть по центру. Вариант чтобы слайдер под адаптивен не подходит, т.к. высота будет отличаться меняя свое соотношение в зависимости от ширины экрана.
     
    Last edited: Oct 6, 2015
  5. OlegK
    Offline

    OlegK Russian Joomla! Team Staff Member ⇒ Профи ⇐

    Joined:
    Jan 17, 2011
    Messages:
    7,812
    Likes Received:
    771
    Gender:
    Male
    ты с самого начала верстал шаблон?
    Убери
    Код (css):
    1. .sprocket-features-img-container {
    2.   min-width: 1920px !important;
    3. }

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

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

    Joined:
    Aug 7, 2015
    Messages:
    24
    Likes Received:
    3
    Gender:
    Male
    Убрал специально для Вас, показать, что получится вообще не о чем, я не просто так это поставил. Повторяю, нужно фиксированная высота слайдера при всех разрешениях/размерах окна. Как посмотрите, скажите, верну все на место
     
  7. OlegK
    Offline

    OlegK Russian Joomla! Team Staff Member ⇒ Профи ⇐

    Joined:
    Jan 17, 2011
    Messages:
    7,812
    Likes Received:
    771
    Gender:
    Male
    посмотрел.Перенес тему в Шаблоны
    --- добавлено: Oct 6, 2015, первое сообщение размещено: Oct 6, 2015 ---
    Только понял.Так это нужно тогда блок со слайдером вывести с общего блока - position:absolute
     
  8. Hwoarang7
    Offline

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

    Joined:
    Aug 7, 2015
    Messages:
    24
    Likes Received:
    3
    Gender:
    Male
    Увы, такой вариант с position:absolute уже пробовал, эффект такой же, как есть сейчас. Узнать бы, как сделано на том сайте из первого примера, там слайдер не самописный, интересно какая цмс-ка стоит, и что конкретно за слайдер они используют.
    --- добавлено: Oct 7, 2015, первое сообщение размещено: Oct 6, 2015 ---
    Решил вопрос вот так, если кому интересно как был сделан такой слайдер, вкратце - подключались библиотеки mootools, и слайдер был сверстан с нуля и вставлен в виде html-модуля. Сами слайды сделаны как background div-ов (впринципе, я знал такой вариант решения слайдера, просто хотел сделать слайдер по простому, в виде подключенного расширения, и чтобы слайды можно было легко добавлять, т.к. видел на первом примере слайдер сделанный в виде расширения сайта, но как говориться лучше рабочий вариант, чем вообще не какого).

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

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

    Joined:
    Nov 11, 2015
    Messages:
    1
    Likes Received:
    0
    Gender:
    Female
    Очень интересно, как раз сейчас решается вопрос со слайдером если можно ваш мануал почитать. Заранее благодарю)))
     

Share This Page

Loading...