Fullscreen Slider

The Fullscreen Slider displays your images at 100% of the web browsers viewable area. Images will resize to fit, saving you time and effort with image trimming.

Instructions

Fullscreen Slider

In this tutorial, we’ll demonstrate how to update the Fullscreen Slider layout. The Fullscreen Slider ‘slides’ a series of div containers, from right to left. The default Fullscreen includes 5 slides, the content of each slide can be any html content, in the included example layout we’ve added an h3 text headline, a paragraph of regular text, a clickable button and a background image.

We’ll learn how to:

  • change the heading text
  • change the paragraph text
  • replace or remove the background image
  • add and remove slides

Change the headline text

  1. Expand the Library sliders >> fullscreen-slider (folder).
  2. Double click on the “fullscreen-slider” page to open.
  3. The H2 headline text is noted in the page by the description of ( Slider 1 Headline, etc )
  4. Click on the text with your mouse.
  5. Click on the H2 tag located on the Quick Tag Selector Toolbar.
  6. With the entire H2 tag selected, type a new headline.
  7. Save to update.

Change the paragraph text

This is regular text on the page, just change as you would normally change the text on a page.

Replace or remove the image

  1. The images for the fullscreen-slider are located in the Library >> sliders >> fullscreen-slider >> images (folder).
  2. The image size if variable for this slider, any size image you use, will expand to fit the full screen width. We recommend an image of at least ( 1024×640 pixels ) but any image size will actually work. Smaller images will appear more grainy as they are stretched to fit, so the larger your image, the better ( up to but not exceeding 1920 pixels.. more than that is over kill and will just clock bandwidth ).
  3. Import, drag or copy your replacement image into the ‘images’ folder, ( or any folder within your website ).
  4. OR drag your new image into the Library >> sliders >> fullscreen-slider >> images (folder).
  5. Open the ‘fullscreen-slider’ Library page.
  6. Switch to CODE view as you wont’ see the background image in the Library page directly
  7. Locate the image you want to change. for example the first image in your slider
  8. select the file name of the existing image, and type in the name of your new image: ( example: “1.jpg” we change to “new-image.jpg” to match the file name of the image we dragged into the ‘images’ folder.
  9. Because the slider uses a special background image style, instead of displaying the image directly on the page you won’t see the image in the page while in the design view. This also makes it a bit ‘cleaner’ and easier to edit the titles and paragraph text.

Add and remove slides

  1. Expand the Library >> sliders >> fullscreen-slider (folder).
  2. Open the ‘fullscreen-slider’ Library page.
  3. Switch to ‘Code’ view.
  4. To remove a slide, select the entire commented tag, and delete.
  5. To add more slides, copy an existing slide including the comment tags
  6. Then paste above or below, pasting once for each new Slide you would like to add.
  7. You’ll now have a duplicate slide. Just change the content and images to suit your needs.
  8. Next and last, you just need to ‘update’ the indicator ‘dots’
  9. Scroll down the page and locate the following <span..> tag

    (*NOTE: for the Avante theme, you’ll need to do this in the “wrapper / fullscreen-slider-wrapper.lbi) page.
  10. Select and copy one of the ( <span></span> ) tags, and paste once for each additional image being added.

 

Change the slider intervals

The default timing for the Fullscreen Slider images to be displayed on the page is 10 seconds. You can increase of decrease the timing:

  1. Expand the ( Library / sliders / fullscreen-slider / js ) folder.
  2. Open the “jquery.fs-slider.js” file.
  3. Scroll down to line 85.
  4. You’ll find the ‘interval’ property as in: interval : 10000,
  5. The timing is in milliseconds, 10000 equals 10 seconds, 15000 equals 15 seconds and 5000 equals 5 seconds.. just adjust accordingly.

Fullscreen Slider

In this tutorial, we’ll demonstrate how to update the Fullscreen Slider layout. The Fullscreen Slider ‘slides’ a series of div containers, from right to left. The default Fullscreen includes 5 slides, the content of each slide can be any html content, in the included example layout we’ve added an h3 text headline, a paragraph of regular text, a clickable button and a background image.

We’ll learn how to:

  • change the heading text
  • change the paragraph text
  • replace or remove the background image
  • add and remove slides

Change the headline text

  1. Expand the Library sliders >> fullscreen-slider (folder).
  2. Double click on the “fullscreen-slider” page to open.
  3. The H2 headline text is noted in the page by the description of ( Slider 1 Headline, etc )
  4. Click on the text with your mouse.
  5. Click on the H2 tag located on the Quick Tag Selector Toolbar.
  6. With the entire H2 tag selected, type a new headline.
  7. Save to update.

Change the paragraph text

This is regular text on the page, just change as you would normally change the text on a page.

Replace or remove the image

  1. The images for the fullscreen-slider are located in the Library >> sliders >> fullscreen-slider >> images (folder).
  2. The image size if variable for this slider, any size image you use, will expand to fit the full screen width. We recommend an image of at least ( 1024×640 pixels ) but any image size will actually work. Smaller images will appear more grainy as they are stretched to fit, so the larger your image, the better ( up to but not exceeding 1920 pixels.. more than that is over kill and will just clock bandwidth ).
  3. Import, drag or copy your replacement image into the ‘images’ folder, ( or any folder within your website ).
  4. OR drag your new image into the Library >> sliders >> fullscreen-slider >> images (folder).
  5. Open the ‘fullscreen-slider’ Library page.
  6. Switch to CODE view as you wont’ see the background image in the Library page directly
  7. Locate the image you want to change. for example the first image in your slider
  8. select the file name of the existing image, and type in the name of your new image: ( example: “1.jpg” we change to “new-image.jpg” to match the file name of the image we dragged into the ‘images’ folder.
  9. Because the slider uses a special background image style, instead of displaying the image directly on the page you won’t see the image in the page while in the design view. This also makes it a bit ‘cleaner’ and easier to edit the titles and paragraph text.

Add and remove slides

  1. Expand the Library >> sliders >> fullscreen-slider (folder).
  2. Open the ‘fullscreen-slider’ Library page.
  3. Switch to ‘Code’ view.
  4. To remove a slide, select the entire commented tag, and delete or ‘cut’.
  5. To add more slides, copy an existing slide including the comment tags
  6. Then paste above or below, pasting once for each new Slide you would like to add.
  7. You’ll now have a duplicate slide. Just change the content and images to suit your needs.
  8. Next and last, you just need to ‘update’ the indicator ‘dots’
  9. Scroll down the page and locate the following <span..> tag

    (*NOTE: for the Avante theme, you’ll need to do this in the “wrapper / fullscreen-slider-wrapper.htm ) page.
  10. Select and copy one of the ( <span></span> ) tags, and paste once for each additional image being added.
  11. as in: ( for a total of 3 images )<div id=”nav-dots” class=”nav-dots”>
    <span class=”nav-dot-current”></span>
    <span></span>
    <span></span>
    </div >
  12. as in: ( for a total of 5 images )<div id=”nav-dots” class=”nav-dots”>
    <span class=”nav-dot-current”></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    </div >

Change the slider intervals

The default timing for the Fullscreen Slider images to be displayed on the page is 10 seconds. You can increase of decrease the timing:

  1. Expand the ( Library / sliders / fullscreen-slider / js ) folder.
  2. Open the “jquery.fs-slider.js” file.
  3. Scroll down to line 85.
  4. You’ll find the ‘interval’ property as in: interval : 10000,
  5. The timing is in milliseconds, 10000 equals 10 seconds, 15000 equals 15 seconds and 5000 equals 5 seconds.. just adjust accordingly.