Как указать путь к css файлу в js?

Question

[Михаил]

Всем здравствуйте! Проблема в следующем, делал верстку и использовал карусель layerslider, в верстке работало все нормально, перенес шаблон на yiI2 подключил все скрипты и стили, а карусель отображаться перестала, мое подозрение падает на параметр skinsPath, который указывает путь к файлу со стилями для работы карусели. Вопрос в том, как правильно указать путь к файлу со стилями?

$('#layerslider').layerSlider({
    autoStart: true,
    responsive:true,
    responsiveUnder: 1280,
    layersContainer: 1280,
    hoverPrevNext: false,
    skin: 'fullwidth',
    skinsPath: '/css/skins/',
    showCircleTimer: false,
    hideOnMobile: false,
    navStartStop: false,
    navButtons: false
});

Comments

[Максим Тимофеев]

как правильно указать путь к файлу со стилями?

а где у Вас файл со стилями? Я сегодня без магического шара. Вселенная не подсказывает куда Вы его положили.

[Михаил]

Максим Тимофеев, файл со стилями находится по пути web/css/skins/fullwidth/skin.css, дополнительным параметром fullwidth передается чуть выше в параметре skin, в параметре skin можно указать и другие значения, которые также будут вести к файлу skin.css. Повторюсь, но с тем кодом что я привел выше, в верстке данная карусель работала, а когда перенес на yii2, то работать уже перестала.

[Максим Тимофеев]

Михаил Балагура, Откройте консоль, там наверняка есть ошибка загрузки и путь по которому плагин пытается взять стили, соответственно от этого и надо плясать.
Но по логике должно быть
skinsPath: '/css/skins/' при условии, что web - это корень сайта.

Answer 1

[Дмитрий]

Добрый вечер.
А почему бы не использовать AssetBandle? Подключить в нём все стили и js по человечески и не мучаться.
Хотя можно и такой вариант использовать:

<?php
$url = Url::toRoute('path_to_css');
$thsi->registerJs("
$('#layerslider').layerSlider({
    autoStart: true,
    responsive:true,
    responsiveUnder: 1280,
    layersContainer: 1280,
    hoverPrevNext: false,
    skin: 'fullwidth',
    skinsPath: '" . $url . "',
    showCircleTimer: false,
    hideOnMobile: false,
    navStartStop: false,
    navButtons: false
});
", View::POS_END);
?>

Возможные ошибки подправьте сами.

Comments

[Дмитрий]

Михаил Балагура, это может зависеть от разных вещей. Работы самого js, настроек приложения и так далее.
Для начала можно попробовать подставить слеш перед css
$url = Url::toRoute('/css/skins/');
Почитайте в документации о Url::toRoute();