6
\$\begingroup\$

Task:

Create an interactive slider that allows the user to view a given image gallery.

Slider controls:

  • See previous slide
  • See next slide
  • Quick navigation through the images / Paging - transition to an arbitrary slide

Properties of the object slide:

  • image
  • title
  • description
  • link

Settings slider:

  • Container - DOM-element slider
  • An array of images, links, titles and descriptions
  • Current slide
  • The time delay between turning
  • Speed of turning
  • Width slider
  • Height slider
  • Flag to show / hide title
  • Flag to show / hide description
  • Flag on / off auto rotate slide
  • Flag to show / hide button next / previous slide
  • Flag to show / hide the navigation bar slider / paging
  • Complete revolutions counter

Methods slider:

  • Generate a slider
  • Start Auto Play
  • Go to the slide №x
  • Next slide
  • Previous slide

Requirements:

  • Create a file default.css styles with the general settings page style
  • Create a file with parameters slider.css styles specifically slider
  • Create a file for the most slider.js slider
  • Width and height of the slider should not be described in a style file, and should be taken from the object parameters slider
  • Initialization command occurs slider var slider1 = slider (parameters), resulting in slider1 - will be subject to the above properties and methods.
  • Animation slider should take place by means of CSS3: transition: left / margin
  • Use only pure JavaScript

P.s. I'm a young programmer so I want to hear real reviews for further development.

HTML:

<!DOCTYPE HTML>

<html>
<head>
<meta charset="utf-8">
<title></title>
<link href="css/default.css" rel="stylesheet" type="text/css">
<link href="css/slider.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/slider.js"></script>
<script type="text/javascript">

    window.onload = function () {

            var arrImgs = ["images/bigImg1.jpg", "images/bigImg2.jpg", "images/bigImg3.jpg", "images/bigImg4.jpg", "images/bigImg5.jpg", "images/bigImg6.jpg"];
            var arrTitles = ["Title1", "Title2", "Title3", "Title4", "Title5", "Title6"];
            var arrDescriptions = ["Description1", "Description2", "Description3", "Description4", "Description5", "Description6"];
            var arrLinks = ["#", "#", "#", "#", "#", "#"];

            var arrSlideProperties = [arrImgs, arrTitles, arrDescriptions, arrLinks];

            var sliderOptions={
                containerForSlider: ".container",
                widthSlider:790,
                heightSlider:450,
                slideProperties:arrSlideProperties,
                showTitles: true,
                showDescriptions: true,
                showNextPrevButtons: true,
                showNavigationPanel: true,
                delayTime: 3000,
                speedTime: 2,
                autoRotate: false,
                fullCounter:0
            }

            var slider = Slider(sliderOptions);

    }

</script>

</head>
<body>
    <div class="container"><div>
</body>
</html>

JavaScript:

function Slider(sliderOpt) {

    var inteval = 0;
    var numSlide = 1;

    this.fullCounter = sliderOpt.fullCounter;

    (this.createSlider = function() {
        if (sliderOpt.containerForSlider.charAt(0) == ".") {
            var container = document.getElementsByClassName(sliderOpt.containerForSlider.substring(1, sliderOpt.containerForSlider.length))[0];
        }
        if (sliderOpt.containerForSlider.charAt(0) == "#") {
            var container = document.getElementById(sliderOpt.containerForSlider.substring(1, sliderOpt.containerForSlider.length));
        }
        container.style.width = sliderOpt.widthSlider + "px";
        container.style.height = sliderOpt.heightSlider + "px";
        container.style.border = "2px solid #808080";

        var innerContainer = document.createElement("ul");
        container.appendChild(innerContainer);
        innerContainer.className = "innerContainer";
        innerContainer.style.width = sliderOpt.widthSlider * sliderOpt.slideProperties[0].length + "px";
        innerContainer.style.height = sliderOpt.heightSlider + "px";

        for (var i = 0; i < sliderOpt.slideProperties[0].length; i++) {
            var li = document.createElement("li");
            innerContainer.appendChild(li);
            li.className = "slide";
            li.style.width = sliderOpt.widthSlider + "px";
            li.style.height = sliderOpt.heightSlider + "px";

            var a = document.createElement('a');
            li.appendChild(a);
            a.style.background = "url(" + sliderOpt.slideProperties[0][i] + ") no-repeat";

            (function(e) {
                a.onclick = function() {
                    location.href = sliderOpt.slideProperties[3][e];
                }
            })(i);

            if (sliderOpt.showTitles == true) {
                var title = document.createElement("div");
                a.appendChild(title);
                title.className = "title";
                title.style.width = sliderOpt.widthSlider + "px";
                title.innerHTML = sliderOpt.slideProperties[1][i];
            }

            if (sliderOpt.showDescriptions == true) {
                var title = document.createElement("div");
                a.appendChild(title);
                title.className = "description";
                title.style.width = sliderOpt.widthSlider + "px";
                title.style.marginTop = sliderOpt.heightSlider - 50 + "px";
                title.innerHTML = sliderOpt.slideProperties[2][i];
            }
        }

        if (sliderOpt.showNextPrevButtons == true) {
            var leftButton = document.createElement('a');
            container.appendChild(leftButton);
            leftButton.className = "leftButton";

            var rightButton = document.createElement('a');
            container.appendChild(rightButton);
            rightButton.className = "rightButton";
        }

        var navigationPanel = document.createElement('div');
        container.appendChild(navigationPanel);
        navigationPanel.className = "navigationPanel";

        for (var i = 0; i < sliderOpt.slideProperties[0].length; i++) {
            var navigationPanelButton = document.createElement('a');
            navigationPanel.appendChild(navigationPanelButton);
            navigationPanelButton.className = "navigationPanelButton";
            if (i == 0) navigationPanelButton.style.background = "url(images/buttonNavigation.jpg) no-repeat 1% 55%";
        }


    })();

    (this.runAutoRotate = function() {
        if (sliderOpt.autoRotate == true) {
            var innerContainer = document.getElementsByClassName("innerContainer")[0];
            var navigationPanelButton = document.getElementsByClassName("navigationPanelButton");
            interval = setInterval(function() {
                if (numSlide == sliderOpt.slideProperties[0].length) {
                    innerContainer.style.MozTransition = "margin-left " + sliderOpt.speedTime + "s ease";
                    innerContainer.style.webkitTransition = "margin-left " + sliderOpt.speedTime + "s ease";
                    innerContainer.style.marginLeft = -40 + "px";
                    navigationPanelButton[numSlide - 1].style.background = "url(images/buttonNavigation.jpg) no-repeat 97% 55%";
                    numSlide = 1;
                    navigationPanelButton[numSlide - 1].style.background = "url(images/buttonNavigation.jpg) no-repeat 1% 55%";
                    this.fullCounter++;
                    console.log(this.fullCounter); // counter full rotate(show console)
                } else {
                    innerContainer.style.MozTransition = "margin-left " + sliderOpt.speedTime + "s ease";
                    innerContainer.style.webkitTransition = "margin-left " + sliderOpt.speedTime + "s ease";
                    innerContainer.style.marginLeft = -40 - sliderOpt.widthSlider * numSlide + "px";
                    navigationPanelButton[numSlide - 1].style.background = "url(images/buttonNavigation.jpg) no-repeat 97% 55%";
                    numSlide++;
                    navigationPanelButton[numSlide - 1].style.background = "url(images/buttonNavigation.jpg) no-repeat 1% 55%";
                }
            }, sliderOpt.delayTime);
        }
    })();

    (this.prevSlideRotate = function() {
        var leftButton = document.getElementsByClassName("leftButton")[0];
        var innerContainer = document.getElementsByClassName("innerContainer")[0];
        var navigationPanelButton = document.getElementsByClassName("navigationPanelButton");

        leftButton.addEventListener("click", function() {
            if (sliderOpt.autoRotate == true) {
                clearInterval(interval);
            }
            if (numSlide == 1) {
                innerContainer.style.MozTransition = "margin-left " + sliderOpt.speedTime + "s ease";
                innerContainer.style.webkitTransition = "margin-left " + sliderOpt.speedTime + "s ease";
                innerContainer.style.marginLeft = -40 - sliderOpt.widthSlider * (sliderOpt.slideProperties[0].length - 1) + "px";
                navigationPanelButton[numSlide - 1].style.background = "url(images/buttonNavigation.jpg) no-repeat 97% 55%";
                numSlide = sliderOpt.slideProperties[0].length;
                navigationPanelButton[numSlide - 1].style.background = "url(images/buttonNavigation.jpg) no-repeat 1% 55%";
            } else {
                innerContainer.style.MozTransition = "margin-left " + sliderOpt.speedTime + "s ease";
                innerContainer.style.webkitTransition = "margin-left " + sliderOpt.speedTime + "s ease";
                innerContainer.style.marginLeft = -40 - sliderOpt.widthSlider * (numSlide - 2) + "px";
                navigationPanelButton[numSlide - 1].style.background = "url(images/buttonNavigation.jpg) no-repeat 97% 55%";
                numSlide--;
                navigationPanelButton[numSlide - 1].style.background = "url(images/buttonNavigation.jpg) no-repeat 1% 55%";
            }
        }, false);
    })();

    (this.nextSlideRotate = function() {
        var rightButton = document.getElementsByClassName("rightButton")[0];
        var innerContainer = document.getElementsByClassName("innerContainer")[0];
        var navigationPanelButton = document.getElementsByClassName("navigationPanelButton");

        rightButton.addEventListener("click", function() {
            if (sliderOpt.autoRotate == true) {
                clearInterval(interval);
            }
            if (numSlide == sliderOpt.slideProperties[0].length) {
                innerContainer.style.MozTransition = "margin-left " + sliderOpt.speedTime + "s ease";
                innerContainer.style.webkitTransition = "margin-left " + sliderOpt.speedTime + "s ease";
                innerContainer.style.marginLeft = -40 + "px";
                navigationPanelButton[numSlide - 1].style.background = "url(images/buttonNavigation.jpg) no-repeat 97% 55%";
                numSlide = 1;
                navigationPanelButton[numSlide - 1].style.background = "url(images/buttonNavigation.jpg) no-repeat 1% 55%";
            } else {
                innerContainer.style.MozTransition = "margin-left " + sliderOpt.speedTime + "s ease";
                innerContainer.style.webkitTransition = "margin-left " + sliderOpt.speedTime + "s ease";
                innerContainer.style.marginLeft = -40 - sliderOpt.widthSlider * (numSlide) + "px";
                navigationPanelButton[numSlide - 1].style.background = "url(images/buttonNavigation.jpg) no-repeat 97% 55%";
                numSlide++;
                navigationPanelButton[numSlide - 1].style.background = "url(images/buttonNavigation.jpg) no-repeat 1% 55%";
            }
        }, false);
    })();

    (this.jumpToSlideRotate = function() {
        var innerContainer = document.getElementsByClassName("innerContainer")[0];
        var navigationPanelButton = document.getElementsByClassName("navigationPanelButton");

        for (var i = 0; i < sliderOpt.slideProperties[0].length; i++) {

            (function(e) {
                navigationPanelButton[i].addEventListener("click", function() {
                    if (sliderOpt.autoRotate == true) {
                        clearInterval(interval);
                    }
                    innerContainer.style.MozTransition = "margin-left " + sliderOpt.speedTime + "s ease";
                    innerContainer.style.webkitTransition = "margin-left " + sliderOpt.speedTime + "s ease";
                    innerContainer.style.marginLeft = -40 - sliderOpt.widthSlider * (e) + "px";
                    navigationPanelButton[numSlide - 1].style.background = "url(images/buttonNavigation.jpg) no-repeat 97% 55%";
                    numSlide = e + 1;
                    navigationPanelButton[numSlide - 1].style.background = "url(images/buttonNavigation.jpg) no-repeat 1% 55%";
                }, false);
            })(i);

        }
    })();

}

defaul.css:

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    background-color:#000;
}

        .container {
            margin: 20px auto;
            border-radius: 7px;
            overflow: hidden;
        }

slider.css:

.innerContainer {
    position: relative;
    background-color: #fff;
    display: block;
    margin: 0 0 0 -40px;
    list-style: none;
}

        .slide {
            display: block;
            float: left;
        }

                .slide a {
                    display: block;
                    width: 100%;
                    height: 100%;
                }

                        .title {
                            width: 100%;
                            height: 50px;
                            position: absolute;
                            font-size: 34px;
                            font-weight: bold;
                            text-align: center;
                        }

                        .description {
                            width: 100%;
                            height: 50px;
                            position: absolute;
                            font-size: 34px;
                            font-weight: bold;
                            padding-left: 20px;
                        }

.leftButton {
    display: block;
    width: 40px;
    height: 40px;
    float: left;
    margin: -245px 0 0 20px;
    border-radius: 20px;
    background: url(../images/button.jpg) no-repeat 5% 90%;
    opacity: 0.5;
    cursor: pointer;
}

.rightButton {
    display: block;
    width: 40px;
    height: 40px;
    float: right;
    margin: -245px 20px 0 0;
    border-radius: 20px;
    background: url(../images/button.jpg) no-repeat 88% 90%;
    opacity: 0.5;
    cursor: pointer;
}

        .leftButton:hover, .rightButton:hover {
            opacity: 0.6;
        }

.navigationPanel {
    width: 210px;
    height: 20px;
    float: right;
    margin: -40px 15px 0 0;
    position: relative;
}

        .navigationPanelButton {
            display: block;
            width: 14px;
            height: 14px;
            border-radius: 6px;
            float: left;
            margin-left: 12px;
            cursor: pointer;
            background: url(../images/buttonNavigation.jpg) no-repeat 97% 55%
        }
\$\endgroup\$
4
  • \$\begingroup\$ Just to be clear, when you say "slider", you mean "slideshow", correct? Not like a slider you'd use to control e.g. volume. \$\endgroup\$
    – Flambino
    Commented Mar 19, 2014 at 22:57
  • \$\begingroup\$ meant image rotator) \$\endgroup\$
    – sparcmen
    Commented Mar 19, 2014 at 22:59
  • \$\begingroup\$ such task I had at the interview! \$\endgroup\$
    – sparcmen
    Commented Mar 19, 2014 at 23:01
  • \$\begingroup\$ what do you advise?) \$\endgroup\$
    – sparcmen
    Commented Mar 20, 2014 at 5:19

1 Answer 1

Reset to default
1
\$\begingroup\$

From a once over:

  • Do not use window.onload = function () { use window.addEventListener("load",
  • In arrImgs, if all your images have the same folder as a prefix, then you should add support for an image folder
  • Avoid Hungarian notation, arrImgs should images, drop that arr, it's important
  • Prefer spelling out variables inteval -> interval
  • For you slider.js -> use JSHint.com, there are a lot of style problems
  • You are setting a lot of things in your JavaScript that should be kept in .css files
  • innerContainer.style.MozTransition = "margin-left " + sliderOpt.speedTime + "s ease"; and the surrounding statements appear 7(!) times in your code, I strongly suggest a common helper function.

I think you need to use JsHint.com, check for copy pasted code, and fix that, and then come back with your fixed code in a new question. *

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.