carusel

by Max Kovalov

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<carusel>
  <carusel-item>
    <div>
      hi1
    </div>
  </carusel-item>
  <carusel-item>
    <div>
      hi2
    </div>
  </carusel-item>
  <carusel-item>
    <div>
      hi3
    </div>
  </carusel-item>
  <carusel-item>
    <div>
      hi4
    </div>
  </carusel-item>
  <carusel-item>
    <div>
      hi5
    </div>
  </carusel-item>
</carusel>

CSS

carusel {
  display: block;
  width: 80%;
  height: 300px;
  overflow: hidden;
}
carusel-item {
  text-align: center;
  border: 1px solid black;
  box-sizing: border-box;
}
carusel .carusel_items_list {
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-items: stretch;
  position: relative;
  height: 50%;
}

JavaScript

var mod = angular.module('carusel', []);
mod.directive('carusel', [function(){
    function carusel_model(items, opt) {
        this.opt = $.extend({
            start_page: 0,
            page_size: 3,
            page_step: 1,
        }, opt);
        this.items = items || [];
        this.curr_page = opt.start_page;
    }
    carusel_model.prototype.get_curr_items = function(){
        return this.items_for_range(this.curr_page, this.curr_page);
    };
    carusel_model.prototype.items_to_page = function(new_page){
        return this.items_for_range(this.curr_page, new_page);
    };
    carusel_model.prototype.items_for_range = function(page1, page2){
        var range_itms = [];
        var start_itm = Math.min(page1, page2) * this.opt.page_step;
        var end_itm = Math.max(page1, page2) * this.opt.page_step
            + this.opt.page_size;
        var itms_num = this.items.length;
        var itm_ind;
        for(var i = start_itm; i < end_itm; i++)
        {
            itm_ind = ((i % itms_num)+itms_num)%itms_num;
            console.log('item_ind', itm_ind);
            range_itms.push(this.items[itm_ind]);
        }
        return range_itms;
    };
    carusel_model.prototype.set_page = function(page){
        var pages = this.count_pages();
        this.curr_page = ((page%pages)+pages)%pages;
    };
    carusel_model.prototype.count_pages = function(){
        return Math.ceil(parseFloat(this.items.length)/this.opt.page_step);
    };
    function carusel_view($el, model, opt){
        this.opt = $.extend({
            transition: 1000,
            margin: 20
        }, opt);
        this.$el = $el;
        this.model = model;
        this.$el_list = null;
        this.transition = null;
        this.btns_rendered = false;
        this.pagination_rendered = false;
    }
    carusel_view.prototype.render = function(opt){
        opt = $.extend({}, opt);
        if (!this.$el_list)
        {
            this.$el.html('');
            this.$el_list =...