Материализовать css слайдер не работает

эй ребята используют материализацию css для моего сайта. когда я вставляю код для слайдера, он показывает только серый фон. Вот мой код:Материализовать css слайдер не работает

<div class="slider"> 
<ul class="slides"> 
    <li> 
    <img 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 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>

источник

2016-01-01 David Node

Ваш код не работает, так как вы пропустили jQuery Initialization. В вашем файле JS укажите следующие script или добавьте тег <script> на страницу html.

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

Ниже приводится полный рабочий код в одной html странице.

<!DOCTYPE html> 
 
<html ng-app> 
 

 
    <head> 
 
     <title>Slider</title> 
 
     <!-- Compiled and minified CSS --> 
 
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css"> 
 
     <!--Let browser know website is optimized for mobile--> 
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
 
    </head> 
 

 
    <body> 
 
     <!--your code start--> 
 
     <div class="slider"> 
 
      <ul class="slides"> 
 
       <li> 
 
        <img 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 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> 
 
     <!--your code end--> 
 

 
     <!--Import jQuery before materialize.js--> 
 
     <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> 
 

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

 
</html>

источник

2016-01-07 06:12:26

Материализовать css слайдер не работает

ответ

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