Question

我一直在尝试/学习使用fullpagejs创建一个网站，但我在创建自动播放滑块时遇到问题。我只能创造水平滚动，这不是我想要在这里实现的。如何在不使用水平滚动的情况下实现此目的的任何帮助？

大家好，我一直在尝试/学习使用fullpagejs创建一个网站，但我在创建自动播放滑块时遇到问题。我只能创造水平滚动，这不是我想要在这里实现的。如何在不使用水平滚动的情况下实现此目的的任何帮助？

output$slider_holder <- renderUI({
    sliderInput('slider', 'Slider',
                min = 0, max = 10,
                value = isolate(input$slider), 
                animate =
                  animationOptions(interval = animation$speed))
  })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://rawgit.com/alvarotrigo/fullPage.js/master/jquery.fullPage.js"></script>
<!--Custom script -->
<script type="text/javascript" src="js/fullpage.js"></script>

        <script type="text/javascript">
            window.ga=function(){ga.q.push(arguments)};ga.q=[];ga.l=+new Date;
            ga('create','UA-XXXXX-Y','auto');ga('send','pageview')

            $(document).ready(function(){

//  $('#fullpage').fullpage({
//     sectionSelector: '.vertical-scrolling',
//     slideSelector: '.horizontal-scrolling',
//     controlArrows: false
//     // more options here
// });


// variables
var $header_top = $('.header-top');
var $nav = $('nav');


// toggle menu 
$header_top.find('a').on('click', function() {
  $(this).parent().toggleClass('open-menu');
});

// fullpage customization
$('#fullpage').fullpage({
  sectionsColor: ['firstSection'],
  // sectionSelector: '.vertical-scrolling',
  // slideSelector: '.horizontal-scrolling',
  navigation: true,
  slidesNavigation: true,
  controlArrows: false,
    

  afterLoad: function(anchorLink, index) {
    $header_top.css('background', 'rgba(0, 47, 77, .3)');
    $nav.css('background', 'rgba(0, 47, 77, .25)');
    if (index == 5) {
        $('#fp-nav').hide();
      }
  },

  
}); 
});

</script>

    #homepage {
  position: relative; }
  #homepage .slider {
    background-size: cover !important; }
    #homepage .slider .hero {
      padding: 0 25px;
      display: flex;
      flex-direction: column;
      height: calc(100vh - 10%); }
      #homepage .slider .hero .header {
        padding-top: 20px;
        flex: 1 1 70px;
        display: flex;
        align-items: center;
        justify-content: space-between; }
        #homepage .slider .hero .header .logo img {
          cursor: pointer;
          image-rendering: -webkit-optimize-contrast; }
        #homepage .slider .hero .header i {
          color: #fff;
          cursor: pointer; }
      #homepage .slider .hero .welcome {
        display: flex;
        justify-content: center;
        flex: 10 10 300px;
        text-align: center;
        align-items: center; }
        #homepage .slider .hero .welcome div {
          align-self: flex-end; }
          #homepage .slider .hero .welcome div .hero-headings {
            line-height: 90px;
            font-size: 155px;
            color: #fff;
            font-family: '__ITC Avant Garde Gothic Pro_5';
            font-weight: 700;
            letter-spacing: -5px;
            text-shadow: 0px 0px 30px rgba(0, 0, 0, 0.8); }
          #homepage .slider .hero .welcome div .hero-description {
            padding-bottom: 50px;
            font-family: Georgia;
            font-size: 20px;
            line-height: 22px;
            font-weight: bold;
            letter-spacing: 5px;
            color: #fff;
            text-transform: uppercase;
            /*text-shadow: 0px 0px 15px rgba(0,0,0,0.8);*/ }

Answer 1

您需要像这样更改afterLoad回调函数：

我已经使用setInterval函数通过以1秒的间隔调用moveSlideRight函数使其自动化。

afterLoad: function(anchorLink, index) {
    $header_top.css('background', 'rgba(0, 47, 77, .3)');
    $nav.css('background', 'rgba(0, 47, 77, .25)');
    setInterval(function () {
        $.fn.fullpage.moveSlideRight();
    }, 1000);
    if (index == 5) {
        $('#fp-nav').hide();
      }
  },

以下是一个示例链接：codepen link

如何在fullpageJS中创建自动播放滑块

1 个答案: