Skip to main content
Code Review

Return to Question

added 6 characters in body; edited tags; edited title
Source Link
Jamal
Jamal
  • 35.2k
  • 13
  • 134
  • 238

interactive Interactive slider

  • 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 JavascriptJavaScript

htmlHTML:

jsJavaScript:

interactive slider

  • 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

html:

js:

Interactive slider

  • 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

HTML:

JavaScript:

Tweeted twitter.com/#!/StackCodeReview/status/446556464992518144
Source Link
sparcmen
sparcmen
  • 335
  • 1
  • 6

interactive slider

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>

js:

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%
        }