HTML & CSS Slider No JavaScript

HTML & CSS Slider No Javascript or jQuery


Just like the core mechanism for a jQuery slider, the HTML slider uses named anchor tags but doesn't require JavaScript or jQuery to get the movement to specific content locations on the page.

This is because it is a native browser object from the Document Object Model (DOM) which intern is quick & click responsive. i.e. just like the App Slider on Iphone Store.

Create and Format Headings


Create titles using the following HTML Format > Headings  H2, H3 or H4 to automatically create named anchor tags when the 'Table of Contents' is inserted.

The TOC automatic named anchor is hidden by the Google Sites system but is visible in the page source in the browser.

 [Right click page and select "Inspect element" or F12]

e.g. The rendered HTML will look like this :
<h3>
<a name="TOC-Slider-Title-1">
Slider Tile 1
</h3>


Insert Table of Contents (TOC)


Insert > 'Table of Contents' ('TOC') in a separate column
 Layout > Column from the menu.

In TOC properties [Cog Icon] > clear the width to maximise.

The Table of Content for this page , the named anchor automatically get added to the formatting headings:

Copy and Paste Table of Contents (TOC)


Save the page , and when not in page edit mode Copy and Paste [Bottom up is sometimes easier to make the selection of the TOC text] the table of contents text to get the all named anchor links as pure HTML links. i.e.  .../#TOC-SliderTitle

You can modify the names and remove numbers even delete headings you don't require for you slider. Remove the formating by selecting the entire pasted TOC using Tx menu button OR CTRL + \  [Control and Backslash] to remove borders and other formatting.

Important : Set the surrounding content div to a fixed height and hide overflow [viewing size i.e size of image, video or article etc...] Edit by using up and down arrows or remove the height to make general edits.



Pasted before removing formatting


Create Separate Columns


Finally place the links in a separate column or even sidebar to the content you want to slide up and down. You can then place the Slider content where ever you want on the content page, once they have a Heading format [i.e. Format > Heading 3].

 You should keep the main Title just to have a page reference to return to.Yo can also have it fixed above the slider content always visible like in the manual example below.


Manually Create the HTML Slider Gallery


Copy and paste the following HTML below into your Google Sites HTML page (Use the <HTML> button) . You can also try it in the LIVE HTML editor.

<h3>Slider Image Gallery Example:</h3>

<div style="height:550px;overflow-y:hidden">

<div style="height:550px;"><h4>Slider Image 1</h4></div>

<div style="height:550px;"><h4>Slider Image 2</h4></div>

<div style="height:550px;"><h4>Slider Image 3</h4></div>
<div style="height:550px;">
</div>
</div>


The Last empty div <div style="height:550px;"></div> is important so that the page has enough space to move up and not move down to the content! Check the number of </div> to closing </div> to make sure content is in between the main

<div style="height:550px;overflow-y:hidden">
... content ...
</div>

Insert > Images
&
Insert > Table of Contents and you have your core slider navigation HTML ready to go.