Coder Social home page Coder Social logo

Auto start slideshow about reveal.js HOT 15 CLOSED

hakimel avatar hakimel commented on July 30, 2024
Auto start slideshow

from reveal.js.

Comments (15)

hakimel avatar hakimel commented on July 30, 2024 3

This has been added now. You'll need to specify a millisecond value (time between auto-sliding) in the Reveal.initialize call. For example:

Reveal.initialize({
autoSlide: 3000,
loop: true
});

from reveal.js.

trondkla avatar trondkla commented on July 30, 2024 1

@vinitpatel03 check out data-autoslide attribute
<section data-autoslide="2000"></section>
<section data-autoslide="3000"></section>

from reveal.js.

hakimel avatar hakimel commented on July 30, 2024

This isn't currently supported but I like the idea. On the to-do list.

from reveal.js.

pipoulito avatar pipoulito commented on July 30, 2024

Hello,
This function would be great, is there a roadmap for this, a date...?
Also the ability to have a video that start automatically on a slide, going to next at the end of the video...

from reveal.js.

hakimel avatar hakimel commented on July 30, 2024

There's no roadmap for this project – I'm just getting to things as I find time here and there – but I'll let you know once this has been added. Continuing after a video ends is a very specific case so that should be implemented for that particular presentation. Starting the video when the slide activates can be achieved by using the 'slidechanged' event.

from reveal.js.

pipoulito avatar pipoulito commented on July 30, 2024

Thanks a lot, your project is fantastic !
So i wait until you add the ability to autostart the slideshow, and then i'll ask you details how to going next slide after the end of video.
Thanks a lot !

from reveal.js.

pipoulito avatar pipoulito commented on July 30, 2024

great ! thank you, i gonna try !
i'll also see for an autostart and a event at the end of the video

from reveal.js.

pipoulito avatar pipoulito commented on July 30, 2024

it works very well !

Would you have an idea, how i could automatically start a video (local or youtube), pausing the autostart when playing, then going next slide when video ends...? I don't understand how to use 'slidechanged' event.
thanks !

from reveal.js.

hakimel avatar hakimel commented on July 30, 2024

Unfortunately there's currently no way to stop the auto-sliding programmatically so you'd need to add an API function for that as well (in the bottom of reveal.js). All you should need to do is call config.autoSlide = 0;

Not sure how to best adjust slide forwarding to video playback but it would involved the 'slidechanged' event as well as listening for when the video ends and adjusting the autoSlide property accordingly. Unfortunately I don't have time to help out with that one.

from reveal.js.

realjons avatar realjons commented on July 30, 2024

is it possible to auto play a single slide then stop ? thx

from reveal.js.

Rubel-hossain avatar Rubel-hossain commented on July 30, 2024

Yes it's possible , you can try it...........

     // Slide every five seconds
      Reveal.configure({
    autoSlide: 5000
      });

from reveal.js.

vinitpatel03 avatar vinitpatel03 commented on July 30, 2024

is it possible to apply autoslide for each slide?
i.e
for first slide - 2 sec
for second - 3 sec

from reveal.js.

AliHid avatar AliHid commented on July 30, 2024

Hey,, I am sorry, is it possible to put animated gif in it?

from reveal.js.

robertop87 avatar robertop87 commented on July 30, 2024

I have enable autoSlide for a video slide.

The video duration is 10 seconds, and my autoSlide 3, but currently the video still playing until finished it.

@hakimel any idea to solve this???

from reveal.js.

florentroques avatar florentroques commented on July 30, 2024

for automatically going to next slide after youtube video (loaded by iframe) has ended:

var tag = document.createElement('script');
tag.src = "//www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); 

function onYouTubeIframeAPIReady() {
  function onPlayerStateChange(event) {
    if (event.data == YT.PlayerState.ENDED) {
      Reveal.next();
    }
  }

  function createYouTubePlayersEventListeners() {
    var selectors = [
      ".slide-background-content > iframe[data-src*='www.youtube-nocookie.com/embed/']"
      ,".slide-background-content > iframe[data-src*='www.youtube.com/embed/']"
    ].join(', ');
    var iframeYouTubePlayers = document.querySelectorAll(selectors);

    iframeYouTubePlayers.forEach(function(iframeYouTubePlayer) {
      iframeYouTubePlayer.onload = function() {
        new YT.Player(iframeYouTubePlayer, {
          events: {
            'onStateChange': onPlayerStateChange
          }
        });
      }
    });
  }

  createYouTubePlayersEventListeners();         
}

from reveal.js.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.