Dynamic full-width content slider

by lasha

HTML

<div class="main-container">
    <div class="container">
        <div>floateded div</div>
        <div>floateded div</div>
        <div>floateded div</div>
        <div>floateded div</div>
        <div>floateded div</div>
        <div>floateded div</div>
    </div>
</div>
<span class="prev">previous</div>
<span class="next">next</div>

CSS

body {
    margin: 0;
}

.main-container {
    position: relative;
    overflow: hidden;
}

.container {
    position: relative;
}

.container div {
    float: left;
    width: 100%;
    height: 100px;
    border: 1px solid #000;
    /* box-sizing: border-box; */
}

JavaScript

var myObject = {
    theWidth: 0,
    getTheElements: function(){
        return $(".container div");
    },
    $theElements: "", // blank default, overwritten by getParentEl
    getWidth: function(){
        //console.log(this.theWidth);
    },
    getParentEl: function(){
        console.log(this.$theElements.parent().width());
        return this.$theElements.parent();
    },
    $parentEl: "", // default is blank, overwritten by getParentEl
    elsCount: 1,
    activeEl: 1,
    setWidth: function(newWidth){
        console.log("newWidth is: " + newWidth);
        this.theWidth = newWidth;
        this.$theElements.outerWidth(this.theWidth);
        this.$parentEl.width( this.theWidth * this.elsCount );
    },
    init: function(){
        this.$theElements = this.getTheElements();
        this.elsCount = this.$theElements.length;
        this.$parentEl = this.getParentEl();
    }
}

myObject.init();
// myObject.setWidth(150);
// myObject.getWidth();

$(function(){
    var $window = $(window);
    $window.resize(function(event){
        var newWidth = $window.width();
        myObject.setWidth(newWidth);
        //myObject.getWidth();
        myObject.$parentEl.css({
            left: -myObject.theWidth * myObject.activeEl
        });
    }).resize().resize();
    
    $(".next").on("click", function(){
        myObject.activeEl += 1;
        console.log(myObject.activeEl);
        myObject.$parentEl.animate({
            left: -myObject.theWidth * myObject.activeEl
        },1000);
    });
});