Anastasiya617

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

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

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

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


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

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

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

 

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

 

Пример:

|  1200px шапка   |

|  1200px тело      |

|  1200px подвал  |

 

Вам нужно:

|  1200px шапка   |

←  100% слайдер →

|  1200px тело      |

|  1200px подвал  |

 

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

 

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

 

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

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


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

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

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


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

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

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

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

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

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

- закрыть   container-fluid

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

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

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

 

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

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

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


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

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


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

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

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

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


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

anastasiya617

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

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

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


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

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

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

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


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

anastasiya617

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

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

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


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

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

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

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

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


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

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

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

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


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

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

Как то так 

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


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

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

мда...

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

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

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

 

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

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


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

мда...

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

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

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

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


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

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

В схемах.

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

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

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


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

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

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

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

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

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

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

 

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

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


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

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

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

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

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

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

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

 

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

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

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


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

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


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

Для публикации сообщений создайте учётную запись или авторизуйтесь

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

Создать учетную запись

Зарегистрируйте новую учётную запись в нашем сообществе. Это очень просто!

Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.

Войти


  • Последние посетители   0 пользователей онлайн

    Ни одного зарегистрированного пользователя не просматривает данную страницу