Jump to content
Search In
  • More options...
Find results that contain...
Find results in...

[Решено] не могу сделать слайдер на всю ширину/высоту


Recommended Posts

Делаю сайт, встала одна проблема - не могу сделать слайдер на всю ширину/высоту. Перепробовал все, что знаю. Подскажите, пожалуйста, решение задачи!

Link to comment
Share on other sites


Делаю сайт, встала одна проблема - не могу сделать слайдер на всю ширину/высоту. Перепробовал все, что знаю. Подскажите, пожалуйста, решение задачи!

Чтобы сделать слайдер на 100% его либо нужно вынести отдельно за структуру модульной системы, либо создать новое место для размещения модуля (где потом будет слайдер) и сверстать всё так, чтобы было на 100%.

 

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

 

Пример:

|  1200px шапка   |

|  1200px тело      |

|  1200px подвал  |

 

Вам нужно:

|  1200px шапка   |

←  100% слайдер →

|  1200px тело      |

|  1200px подвал  |

 

Короче менять html.

 

Ещё можно сверстать через абсолютные стили, но это сложно и ненадёжно.

 

А лучше всего купить подходящий шаблон, а потом его доделывать.

  • +1 1
Link to comment
Share on other sites

А лучше всего купить подходящий шаблон, а потом его доделывать.

зачем же сразу покупать шаблон, пусть учатся люди, пригодиться еще

Надо всего то:

- закрыть div c классами container , row  и еще предыдущие если нужно

- открыть  div c классом container-fluid , сделать всю необхидимую разметку что нужно для слайдера

- закрыть   container-fluid

- и снова возвращаем все как было, открываем container , row и т.д.

ну и конечно же  поправить стили самого слайдера

(применимо к стандартному шаблону)

 

или поискать модуль слайдера на всю ширину

Edited by rodigy
Link to comment
Share on other sites


rodigy, спасибо, так если у меня в шаблоне слайд на всю ширину , а у меня становится 1200 и еще пару деталей по другому, я что ставлю не так или?
Link to comment
Share on other sites


я делаю это js-ом, получаться гибкий вариант

 

сам слайдер 

var slider = $('#slider-<?= $module; ?>'); 

сначала выносим все за контейнер

$('body').append(slider); 

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

<?= $top;?> - это дополнительный отступ если нужен 

var offsetTop  = selector.outerHeight() + selector.offset().top + <?= $top;?>;

Добавляем слайдер в нужное место 

slider.css({'position' : 'absolute', 'top' : offsetTop, 'left' : 0, 'right' : 0});

Теперь нам нужна динамическая подложка 

 

Измеряем высоту слайдера 

var hSlider = slider.outerHeight(true);

Добавляем подложку после селектора 

selector.after('<div style="height:'+ hSlider +'px" id="wrap-<?= $module; ?>"></div>');

Добавляем динамику для подложки 

$(window).resize(function () {
  setTimeout(function () {
    hSlider = slider.outerHeight(true);
    offsetTop  = selector.outerHeight() + selector.offset().top + <?= $top;?>;

    $('#wrap-<?= $module; ?>').css({'height' : hSlider});
      slider.css({'top' : offsetTop});
    }, 300);
});

Как то так 

  • +1 1
Link to comment
Share on other sites

а для тупых более подробно объясните плиз

мда...

в шаблоне реализованы две дополнительные позиции

нужно только внимательно прочитать его описание

https://opencartforum.com/files/file/3126-next-default-%D1%88%D0%B0%D0%B1%D0%BB%D0%BE%D0%BD-%D0%B4%D0%BB%D1%8F-ocstore-21021/

 

- Позиция Post Header для вывода слайдера на всю ширину экрана ...или используйте на своё усмотрение.

- Позиция Pre Footer для вывода карт на всю ширину ...или используйте на своё усмотрение.

 

Edited by AWARO
  • +1 1
Link to comment
Share on other sites


мда...

в шаблоне реализованы две дополнительные позиции

нужно только внимательно прочитать его описание

Я ЭТО ПОНИМАЮ, НО XT ТО ТУПЛЮ И НЕ МОГУ ДОГНАТЬ ГДЕ И ЧО, сори за тупость

Link to comment
Share on other sites


Я ЭТО ПОНИМАЮ, НО XT ТО ТУПЛЮ И НЕ МОГУ ДОГНАТЬ ГДЕ И ЧО, сори за тупость

В схемах.

надеюсь вы блондинка..))

Edited by AWARO
Link to comment
Share on other sites


Анастасия с кодовым номером 617.Ваша проблема = вашей не внимательности.

Откройте в админке  

Дизайн(иконка дисплея) - Схемы

Раз речь о главной странице,то открываем  Главная (в английской версии Home)

Добавляйте ваш слайдер

В колонке Расположение  помимо Право/Лево,Верх/Низ в шаблоне добавлено расположение Post Header(на всю ширину).

 

Вот и вся загадка....

  • +1 3
Link to comment
Share on other sites

Анастасия с кодовым номером 617.Ваша проблема = вашей не внимательности.

Откройте в админке  

Дизайн(иконка дисплея) - Схемы

Раз речь о главной странице,то открываем  Главная (в английской версии Home)

Добавляйте ваш слайдер

В колонке Расположение  помимо Право/Лево,Верх/Низ в шаблоне добавлено расположение Post Header(на всю ширину).

 

Вот и вся загадка....

вот именно такого ответа я и ждала) благодарствую) 

Link to comment
Share on other sites


  • 6 years later...
07.08.2016 в 13:21, Tom сказал:

Анастасия с кодовым номером 617.Ваша проблема = вашей не внимательности.

Откройте в админке  

Дизайн(иконка дисплея) - Схемы

Раз речь о главной странице,то открываем  Главная (в английской версии Home)

Добавляйте ваш слайдер

В колонке Расположение  помимо Право/Лево,Верх/Низ в шаблоне добавлено расположение Post Header(на всю ширину).

 

Вот и вся загадка....

А в версии 3.0.3.7 как можно сделать слайдер на всю ширину экрана? - только лишь слайдер, а не весь сайт внизу за ним.

Link to comment
Share on other sites


19.01.2023 в 09:50, Tom сказал:

Путём вёрстки или установки дополнений , которые позволят это сделать.

Не знаете случайно модулей?

Link to comment
Share on other sites


19.01.2023 в 12:09, yegorulya сказал:

Не знаете случайно модулей?

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

ссылка ниже

https://webocreation.com/opencart-free-extension-to-add-full-width-position-in-layout/

Link to comment
Share on other sites


Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...

Important Information

On our site, cookies are used and personal data is processed to improve the user interface. To find out what and what personal data we are processing, please go to the link. If you click "I agree," it means that you understand and accept all the conditions specified in this Privacy Notice.