Блог

Главная - Вопросы по программированию - fullpage.js не может прокручивать

fullpage.js не может прокручивать

#html #jquery #fullpage.js

#HTML #jquery #fullpage.js

Вопрос:

Я хочу добавить fullPage.js на мой HTML-сайт. Но моя страница не сможет прокручивать ее, вся страница просто застряла на содержимом в теге заголовка и не может переходить к другим разделам. Я попытался изменить имя класса каждого раздела на «раздел», но это тоже не работает. Ниже приведены мои коды

Мои коды приведены ниже

 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>website</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.9/fullpage.min.css"/>
</head>

<div id="fullPage">
<header>
  <div class="iframe-container">
    <div id="landingvideo" style="display:flex; align-items:center; justify-content:center;">
    <iframe  class="landingpage"scrolling="no" style="width:4500px; height:1000px; border:none;" marginheight="100%" marginwidth="100%" src="landingpage.html"></iframe>
    </div>
</div>
</header>
<iframe  class="minicarousel" src="minicarousel.php" frameborder="0" marginheight="100%" marginwidth="100%" width="100%" height="100%" scrolling="no"allowtransparency="true"></iframe>
</div>

<body>
<section class="section_position" id="section0">
    <div class="container mb-5">
      <div class="row">
        <div class="col-lg-12 mx-auto text-center">
        <p id="title">Lorem Ipsum</p>
        <p id="des1">Lorem ipsum dolor sit amet</p>
        <p id="des2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ligula arcu, venenatis at elit accumsan, tincidunt tempor ipsum. Maecenas risus sem, dignissim vitae velit vel, sodales pulvinar nibh. In vulputate felis et egestas ultricies. Praesent mollis erat turpis, ac faucibus orci ullamcorper nec. Aenean ac fermentum eros.</p>
        </div>
    </div>

  <div class="carousel-wrap container mb-5">
    <div class="owl-carousel owl-theme">
      <div class="item">
        <div class="row">
          <div class="col-md-12"> <br/>
            <img src="images.png" class="img" style="width: 100%; height: 438px;">
          </div>
        </div>
      </div>
      <div class="item">
        <div class="row">
          <div class="col-md-12"> <br/>
            <img src="images.png" class="img" style="width: 100%; height: 438px;">
          </div>
        </div>
      </div>
      <div class="item">
        <div class="row">
          <div class="col-md-12"> <br/>
            <img src="images.png" class="img" style="width: 100%; height: 438px;">
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="col-md-12 mx-auto text-center mb-5">
    <a href="https://www.lipsum.com/feed/html"><img src="images.png" ></a>
  </div>
</section>

<section class="section_position mb-5" id="section1">
    <div class="container">
      <div class="row">
      <div class="col-lg-12 mx-auto text-center">
      <p id="title">Lorem Ipsum</p>
        <p id="des1">Lorem ipsum dolor sit amet</p>
        <p id="des2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ligula arcu, venenatis at elit accumsan, tincidunt tempor ipsum. Maecenas risus sem, dignissim vitae velit vel, sodales pulvinar nibh. In vulputate felis et egestas ultricies. Praesent mollis erat turpis, ac faucibus orci ullamcorper nec. Aenean ac fermentum eros.</p>
      </div>
        <div class="col-lg-4">
          <center> <img class="icon1" src="images.png"> </center>
        </div>

        <div class="col-lg-4">
          <center> <img class="icon1" src="images.png"> </center>
        </div>

        <div class="col-lg-4">
            <center> <img class="icon1" src="images.png"> </center>
        </div>
    </div>
    <div class="col-md-12 mx-auto text-center ">
        <a href="#contactme" ><img src="images.png" ></a>
    </div>
</section>


<section class="section_position mb-5" id="section2">
    <div class="container">
      <div class="row">
        <div class="col-lg-12 mx-auto text-center">
        <p id="title">Lorem Ipsum</p>
        <p id="des1">Lorem ipsum dolor sit amet</p>
        <p id="des2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ligula arcu, venenatis at elit accumsan, tincidunt tempor ipsum. Maecenas risus sem, dignissim vitae velit vel, sodales pulvinar nibh. In vulputate felis et egestas ultricies. Praesent mollis erat turpis, ac faucibus orci ullamcorper nec. Aenean ac fermentum eros.</p>
        </div>
        <div class="col-md-12">
            <video id="method" poster="imagespng" playsinline="playsinline" autoplay="autoplay" muted="muted" loop="loop" style="width: 100%;height: auto;">
                <source src="loop.mp4" type="video/mp4">
            </video>
        </div>
      </div>
    </div>
</br>
</section>

<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.9/fullpage.min.js"></script>
<script>
    new fullpage('#fullPage',{
        autoScrolling:true
    })
</script>
</body>

Комментарии:

1. Справедливое предупреждение: jQuery — это наихудшая возможная вещь, которую можно использовать как для вашей работы, так и для вашего опыта из-за его ужасной производительности и блокировки версий. Вы практически не получите опыта по пути наименьшего сопротивления.

Ответ №1:

Ваш <body> находится в середине вашего HTML… Вы пишете HTML перед <body> тегом ( <div id="fullPage"> ) и так далее.

Итак, короткий ответ:

Проверьте свой HTML-код. Это просто неправильно.