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

[Anastasiya617]

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

[OldAine]

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

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

 

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

 

Пример:

|  1200px шапка   |

|  1200px тело      |

|  1200px подвал  |

 

Вам нужно:

|  1200px шапка   |

←  100% слайдер →

|  1200px тело      |

|  1200px подвал  |

 

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

 

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

 

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

[Anastasiya617]

у меня шаблон next-default там по идее слайд на всю ширину, но у меня почему 1200 епта

[rodigy]

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

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

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

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

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

- закрыть   container-fluid

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

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

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

 

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

Змінено 6 серпня 2016 користувачем rodigy

[Anastasiya617]

rodigy, спасибо, так если у меня в шаблоне слайд на всю ширину , а у меня становится 1200 и еще пару деталей по другому, я что ставлю не так или?

[afwollis]

у меня шаблон next-default там по идее слайд на всю ширину, но у меня почему 1200 епта

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

[rodigy]

anastasiya617

дайте ссылку на ваш сайт

Змінено 6 серпня 2016 користувачем rodigy

[Anastasiya617]

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

да я просто вопрос скопипастила)

[Anastasiya617]

anastasiya617

дайте ссылку на ваш сайт

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

[Anastasiya617]

anastasiya617

дайте ссылку на ваш сайт

http://kovkarb.by/index.php?route=common/home     

вот все с нуля переустановила и вот чооо

[rodigy]

http://kovkarb.by/index.php?route=common/home     

вот все с нуля переустановила и вот чооо

исходя из демо темы, слайдер нужно ставить в Post Header лайот

[Anastasiya617]

исходя из демо темы, слайдер нужно ставить в Post Header лайот

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

[ArtemPitov]

я делаю это 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);
});

Как то так 

[HyperLabTeam]

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

мда...

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

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

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 для вывода карт на всю ширину ...или используйте на своё усмотрение.

 

Змінено 7 серпня 2016 користувачем AWARO

[Anastasiya617]

мда...

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

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

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

[HyperLabTeam]

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

В схемах.

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

Змінено 7 серпня 2016 користувачем AWARO

[Anastasiya617]

Я просто опен карт изучаю два дня, е мо е)

[Tom]

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

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

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

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

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

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

 

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

[Anastasiya617]

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

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

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

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

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

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

 

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

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

[HyperLabTeam]

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

https://opencartforum.com/topic/58491-%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE%D0%BA%D1%83%D1%80%D1%81-%D0%BF%D0%BE-%D1%81%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D1%8E-%D0%B8%D0%BD%D1%82%D0%B5%D1%80%D0%BD%D0%B5%D1%82-%D0%BC%D0%B0%D0%B3%D0%B0%D0%B7%D0%B8%D0%BD%D0%B0-%D0%BD%D0%B0-opencart/

[yegorulya]

07.08.2016 в 13:21, Tom сказал:

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

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

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

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

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

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

 

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

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

[Tom]

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

[yegorulya]

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

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

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

[yegorulya]

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

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

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

ссылка ниже

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