Full screen slider with materialize css, next and previous buttons with materialize js methods

I have been using Materialize CSS for the first time and I’m experiencing an error while I’m working with fullscreen slider.
I’m trying to add next and previous buttons which is not working. And also the next to the slider is div is getting hidden behind the sliders. I cannot add padding because there is the height of the slider is responsive.

Following is the code I’m working on

 <head>
      <!--Import Google Icon Font-->
      <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
      <!-- Compiled and minified CSS -->
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

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

      <style media="screen">
      .middle-indicator {
  position: absolute;
  top: 50%;
  z-index: 1000;
}

.middle-indicator-text {
  font-size: 4.2rem;
}

a.middle-indicator-text {
  color: white !important;
}

.content-indicator {
  width: 64px;
  height: 64px;
  background: none;
  -moz-border-radius: 50px;
  -webkit-border-radius: 50px;
  border-radius: 50px;
}

.indicators {
  visibility: hidden;
}
      </style>
    </head>

    <body>
      <div class="navbar-fixed white-text">

        <ul id='about' class='dropdown-content orange accent-2'>
          <li><a href="#!" class="white-text">About Us</a></li>
          <li class="divider" tabindex="-1"></li>
          <li><a href="#!" class="white-text">Why RNR?</a></li>
        </ul>
        <ul id='projects-main' class='dropdown-content orange accent-2'>
          <li><a href="#!" class="white-text">First Project</a></li>
          <li class="divider" tabindex="-1"></li>
          <li><a href="#!" class="white-text">Pheonix project of projects and project </a></li>
        </ul>


      <nav class="orange">
          <div class="nav-wrapper container">
            <a href="#!" class="brand-logo white-text">Logo</a>
            <a href="#" data-target="mobile-nav" class="sidenav-trigger white-text right"><i class="material-icons white-text">menu</i> </a>
            <ul class=" orange right hide-on-med-and-down">
              <li class="active"><a class="white-text" href="sass.html"> <span>Home </span></a></li>
              <li><a class="dropdown-trigger white-text" href='#' data-target='about'>About<i class="material-icons right white-text text-darken-2">arrow_drop_down</i></a></li>
              <li><a class="dropdown-trigger white-text" href='#' data-target='projects-main'>Projects<i class="material-icons right white-text text-darken-2">arrow_drop_down</i></a></li>
              <li><a class="white-text" href="collapsible.html">Javascript</a></li>
              <li><a class="white-text" href="mobile.html">Mobile</a></li>
            </ul>
          </div>
        </nav>


        </div>

        <ul class="sidenav orange" id="mobile-nav">

          <li><a class="white-text" href="sass.html">Home</a></li>

          <li>
            <ul class="collapsible collapsible-accordion">
              <li>
                <a class="collapsible-header white-text" style="padding: 0px 32px !important">About<i class="material-icons right white-text text-darken-2">arrow_drop_down</i></a>
                <div class="amber accent-4 collapsible-body">
                  <ul>
                    <li><a class="white-text" href="#!">About Us</a></li>
                    <li><a class="white-text" href="#!">Why RNR?</a></li>
                  </ul>
                </div>
              </li>
              <li>
                <a class="collapsible-header white-text text-accent-4" style="padding: 0px 32px !important">Projects<i class="material-icons right white-text text-darken-2">arrow_drop_down</i></a>
                <div class="amber accent-4 collapsible-body">
                  <ul>
                    <li><a class="white-text" href="#!">First</a></li>
                    <li><a class="white-text" href="#!">Second</a></li>
                  </ul>
                </div>
              </li>

              <li>
                <a class="collapsible-header white-text text-accent-4" style="padding: 0px 32px !important">Gallery<i class="material-icons right white-text text-darken-2">arrow_drop_down</i></a>
                <div class="collapsible-body">
                  <ul class="amber accent-4">
                    <li><a class="white-text" href="#!">First</a></li>
                    <li><a class="white-text" href="#!">Second</a></li>
                    <li><a class="white-text" href="#!">Third</a></li>
                    <li><a class="white-text" href="#!">Fourth</a></li>
                  </ul>
                </div>
              </li>

            </ul>
          </li>
          <li><a class="white-text" href="collapsible.html">Events</a></li>
          <li><a class="white-text" href="mobile.html">Contact</a></li>
          <div class="row">
            <div class=" container footer white col s12 center-align valign-wrapper" style="height: 100px; position: absolute; bottom: 60px;">
Follow us:
            </div>
          </div>
        </ul>
        <div class="slider fullscreen" data-indicators="true" >
          <div class="slider-fixed-item center middle-indicator">
    <div class="left">
        <a href="" onclick="prev();" class="middle-indicator-text waves-effect waves-light content-indicator button"><i
                class="material-icons left  middle-indicator-text">chevron_left</i></a>
    </div>

    <div class="right">
        <a href="" onclick="next();" class="middle-indicator-text waves-effect waves-light content-indicator button"><i
                class="material-icons right middle-indicator-text">chevron_right</i></a>
    </div>
</div>
          <ul class="slides">
            <li class="slider-item">
              <img src="https://images.unsplash.com/photo-1464817739973-0128fe77aaa1?dpr=1&auto=compress,format&fit=crop&w=1199&h=799&q=80&cs=tinysrgb&crop="> <!-- 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>
            <li class="slider-item">
              <img src="https://ununsplash.imgix.net/photo-1414849424631-8b18529a81ca?q=75&fm=jpg&s=0e993004a2f3704e8f2ad5469315ccb7"> <!-- random image -->
              <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>
            <li class="slider-item">
              <img src="https://ununsplash.imgix.net/uploads/1413259835094dcdeb9d3/6e609595?q=75&fm=jpg&s=6a4fc66161293fc4a43a6ca6f073d1c5"> <!-- random image -->
              <div class="caption right-align">
                <h3>Right Aligned Caption</h3>
                <h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5>
              </div>
            </li>
          </ul>
        </div>

        <div class="container">
          <div class="row">
            <div class="col m6 s12">
            <div class="row">
              <div class="col s6">
                <div class="card">
                  <div class="card-image">
                    <img src="https://ununsplash.imgix.net/uploads/1413259835094dcdeb9d3/6e609595?q=75&fm=jpg&s=6a4fc66161293fc4a43a6ca6f073d1c5" style="height: 200px"alt="">

                  </div>
                </div>
                <div class="card">
                  <div class="card-image">
                    <img src="https://ununsplash.imgix.net/uploads/1413259835094dcdeb9d3/6e609595?q=75&fm=jpg&s=6a4fc66161293fc4a43a6ca6f073d1c5" style="height: 200px"alt="">

                  </div>
                </div>
              </div>
              <div class="col s6">
                <div class="card">
                  <div class="card-image">
                    <img src="https://ununsplash.imgix.net/uploads/1413259835094dcdeb9d3/6e609595?q=75&fm=jpg&s=6a4fc66161293fc4a43a6ca6f073d1c5" style="height: 410px"alt="">

                  </div>
                </div>
              </div>
            </div>
            </div>
            <div class="col m6 s12">

            </div>
          </div>
        </div>



      <!--JavaScript at end of body for optimized loading-->
      <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
      <script>
      document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.sidenav');
var instances = M.Sidenav.init(elems, {
    edge: 'right',
    draggable: true,
    inDuration: 250,
    outDuration: 200,
    onOpenStart: null,
    onOpenEnd: null,
    onCloseStart: null,
    onCloseEnd: null,
    preventScrolling: true
});

var collapsibleElem = document.querySelector('.collapsible');
var collapsibleInstance = M.Collapsible.init(collapsibleElem, {});
var dropdownElems = document.querySelectorAll('.dropdown-trigger');
var instances = M.Dropdown.init(dropdownElems, {
  alignment:'right',
  constrainWidth:false,
  coverTrigger:false});
var sliderElems = document.querySelectorAll('.slider');
var instances = M.Slider.init(sliderElems, {indicators: false, interval:'5'});
window.next = function() {
  var sliderElem = document.querySelector('.slider');
  var l = M.Slider.getInstance(sliderElem);
  l.next(1);
}
window.prev = function() {
  var sliderElem = document.querySelector('.slider');
  var l = M.Slider.getInstance(sliderElem);
  l.prev(1);
}
});

      </script>
    </body>
  </html>

TIA

Best Regards,
Manoj.

22 thoughts on “Full screen slider with materialize css, next and previous buttons with materialize js methods”

Leave a Comment