0

I have used FullPage.js as the landing area for my website. If you are unfamiliar, FullPage is here: http://alvarotrigo.com/fullPage/

In my website, I only have two "page-slides"... basically two full window divs that create the page-slides. I would like to add a fading image slideshow to rotate between say 4 images in the background of the second page-slide. I have been looking all day for a slideshow where I can specify the image to "cover" the div, but not interfere with the FullPage. It must fill the div and not interfere with the FullPage.

How can I go about doing this? I have tried several slideshows today like Cycle and NivoSlider. While Cycle is good, it doesn't "cover" the entire div. And I can't ever seem to get it to work correctly with the FullPage.

There has to be an answer out there. Thank you, and please be kind as I am somewhat a novice.

The page I am working on is here if it is helpful to see. http://mudchallenger.com/fullpage/examples/video-back-test.html

Alvaro
  • 40,778
  • 30
  • 164
  • 336
user3769255
  • 25
  • 3

1 Answers1

0

I tried looking through your page but I couldn't find where the second page div block is, but whatever. Just like how you have a <video></video> in your first page, create another <div></div> block on the second page. Give it an ID like 'slideshow'. Depending on what slide effect you want, you'll have to change this. But I'm going for slide out and slide in effect. Therefore you need two pictures side by side, one set to hidden.

<div id="slideshow">
   <img src="" id="prev" />
   <img src="" id="next" style="display:none;" />
</div>

Next, in your JavaScript, you just have to create an Array that has the src of the images.

 var images = {
 "img1": "LINK TO IMAGE HERE",
 "img2": "ETC.",
 "img3": "",
 "img4": ""
 }

Now all you have to do is use a timer to change the source of the image. In JavaScript, that's just changing the .src of the image. It might look something like this.

 // Timer code here
 function changeImg(i) {
    document.getElementById('prev').src = images[i];
 }

Then use CSS3 for transitions.

Look at this link here: CSS 3 slide-in from left transition

You'll have to adapt your code to work with the example. But is that what you're going for? Sorry I didn't write the rest of the code, I'm kind of tired.

Community
  • 1
  • 1
Josh
  • 110
  • 1
  • 8
  • And the javascript code should be placed inside the fullpage.js callback `afterRender` to make sure it runs when fullpage.js has finished doing changes in the DOM structure. – Alvaro Jun 24 '14 at 09:11