CSS3 and JS fade-in-out slider

slider.js

<section id="welcome-slider">
    <div data-lang="en" class="current" style="display: inline-block;">Welcome</div>
    <div>Kaya</div>
    <div data-lang="ar">&#1605;&#1585;&#1581;&#1576;&#1575;&#1611;</div>
    <div data-lang="ja">&#12356;&#12425;&#12387;&#12375;&#12419;&#12356;&#12414;&#12379;</div>
    <div data-lang="zh">&#27426;&#36814;</div>
    <div data-lang="vi">Ch&agrave;o m&#7915;ng</div>
    <div data-lang="id">Selamat Datang</div>
    <div data-lang="ms">Maligayang Pagdating</div>
</section>
<style type="text/css">
#welcome-slider {
    display: block;
    position: relative;
}
#welcome-slider div {
    display: none;
    width: 100%;
    height: 100%;
    padding: 30px 0;
    font-size: 35px;
    font-weight: 800;
    line-height: 40px;
    letter-spacing: 2px;
    text-align: center;
    color: rgba(50, 50, 50, 0.7);
    text-shadow: 0 0 0.3em rgba(0, 0, 0, 0.4);
    opacity: 0;
    transition: opacity 1s;
}
#welcome-slider div.current {
    opacity: 1;
}
</style>
<script type="text/javascript">
(function(window, undefined) {
// How long should a slide display for?
var timer = 4000;
var interval = null;
var slider = document.getElementById("welcome-slider");
var slides = slider.getElementsByTagName('div');
var numSlides = slides.length;

// If we have a slide for this language, show it first.
showInitialMessageForLanguage();

document.addEventListener('DOMContentLoaded', initializeSlider);

function showInitialMessageForLanguage() {
    var lang = navigator.language;
    var idx = lang.indexOf('-');

    // Strip the locale-specific extension from the language
    if (-1 !== idx) {
        lang = lang.substr(0, idx);
    }

    for (var i = 0; i < slides.length; i++) {
        var data_lang = slides[i].getAttribute('data-lang');

        if (lang !== data_lang) {
            continue;
        }

        hideAllSlides();
        slides[i].style.display = "inline-block";
        slides[i].className = "current";
    }
}

function hideAllSlides() {
    for (var i = 0; i < slides.length; i++) {
        slides[i].className = "";
        slides[i].style.display = "";
    }
}

function initializeSlider() {
    interval = setTimeout(goToNextSlide, timer);
}

function goToNextSlide() {
    var currentSlide = slider.getElementsByClassName('current')[0];
    var thisSlideId = Array.prototype.indexOf.call(slider.children, currentSlide);
    var nextSlideId = (thisSlideId + 1) % numSlides;

    slides[thisSlideId].removeAttribute("class");
    slides[thisSlideId].addEventListener("transitionend", function handler() {
        slides[thisSlideId].removeEventListener("transitionend", handler);
        slides[thisSlideId].removeAttribute("style");

        slides[nextSlideId].setAttribute("style", "display: inline-block");
        // If we don't put this in a timeout, it won't fade in.
        setTimeout(function() { slides[nextSlideId].setAttribute("class", "current"); }, 0);

        // Just in case we have doubled up on our interval...
        clearTimeout(interval);
        interval = setTimeout(goToNextSlide, timer);
    });
}
})(window);
</script>