Блог

Главная - Вопросы по программированию - Материализовать слайдер, не работающий в asp.net mvc

Материализовать слайдер, не работающий в asp.net mvc

#jquery #html #asp.net-mvc #materialize

#jquery #HTML #asp.net-mvc #материализовать

Вопрос:

Я разрабатываю веб-приложение mvc в asp.net , но мой слайдер не работает. Когда я пробую тот же код, используя html, он работает. Вот моя часть кода

 <head>
 <link href="~/Content/css/materialize.min.css" rel="stylesheet" />
 <script type="text/javascript" src="~/Content/jquery/jquery-2.1.1.min.js"></script>
 <script type="text/javascript" src="~/Content/js/materialize.min.js"></script>

<script>
$(document).ready(function () {
        $('.slider').slider({ full_width: true });
    });
</script>
</head>
<body>    
<div class="slider">
 <ul class="slides">
  <li>
   <img class="responsive-img" src="~/Content/img/hotel1.jpeg" /> 
  </li>
  <li>
   <img class="responsive-img" src="~/Content/img/hotel2.jpeg" /> 
  </li>
 </ul>
</div>
</body>

Когда я проверяю код с помощью инструментов разработчика Chrome, он говорит

 Uncaught TypeError: $(...).slider is not a function

а также

 Uncaught ReferenceError: $ is not defined(anonymous function) @ materialize.min.js:6

Комментарии:

1. $ is not defined означает, что jQuery не инициализирован должным образом или не существует на стороне клиента. Проверьте, существует ли библиотека jQuery, или используйте <script type="text/javascript" src="@Url.Content("~/Content/jquery/jquery-2.1.1.min.js")"> для указания относительного пути.

2. Исправлена ошибка Jquery ReferenceError. Теперь проблема со слайдером

3. Поскольку ваш код инициализации Materialize выглядит нормально, попробуйте изменить значение пути атрибута src во втором теге скрипта с "@Url.Content("~/Content/js/materialize.min.js")" помощью . Также включите библиотеку пользовательского интерфейса jQuery, если она все еще не работает.

Ответ №1:

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

 <head>
 <link href="~/Content/css/materialize.min.css" rel="stylesheet" />

</head>
<body>    
<div class="slider">
 <ul class="slides">
  <li>
   <img class="responsive-img" src="~/Content/img/hotel1.jpeg" /> 
  </li>
  <li>
   <img class="responsive-img" src="~/Content/img/hotel2.jpeg" /> 
  </li>
 </ul>
</div>

 <script type="text/javascript" src="~/Content/jquery/jquery-2.1.1.min.js"></script>
 <script type="text/javascript" src="~/Content/js/materialize.min.js"></script>

<script>
$(document).ready(function () {
        $('.slider').slider({ full_width: true });
    });
</script>
</body>

Ответ №2:

Проблема заключалась в нежелательной ссылке на jquery и bootstrap. после того, как я удалил его из файла, он работает нормально.