What Is GSlides

GSlides is a Webasesed slideshow program that lets you focus on making it Pop

What Can You Make

ANYTHING

Including:

Photo Galleries

Mind Changing Presentations

Product Introductions

Why It's Better

While other programs lock you into a system, GSlides allows you to leverage code to make anything.

How To Use GSlides

Installing GSlides

GSlides currently requires the dev to self host it in thier project. You can do this by simply downloading the files and then bringing them into the project.

Next do these two links in your HTML:

<link rel="stylesheet" href="/GSlides/slideUi.css">

< script src="/GSlides/gslides.js"></script >

Basic Set Up

Every show is built from a div with the slidshow class and an id.

<div class="slideshow" id="slideshow1"></div>

Inside goes everything else including controls and slides which are made of slideSector classes

<div class="slideshow" id="slideshow1">
        <div class="chevronLeftContainer"> 
                <div class="chevronLeftMask"></div> 
        </div> 
        <div class="chevronRightContainer"> 
                <div class="chevronRightMask"></div> 
        </div> 
        <div class="slideSector"> </div> 
</div>

I know the last slide was a lot, but that's all needed to set up the btn controls.

Each slide gets its own slide sector div, after the first one the hidden class is added.

<div class="slideSector"></div>
<div class="slideSector hiddenSlide"></div>

put this js in with the id of your show and boom slide show

let slideShow1 = new slideShow('slideID');
slideShow.activeShow = slideShow1;

Advanced Features

GSlides Contains several js functions to help you manage the show

slideShowClass.goToSlide(number);
slideShowClass.nextSlide();
slideShowClass.backSlide();
slideShowClass.destroyShow(slideShowId);

There is also eventlistener for when the slide changes. It contains a detail parameter with some stuff in it.

document.addEventListener('slideChanged', (event)=>{})
event.detail:{
        slideShowId,
        slideNumber,
        changeDirection
}

You can set the pointers to animation classes

slideShowClass.forwardInAnimationClass = 'slideInAnimationClass'
slideShowClass.forwardOutAnimationClass = 'slideOutAnimationClass'
slideShowClass.backOutAnimationClass = 'slideOutAnimationReverseClass'
slideShowClass.backInAnimationClass = 'slideInAnimationReverseClass'

Download Demo Code

Download The Code For This Slide Show