JSFiddle - React, Tailwind, and code Playground

by Rakesh Vadnal

HTML

<script src="https://alvarotrigo.com/fullPage/fullpage.js"></script>
<link rel="stylesheet" href="https://alvarotrigo.com/fullPage/fullpage.css">
<p class="viewportwidthWrap">window width: <span class="viewportwidth"></span></p>
<div id="fullpage">
    <div class="section">One</div>
    <div class="section">
        <div class="slide">Two</div>
        <div class="slide">Three</div>
    </div>
    <div class="section">Third</div>
    <div class="section">Four</div>
</div>

CSS

.viewportwidthWrap{position:fixed; top:0; width:100%; background-color:red; color:#FFF; z-index:12}
.section {
  background-color:yellow;
    display:inline-block;
    text-align:center;
    width:100%;
    height:auto;
    position:relative;
}
#destroy {
    left: 10px;
}
#create {
    left: 200px;
}
.demo {height:1000px}

JavaScript

var viewportwidth = $(window).width();
    /* console.log(viewportwidth); */
    
    $('.viewportwidth').text(viewportwidth);
    
    var fullPageCreated = false;
      createFullpage();

      function createFullpage() {
        if(fullPageCreated === false) {
          fullPageCreated = true;
          $('#fullpage').fullpage({
            /*
            sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE'],
            css3: true
            */
          });
         }
      }
      
      if(document.documentElement.clientWidth < 767) {
        $.fn.fullpage.destroy('all');
      }

			$(window).resize(function() {
      		var viewportwidth = $(window).width();
      		$('.viewportwidth').text(viewportwidth);
          
			    if ($(window).width() > 767) {
            createFullpage();
          } else {
            if(fullPageCreated == true) {
              fullPageCreated = false;
              $.fn.fullpage.destroy('all');
            }
          }
			   
			});