jquery carousel slider

readme.md

jQuery jcarousel slider

$("selector").yx_rotaion({auto: true});

jquery jcarousel.js

(function($){
    $.fn.extend({
        yx_rotaion: function(options) {
            var defaults = {
                during:3000,
                btn:true,
                focus:true,
                title:true,
                auto:true
            }
            var options = $.extend(defaults, options);
            return this.each(function(){
                var o = options;
                var loop = null;
                var curr_index = 0;
                var $this = $(this);
                var $li = $this.find("li");
                var li_lenght = $li.length;

                $this.css({
                    position:'relative',
                    overflow:'hidden',
                    width: '100%'
                });

                $this.find("li").css({
                    position:'absolute',
                    left:0,
                    top:0
                }).hide();

                $li.first().show();
                if(o.focus) $this.append('<div class="yx-rotation-focus"><\/div>');
                var $focus = $(".yx-rotation-focus");
                $li.each(function(index, el) {
                    var el = $(el),
                        alt = el.find("img").attr("alt");
                    var link = $("<a>", {
                        href: el.find('a').attr("href"),
                        title: alt,
                        text: alt
                    });
                    $focus.append(link);
                })
                var $f = $focus.children("a");

                if(o.auto) loop = setInterval(function(){
                    init();
                },o.during);

                $f.first().addClass("hover");
                $f.hover(function(e){
                    $(this).addClass("hover");
                }, function (e) {
                    if (o.auto) loop = setInterval(() => init(), o.during);
                });

                function init() {
                    ++curr_index >= li_lenght && (curr_index = 0),
                    curr_index < 0 && (curr_index = curr_index - 1),
                    $li.eq(curr_index).fadeIn(300),
                    $li.not($li.eq(curr_index)).stop().fadeOut(300),
                    $f.eq(curr_index).addClass("hover"),
                    $f.not($f.eq(curr_index)).removeClass("hover")
                }

                $f.on("mouseover",function(){
                    clearTimeout(loop);
                    var index = $(this);
                    loop = setTimeout(() => {
                        var i = index.index();
                        $(this).addClass("hover");
                        $focus.children("a").not(index).removeClass("hover");
                        $li.eq(i).fadeIn(300);
                        $li.not($li.eq(i)).fadeOut(300);
                        curr_index = i;
                    }, 100);

                });

            });
        }
    });

})(jQuery);

style.scss

.slider-warp {
      width: calc(100% - 284px);
      display: inline-flex;
      flex: 1 1 auto;
      img {
        max-width: 100%;
      }
      .yx-rotaion {
        margin: 10px;
        margin-bottom: 0;
      }

      .yx-rotation-focus {
        position: absolute;
        height: 40px;
        line-height: 40px;
        bottom: 0;
        z-index: 2;
        display: flex;
        width: 100%;
        background: #000;
        opacity: 0.7;
        text-align: center;
        a {
          display: inline;
          color: #ffffff;
          flex: 1 1 auto;
          border-right: 1px solid #fff;
          &:hover, &.hover {
            background: #f01742;
          }
          &:last-child {
            border-right: none;
          }
        }
      }
    }