Swipeable Tabs - Materialize CSS

In this example below you will see how to do a Swipeable Tabs - Materialize CSS with some HTML / CSS and Javascript

Touch compatible swipeable tabs makes it easier to create material design tabs on web based application easier and quicker.

Thumbnail
This awesome code was written by regmiprem, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright regmiprem ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Swipeable Tabs - Materialize CSS</title>
  
  
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/css/materialize.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

    <ul id="tabs-swipe-demo" class="tabs">
    <li class="tab col s3"><a href="#swipe-1">Test 1</a></li>
    <li class="tab col s3"><a class="active" href="#swipe-2">Test 2</a></li>
    <li class="tab col s3"><a href="#swipe-3">Test 3</a></li>
  </ul>
  <div id="swipe-1" class="col s12 blue">First tab content</div>
  <div id="swipe-2" class="col s12 red">Second tab content</div>
  <div id="swipe-3" class="col s12 green">Third tab content</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/js/materialize.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/regmiprem/swipeable-tabs-materialize-css-bgoQMw */
.carousel .carousel-item{
  width:100%;
}

/*Downloaded from https://www.codeseek.co/regmiprem/swipeable-tabs-materialize-css-bgoQMw */
$(document).ready(function(){
    $('ul.tabs').tabs({
      swipeable : true,
      responsiveThreshold : 1920
    });
  });

Comments