Tag: JavaScript

Currently I am coding and fully self-taught. Since I know that my code is far from perfect, I ask for advice and tips for improvement. Do not hesitate to submit comments on the topic – helpful advice and suggestions are very welcome.
It does not matter if the advice is for my HTML file, JavaScript syntax, or CSS knowledge. I really want to improve and every help is great!

Edit: I've uploaded a demo to my workspace, which you can visit at https://cedricjansen.com

Here's a picture to help you understand what I'm talking about:

Let me try to explain my concept.
I created one div with the id = "meadow" Here you can specify an interval as an attribute as well as the width and height of the div.
All images are drawn later in this div #, so it acts as a container and wrapper.

Then I created one Tabulatorcontainer with the id = "Meadow Tabs" which contains all the tabs. Tabs are small dots that appear at the bottom of the main area, each referring to an image. The point with the currently displayed image is highlighted and marked with the class Active Reiter,

When the HTML file is loaded, all images are preloaded and then the first image (depending on which tab is active at startup) is displayed. Now you can either wait for the specified interval until the image changes by itself, or you can click on one of the tabs to instantly jump to a specific image.

The pause button can pause and continue the interval.

INDEX.HTML

MEADOW.JS

var tabs = ();
var fetchedImages = ();
var imageUrls = ();
var images = ();

var carouselIndex = ();
var meadow;

var pauseTab = document.getElementsByClassName('pause-tab')(0);
pauseTab.addEventListener("click", pausePlay);

const meadowDom = document.getElementById('meadow');
//Gets the interval time.
const interval = meadowDom.getAttribute('interval');
const banner = document.getElementsByClassName('banner')(0);

//Grabs the attributes from the html file for width and height
const width = meadowDom.getAttribute('m-width');
const height = meadowDom.getAttribute('m-height');

//Looks if the the attribute show is present;
const showTabs = document.getElementById("meadow-tabs").hasAttribute('show');

//If the attribute show is not present, hide the tabs
if(!showTabs)
{
    document.getElementById("meadow-tabs").style.display = "none";
}

//Set the custom height and width of the banner container, to which the images are drawn.
banner.style.height = height;
banner.style.width = width;


var loader = document.getElementById("meadow-load");


//Get all Tabs
var fetchedTabs = document.getElementById("meadow-tabs").querySelectorAll('.meadow-tab');

for( var i = 0; i < fetchedTabs.length; i++ )
{
    //Push all Image Links from the tabs to the ImageUrls array to preload them
    imageUrls.push(fetchedTabs(i).getAttribute('image'));
}
//Preloads the images
preload(imageUrls);
// Shows the first image of the active tab
initImage();



for( var i = 0; i < fetchedTabs.length; i++)
{

    fetchedTabs(i).addEventListener("click", toggleTab);
}

// Function used then pause button is clicked. Toggles between
// pausing and resuming the carousel.
function pausePlay()
{
    if(pauseTab.classList.contains('active'))
    {
        pauseTab.classList.remove('active');
        meadow = setInterval(play, interval);
    }
    else
    {
        pauseTab.classList.add('active');
        clearInterval(meadow);
    }
}

// Used when a certain tab is clicked. If the tab is not activated,
// activate it and deactive the current activated tab.
// Checks if the carousel is paused. If yes, keep it paused, if no
// continue from there with the given interval time.
function toggleTab()
{

    if( event.target.classList.contains('.active-tab'))
    {
        return;
    }
    var activeTab = document.getElementsByClassName('active-tab');
    console.log(activeTab);
    activeTab(0).classList.remove('active-tab');

    event.target.classList.add('active-tab');
    console.log("EVENT: " + event.target);
    changeImage(event.target);
    clearInterval(meadow);
    if(!pauseTab.classList.contains('active'))
    {
        meadow = setInterval(play, interval);   
    }

}

// Function which removes the active tab.
function removeActiveTab()
{
    var activeTab = document.getElementsByClassName('active-tab');
    activeTab(0).classList.remove('active-tab');
}

//Function to change the image.
function changeImage( tabToChangeTo )
{
    var imageToChangeTo = tabToChangeTo.getAttribute('image');
    banner.style.backgroundImage = "url('" + imageToChangeTo + "')" ;
}


//Used in the play function to continue to the next tab and change the image.
function changeInPlay( indexToChangeTo )
{
    var tab = document.querySelectorAll('(index="'+ indexToChangeTo + '")')(0);
    changeImage(tab);
    removeActiveTab();
    tab.classList.add('active-tab');
}

//Display the first image of the first active tab.
function initImage()
{
    var activeTab = document.getElementsByClassName('active-tab')(0);
    var activeImage = activeTab.getAttribute('image');
    banner.style.backgroundImage = "url('" + activeImage + "')" ;
}

// Used in setInterval to iterate over the tabs and show the different images.
function play()
{

    var activeTab = document.getElementsByClassName('active-tab')(0);
    var activeIndex = activeTab.getAttribute('index');

    var nextIndex;
    if( activeIndex == (fetchedTabs.length - 1))
    {
        nextIndex = 0;
    }
    else 
    {
        nextIndex = +activeIndex + 1;
    }
    changeInPlay(nextIndex);

}

function preload( urls ) {
    for (var i = 0; i < urls.length; i++) {
        //Preload the images from the passed urls and keep them in a reference
        // so that they aren't erased from storage.
        images(i) = new Image();
        images(i).src = urls(i);
    }
    //Hide the carousel loader after images are preloaded.
    loader.style.display = 'none';
}

//Set the initial interval for images to change.
meadow = setInterval(play, interval);

MEADOW.CSS

html
{
    width: 100%;
    height: 100%;
}

html body
{
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
}

.meadow.demo.banner
{
    width: 100%;
    height: 100%;

    min-height: 100px;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    background-color: black; 

    position: relative;

    background-size: cover;
}

.meadow.demo.banner .meadow-loader
{
    position: absolute;
    width: 20px;
    height: 20px;

    border-radius: 10px;
    background-color:white;

    animation: meadow-pulse 2s infinite;
}

@keyframes meadow-pulse
{
    0%
    {
        opacity: 0;
    }
    50%
    {
        opacity: 0.8;
    }
    100%
    {
        opacity: 0;
    }
}

.meadow.demo.banner .pause-tab
{
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 20px;
    background-color: white;

    left: 10px;
    bottom: 10px;

    opacity: 0.5;
}

.meadow.demo.banner .pause-tab:hover
{
    cursor: pointer;
}

.meadow.demo.banner .pause-tab.active
{
    opacity: 1;
}

.meadow.demo.banner .tabs-bottom
{
    width: auto;
    min-width: 45px;
    max-width: 100px;

    position: absolute;

    min-height: 15px;
    height: 5%;

    display: flex;
    justify-content: center;
    align-items: center;

    bottom: 5px;

    background-color: rgba(152, 152, 152, 0.5);
    border-radius: 10px;
}

.meadow.demo.banner .tabs-bottom .meadow-tab
{
    min-width: 7px;
    min-height: 7px;
    border-radius: 5px;
    margin-left: 2px;
    margin-right: 2px;

    background-color: black;
}

.meadow.demo.banner .tabs-bottom .meadow-tab:hover
{
    cursor: pointer;
}

.meadow.demo.banner .tabs-bottom .meadow-tab.active-tab
{
    background-color: white;
}

.meadow.demo.cover
{
    width: 100%;
    height: 100%;
    background-color: black;
}

If anyone finds this post and wants to create their own carousel / image slider, you can use that code and recreate it to your liking.

I called it Meadow because I was sitting at a meadow, and then came up with the idea to build an Image Slider thing.

Thank you for your help!