TheBestTutorials.css Slideshow
Manual Slideshow
Displaying a manual slideshow with TheBestTutorials.css is very easy.
Just create many elements with the same class name:
Example
<img class="mySlides" src="img_lights.jpg">
<img class="mySlides" src="img_mountains.jpg">
<img class="mySlides" src="img_forest.jpg">
And two buttons to scroll the images:
Example
<a class="subhodaya-btn-floating" onclick="plusDivs(+1)">❯</a>
And add a JavaScript to select images:
Example
showDivs(slideIndex);
function plusDivs(n) {
showDivs(slideIndex += n);
}
function showDivs(n) {
var i;
var x = document.getElementsByClassName("mySlides");
if (n > x.length) {slideIndex = 1}
if (n < 1) {slideIndex = x.length} ;
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[slideIndex-1].style.display = "block";
}
JavaScript Explained
First, set the slideIndex to 1. (First picture)
Then call showDivs() to display the first image.
When the user clicks one of the buttons call plusDivs().
The plusDivs() function subtracts one or adds one to the slideIndex.
The showDiv() function hides (display="none") all elements with the class name "mySlides", and displays (display="block") the element with the given slideIndex.
If the slideIndex is higher than the number of elements (x.length), the slideIndex is set to zero.
If the slideIndex is less than 1 it is set to number of elements (x.length).
Automatic Slideshow
To display an automatic slideshow is even simpler.
You only need a little different JavaScript:
Example
carousel();
function carousel() {
var i;
var x = document.getElementsByClassName("mySlides");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
slideIndex++;
if (slideIndex > x.length) {slideIndex = 1}
x[slideIndex-1].style.display = "block";
setTimeout(carousel, 2000); // Change image every 2 seconds
}
HTML Slides
The slides do not have to be images.
They can be any HTML content:
Slide 1
Lorem ipsum
Slide 2
Lorem ipsum
Slide 3
Lorem ipsum
Example
<div class="subhodaya-container subhodaya-red">
<h1><b>Did You Know?</b></h1>
<h1><i>We plan to sell trips to the moon in the 2020s</i></h1>
</div>
Slideshow Caption
Add a caption text for each image slide with the subhodaya-display-* classes (topleft, topmiddle, topright, bottomleft, bottommiddle, bottomright or middle):
Example
<img src="img_fjords.jpg" style="width:100%">
<div class="subhodaya-display-bottomleft subhodaya-container subhodaya-padding-16 subhodaya-black">
Trolltunga, Norway
</div>
</div>
Slideshow Indicators
An example of using buttons to indicate how many slides there are in the slideshow, and which slide the user is currently viewing.
Example
<button class="subhodaya-btn" onclick="plusDivs(-1)">❮ Prev</button>
<button class="subhodaya-btn" onclick="plusDivs(1)">Next ❯</button>
<button class="subhodaya-btn demo" onclick="currentDiv(1)">1</button>
<button class="subhodaya-btn demo" onclick="currentDiv(2)">2</button>
<button class="subhodaya-btn demo" onclick="currentDiv(3)">3</button>
</div>
Another example:
Example
<img class="mySlides" src="img_nature.jpg">
<img class="mySlides" src="img_fjords.jpg">
<img class="mySlides" src="img_mountains.jpg">
<div class="subhodaya-center subhodaya-display-bottomleft" style="width:100%">
<div class="subhodaya-left" onclick="plusDivs(-1)">❮</div>
<div class="subhodaya-right" onclick="plusDivs(1)">❯</div>
<span class="subhodaya-badge demo subhodaya-border" onclick="currentDiv(1)"></span>
<span class="subhodaya-badge demo subhodaya-border" onclick="currentDiv(2)"></span>
<span class="subhodaya-badge demo subhodaya-border" onclick="currentDiv(3)"></span>
</div>
</div>
Images as Indicators
An example of using images as indicators:
Example
<img class="mySlides" src="img_nature_wide.jpg" style="width:100%">
<img class="mySlides" src="img_fjords_wide.jpg" style="width:100%">
<img class="mySlides" src="img_mountains_wide.jpg" style="width:100%">
<div class="subhodaya-row-padding subhodaya-section">
<div class="subhodaya-col s4">
<img class="demo subhodaya-border subhodaya-hover-shadow"
src="img_nature_wide.jpg" onclick="currentDiv(1)">
</div>
<div class="subhodaya-col s4">
<img class="demo subhodaya-border subhodaya-hover-shadow"
src="img_fjords_wide.jpg" onclick="currentDiv(2)">
</div>
<div class="subhodaya-col s4">
<img class="demo subhodaya-border subhodaya-hover-shadow"
src="img_mountains_wide.jpg" onclick="currentDiv(3)">
</div>
</div>
</div>
Animated Slides
Slide or fade in an element from the top, bottom, left or right of the screen with the TheBestTutorials-animate-* classes.
Example
<img class="mySlides subhodaya-animate-bottom" src="img_02.jpg">
<img class="mySlides subhodaya-animate-top" src="img_03.jpg">
<img class="mySlides subhodaya-animate-bottom" src="img_04.jpg">
Faded Animation
The TheBestTutorials-animate-fading class fades an element in and out (takes about 10 seconds).
Example
<img class="mySlides subhodaya-animate-fading" src="img_02.jpg">
<img class="mySlides subhodaya-animate-fading" src="img_03.jpg">
<img class="mySlides subhodaya-animate-fading" src="img_04.jpg">