Начальная настройка карусели с материализацией - PullRequest
Новая
       20

Начальная настройка карусели с материализацией

0 голосов
/ 17 мая 2018

Так что это, вероятно, довольно глупый вопрос, но это, вероятно, третья карусель, которую я пытался настроить, и прошло много лет с тех пор, как я сделал какую-то веб-работу, и я что-то упустил, так как она не работает, и янадеюсь, кто-то может легко указать, почему.

У меня есть materialize.min.js в моей папке js и то же самое с css в папке css.Сайт просто загружает и укладывает все изображения друг на друга, но они не отображаются, и нет никакой функциональности.

Так что я испортил?Большое спасибо за любой вклад.(Для любого любопытного я хочу сделать вертикально ориентированную навигацию, которая работает в стиле карусели, по которой вы можете щелкнуть, чтобы перейти на сайт) 

<!DOCTYPE html>
<html>
<title>TEST</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<head>
    <!--Import Google Icon Font-->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <!--Import materialize.css-->
    <link type="text/css" rel="stylesheet" href="css/materialize.min.css"  media="screen,projection"/>

    <!--Let browser know website is optimized for mobile-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>

    <script src="jquery.min.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            var elems = document.querySelectorAll('.carousel');
            var instances = M.Carousel.init(elems, options);
          });

          // Or with jQuery

          $(document).ready(function(){
            $('.carousel').carousel();
        });
    </script>

</head>

<body>

<div class="carousel">
    <a class="carousel-item" href="#one!"><img src="placeholder.jpg"></a>
    <a class="carousel-item" href="#two!"><img src="placeholder.jpg"></a>
    <a class="carousel-item" href="#three!"><img src="placeholder.jpg"></a>
    <a class="carousel-item" href="#four!"><img src="placeholder.jpg"></a>
    <a class="carousel-item" href="#five!"><img src="placeholder.jpg"></a>
</div>

<!--JavaScript at end of body for optimized loading-->
<script type="text/javascript" src="js/materialize.min.js"></script>


</body>
</html>

1 Ответ

0 голосов
/ 19 мая 2018

js ссылка 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/js/materialize.min.js"></script>
<script src="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/owl.carousel.js"></script>
<script src="https://codepen.io/j_holtslander/pen/pLNzQb"></script>

css link 

 <link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/css/materialize.min.css" rel="stylesheet">
 <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 <link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet">
 <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
 <link href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/js/materialize.min.js"></script>
<script src="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/owl.carousel.js"></script>
<script src="https://codepen.io/j_holtslander/pen/pLNzQb"></script>

 <link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/css/materialize.min.css" rel="stylesheet">
 <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 <link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet">
 <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
 <link href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet">

HTML 

<div class="navbar-fixed">
  <nav>
    <div class="nav-wrapper">
      <div class="row">
        <div class="col s12">
          <a href="https://codepen.io/collection/nbBqgY" class="brand-logo">Materialize Framework</a>
          <ul class="right hide-on-med-and-down">
            <li><a href="https://codepen.io/collection/nbBqgY">Sass</a></li>
            <li><a href="https://codepen.io/collection/nbBqgY">Components</a></li>
            <li><a href="https://codepen.io/collection/nbBqgY">JavaScript</a></li>
          </ul>
        </div>
      </div>
    </div>
  </nav>
</div>


<section id="main-slider">
  <div class="owl-carousel owl-theme">
    <div><img src="http:placehold.it/1920x480/EF9A9A/fff?text=Owl+Carousels"></div>
    <div><img src="http:placehold.it/1920x480/FFCDD2/EF9A9A?text=Touch+compatible"></div>
    <div><img src="http:placehold.it/1920x480/EF9A9A/fff?text=Images+or+code"></div>
    <div><img src="http:placehold.it/1920x480/FFCDD2/EF9A9A"></div>
</section>





<section id="owl-1">
  <div class="owl-carousel owl-theme">

      <div class="card hoverable">
        <div class="card-image waves-effect waves-block waves-light">
          <img class="activator" src="http://placehold.it/1920/999/fff">
        </div>
        <div class="card-content">
          <span class="card-title activator grey-text text-darken-4">Card Title<i class="material-icons right">more_vert</i></span>
          <p><a href="https://codepen.io/collection/nbBqgY/" target="_blank">This is a link</a></p>
        </div>
        <div class="card-reveal">
          <span class="card-title grey-text text-darken-4">Card Title<i class="material-icons right">close</i></span>
          <p>Here is some more information about this product that is only revealed once clicked on.</p>
        </div>
      </div>



      <div class="card hoverable">
        <div class="card-image waves-effect waves-block waves-light">
          <img class="activator" src="http://placehold.it/1920/888/fff">
        </div>
        <div class="card-content">
          <span class="card-title activator grey-text text-darken-4">Card Title<i class="material-icons right">more_vert</i></span>
          <p><a href="https://codepen.io/collection/nbBqgY/" target="_blank">This is a link</a></p>
        </div>
        <div class="card-reveal">
          <span class="card-title grey-text text-darken-4">Card Title<i class="material-icons right">close</i></span>
          <p>Here is some more information about this product that is only revealed once clicked on.</p>
        </div>
      </div>



      <div class="card hoverable">
        <div class="card-image waves-effect waves-block waves-light">
          <img class="activator" src="http://placehold.it/1920/777/fff">
        </div>
        <div class="card-content">
          <span class="card-title activator grey-text text-darken-4">Card Title<i class="material-icons right">more_vert</i></span>
          <p><a href="https://codepen.io/collection/nbBqgY/" target="_blank">This is a link</a></p>
        </div>
        <div class="card-reveal">
          <span class="card-title grey-text text-darken-4">Card Title<i class="material-icons right">close</i></span>
          <p>Here is some more information about this product that is only revealed once clicked on.</p>
        </div>
      </div>



      <div class="card hoverable">
        <div class="card-image waves-effect waves-block waves-light">
          <img class="activator" src="http://placehold.it/1920/666/fff">
        </div>
        <div class="card-content">
          <span class="card-title activator grey-text text-darken-4">Card Title<i class="material-icons right">more_vert</i></span>
          <p><a href="https://codepen.io/collection/nbBqgY/" target="_blank">This is a link</a></p>
        </div>
        <div class="card-reveal">
          <span class="card-title grey-text text-darken-4">Card Title<i class="material-icons right">close</i></span>
          <p>Here is some more information about this product that is only revealed once clicked on.</p>
        </div>
      </div>


      <div class="card hoverable">
        <div class="card-image waves-effect waves-block waves-light">
          <img class="activator" src="http://placehold.it/1920/555/fff">
        </div>
        <div class="card-content">
          <span class="card-title activator grey-text text-darken-4">Card Title<i class="material-icons right">more_vert</i></span>
          <p><a href="https://codepen.io/collection/nbBqgY/" target="_blank">This is a link</a></p>
        </div>
        <div class="card-reveal">
          <span class="card-title grey-text text-darken-4">Card Title<i class="material-icons right">close</i></span>
          <p>Here is some more information about this product that is only revealed once clicked on.</p>
        </div>
      </div>


      <div class="card hoverable">
        <div class="card-image waves-effect waves-block waves-light">
          <img class="activator" src="http://placehold.it/1920/444/fff">
        </div>
        <div class="card-content">
          <span class="card-title activator grey-text text-darken-4">Card Title<i class="material-icons right">more_vert</i></span>
          <p><a href="https://codepen.io/collection/nbBqgY/" target="_blank">This is a link</a></p>
        </div>
        <div class="card-reveal">
          <span class="card-title grey-text text-darken-4">Card Title<i class="material-icons right">close</i></span>
          <p>Here is some more information about this product that is only revealed once clicked on.</p>
        </div>
      </div>

      <div class="card hoverable">
        <div class="card-image waves-effect waves-block waves-light">
          <img class="activator" src="http://placehold.it/1920/333/fff">
        </div>
        <div class="card-content">
          <span class="card-title activator grey-text text-darken-4">Card Title<i class="material-icons right">more_vert</i></span>
          <p><a href="https://codepen.io/collection/nbBqgY/" target="_blank">This is a link</a></p>
        </div>
        <div class="card-reveal">
          <span class="card-title grey-text text-darken-4">Card Title<i class="material-icons right">close</i></span>
          <p>Here is some more information about this product that is only revealed once clicked on.</p>
        </div>
      </div>

  </div>
</section>

<section id="owl-2">
  <div class="owl-carousel owl-theme">
    <div>
      <img src="http:placehold.it/640x480">
    </div>
    <div>
      <img src="http:placehold.it/640x480/000/fff">
    </div>
    <div>
      <img src="http:placehold.it/640x480/555/fff">
    </div>
    <div>
      <img src="http:placehold.it/640x480/444/fff">
    </div>
    <div>
      <img src="http:placehold.it/640x480/333/fff">
    </div>
    <div>
      <img src="http:placehold.it/640x480/222/fff">
    </div>
    <div>
      <img src="http:placehold.it/640x480/666/fff">
    </div>
  </div>
</section>

<!-- Gitter Chat Link -->
<div class="fixed-action-btn"><a class="btn-floating btn-large red" href="https://gitter.im/Dogfalo/materialize" target="_blank"><i class="large material-icons">chat</i></a></div>

CSS 

body {background-color: #eee;}




.owl-carousel .owl-nav .owl-prev,
  .owl-carousel .owl-nav .owl-next,
  .owl-carousel .owl-dot {
    font-family: 'Material Icons';
    font-size: 4rem;
}
.owl-nav {height:0;margin:0;}
.owl-carousel .owl-nav .owl-prev:before{
    // fa-chevron-left
    content: "\E5CB";
    margin-left:16px;
    position: absolute;
      top: 40%;
    left: 0px;
    height: auto;
    text-shadow: 0px 0px 5px rgba(0,0,0,0.1),
                 0px 0px 8px rgba(0,0,0,0.05),
                 0px 0px 12px rgba(0,0,0,0.05);
}
.owl-carousel .owl-nav .owl-next:after{
    //fa-chevron-right
    content: "\E5CC";
    margin-right: 16px;
    position: absolute;
      top: 40%;
    right: 0px;
    height: 100%;
    text-shadow: 0px 0px 5px rgba(0,0,0,0.1),
                 0px 0px 8px rgba(0,0,0,0.05),
                 0px 0px 12px rgba(0,0,0,0.05);
}

* JS 1025 *

$(document).ready(function(){

  // OWL CAROUSEL - https://owlcarousel2.github.io/OwlCarousel2/
  $('#main-slider .owl-carousel').owlCarousel(
    {
      items: 1,
      margin: 0,
      loop: true,
      nav: false,
      navText: ['Back','Next'],
      dots: false,
      dotsEach: true,
      autoplay: true,
      autoplaySpeed: 500,
      animateOut: 'fadeOut',
      animateIn: 'fadeIn',
    }
  );
  $('#owl-1 .owl-carousel').owlCarousel(
    {
      items: 4,
      margin: 16,
      loop: true,
      stagePadding: 64,
      nav: true,
      // navText: ['Back','Next'],
      navText: ['',''],
      // navText: ["<img src='myprevimage.png'>","<img src='mynextimage.png'>"],
      dots: false,
      dotsEach: true,
      lazyLoad: false,
      autoplay: true,
      autoplaySpeed: 500,
      navSpeed: 500,
      autoplayTimeout: 2000,
      autoplayHoverPause: true,
    }
  );

  $('#owl-2 .owl-carousel').owlCarousel(
    {
      items: 5,
      margin: 16,
      stagePadding: 32,
      loop: true,
      autoplay: true,
      autoplaySpeed: 500,
      navSpeed: 500,
      dots: false,
      dotsEach: true,
      nav: true,
      // navText: ['Back','Next'],
      navText: ['',''],
      autoplayTimeout: 2000,
      autoplayHoverPause: false,
      animateOut: 'slideOutDown',
      animateIn: 'flipInX',
    }
  );

});
...