материализуйте css слайдер, показывающий серый фон

Я использую материализацию css для своего приложения, и я использую материализацию v0.97.0 Когда я пытаюсь использовать слайдер, он всегда показывает серый фон, я также инициализировал слайдер().материализуйте css слайдер, показывающий серый фон

Вот мой разметки

HTML

<div class="row"> 
<div class="col s12"> 
    <div class="slider"> 
     <ul class="slides"> 
      <li> 
       <img src="../images/bg3.jpg" alt="slider image"> <!-- random image --> 
       <div class="caption center-align"> 
        <h3>This is our big Tagline!</h3> 
        <h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5> 
       </div> 
      </li> 
     </ul> 
    </div> 
</div>

$(document).ready(function() { 
    // Plugin initialization 
    $('.slider').slider(); 
})

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

источник

2015-09-07 Bhushan Goel

Мои лучшие Гест s является то, что источник вашего тега указывает на неправильный путь.

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

Пожалуйста, проверьте, указывает ли ваш исходный путь на нужное место. Для тестирования вы должны попытаться изменить ваш источник к следующему:

SRC = «https://www.google.com.br/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png»

источник

2015-09-08 20:48:20 Bonifacio

Я попробовал все решения, но ничего не получалось, я думаю, что это это проблема с версией. Поэтому я отказался от идеи использования materialze css, теперь я использую bootstrap. BTW какой версия вы использовали? –

Использование v0.97. Однако я действительно не думаю, что это проблема с версией. До настоящего момента я все еще не мог найти основную ошибку с помощью Materializecss, возможно, вам стоит попробовать еще раз. – Bonifacio

Ваш код что вы правильно инициализируете javascript. Откройте страницу, где находится ваш слайдер, щелкните правой кнопкой мыши на сером блоке и выберите изображение с изображением. Если он не отображает изображение, которое он должен показывать, проблема связана с вашим источником изображения. Попробуйте использовать исходное изображение из Интернета. Если изображение отображается при нажатии - просмотр изображения, проблема связана с инициализацией javascript. Проверьте, загружает ли ваш веб-сайт правильный файл javascript.

источник

2015-09-09 06:56:04

В JS я написал следующий код, и он сработал.

$(document).ready(function() { 
    $('.slider').slider({full_width: true}); 
});

источник

2016-01-28 14:57:57

Вы должны фактически установить время перехода в JavaScript, чтобы заставить его работать

Надень после импорта плагин JQuery

<script type="text/javascript"> 
     $(document).ready(function() { 
     $('.slider').slider({ 
      full_width: false, 
      interval: 5000, 
      transition: 800, 
      }); 
     }); 
    </script>

источник

2016-03-17 16:22:36

Нужно только «full_width», но это решает мою проблему, спасибо! –

$(document).ready(function() { 
 
     $('.slider').slider({full_width: true}); 
 
    });

<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script> 
 

 
     <!-- Compiled and minified JavaScript --> 
 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script> 
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css"> 
 

 
<div class="slider"> 
 
      <ul class="slides"> 
 
       <li> 
 
        <img class="img-responsive" src="http://lorempixel.com/580/250/nature/1"> 
 
        <div class="caption center-align"> 
 
         <h3>This is our big Tagline!</h3> 
 
         <h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5> 
 
        </div> 
 
       </li> 
 
       <li> 
 
        <img class="img-responsive" src="http://lorempixel.com/580/250/nature/2"> 
 
        <div class="caption left-align"> 
 
         <h3>Left Aligned Caption</h3> 
 
         <h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5> 
 
        </div> 
 
       </li> 
 
      </ul> 
 
     </div>

источник

2016-04-30 10:28:22

Любой ошибка в вашем JavaScript предотвратит Ползунок показывает, так что проверить вашу консоль, когда вы обновите страницу и решить их, и вам будет хорошо :)

источник

2016-07-21 12:10:30

Просто используйте этот класс прозрачного <ul class="slides transparent" style="height: 400px;">

источник

2017-09-05 07:55:06 LSKhan

материализуйте css слайдер, показывающий серый фон

ответ

Смежные вопросы