JSFiddle - React, Tailwind, and code Playground

Breaking News

by Jennifer Perrin

HTML

<div class="BreakingNewsController easing" id="breakingnews1">
    <div class="bn-title"></div>
    <ul>
        <li><a href="#">Lorem Ipsum is simply dummy text of the printing and typesetting industry bu deneme text metinidir</a>
        </li>
        <li><a href="#">It is a long established fact that a reader will be distracted</a>
        </li>
        <li><a href="#">Many desktop publishing packages</a>
        </li>
        <li><a href="#">All the Lorem Ipsum generators on the Internet tend to repeat predefined</a>
        </li>
        <li><a href="#">The standard chunk of Lorem Ipsum used</a>
        </li>
        <li><a href="#">English versions from the 1914 translation by H. Rackham.</a>
        </li>
    </ul>
    <div class="bn-arrows"><span class="bn-arrows-left"></span><span class="bn-arrows-right"></span>
    </div>
</div>
<br /><br />
<div class="BreakingNewsController easing" id="breakingnews2">
    <div class="bn-title"></div>
    <ul>
        <li><a href="#">1. Lorem Ipsum is simply dummy text of the printing and typesetting industry</a>
        </li>
        <li><a href="#">2. It is a long established fact that a reader will be distracted</a>
        </li>
        <li><a href="#">3. Many desktop publishing packages</a>
        </li>
        <li><a href="#">4. All the Lorem Ipsum generators on the Internet tend to repeat predefined</a>
        </li>
        <li><a href="#">5. The standard chunk of Lorem Ipsum used</a>
        </li>
        <li><a href="#">6. English versions from the 1914 translation by H. Rackham.</a>
        </li>
        <li><a href="#">7. Bu metin deneme amaçlıdır  the standard chunk of Lorem Ipsum used</a>
        </li>
    </ul>
    <div class="bn-arrows"><span class="bn-arrows-left"></span><span class="bn-arrows-right"></span>
    </div>
</div>

CSS

.BreakingNewsController {
    width:100%;
    overflow:hidden;
    background:#FFF;
    height:auto;
    position:relative;
}

.BreakingNewsController .bn-title {
    display:inline-block;
    float:left;
    padding:10px 20px;
    background:#5aa628;
    color:#FFF;
}

.BreakingNewsController ul {
    padding:0;
    margin:0;
    display:block;
    list-style:none;
    position:absolute;
    left:180px;
    right:50px;
}

.BreakingNewsController ul li {
    list-style:none;
    padding:10px 20px;
    display:none;
}

.BreakingNewsController ul li a {
    text-decoration:none;
    color:#333;
    display:inline-block;
    overflow:hidden;
    padding:0;
}

.BreakingNewsController .bn-arrows {
    display:inline-block;
    float:right;
    width:50px;
    position:absolute;
    right:0;
    top:0;
    bottom:0;
}

.BreakingNewsController .bn-arrows span {
    display:block;
    width:20px;
    position:absolute;
    top:0;
    bottom:0;
    cursor:pointer;
    opacity:0.2;
}

.BreakingNewsController .bn-arrows span:hover {
    opacity:1;
}

.BreakingNewsController .bn-arrows-left {
    left:0;
    background:url(../img/bn-arrows.png) left center no-repeat;
}

.BreakingNewsController .bn-arrows-right {
    right:10px;
    background:url(../img/bn-arrows.png) right center no-repeat;
}

.easing a, .easing span {
    transition:.25s linear;
    -moz-transition:.25s linear;
    -webkit-transition:.25s linear;
}

JavaScript

(function (jQuery) {

    $.fn.BreakingNews = function (settings) {
        var defaults = {
            background: '#FFF',
            title: 'NEWS',
            titlecolor: '#FFF',
            titlebgcolor: '#5aa628',
            linkcolor: '#333',
            linkhovercolor: '#5aa628',
            fonttextsize: 16,
            isbold: false,
            border: 'none',
            width: '100%',
            autoplay: true,
            timer: 3000,
            modulid: 'brekingnews',
            effect: 'fade' //or slide	
        };
        var settings = $.extend(defaults, settings);

        return this.each(function () {
            settings.modulid = "#" + $(this).attr("id");
            var timername = settings.modulid;
            var activenewsid = 1;

            if (settings.isbold == true) fontw = 'bold';
            else fontw = 'normal';

            if (settings.effect == 'slide') $(settings.modulid + ' ul li').css({
                'display': 'block'
            });
            else $(settings.modulid + ' ul li').css({
                'display': 'none'
            });

            $(settings.modulid + ' .bn-title').html(settings.title);
            $(settings.modulid).css({
                'width': settings.width,
                'background': settings.background,
                'border': settings.border,
                'font-size': settings.fonttextsize
            });
            $(settings.modulid + ' ul').css({
                'left': $(settings.modulid + ' .bn-title').width() + 40
            });
            $(settings.modulid + ' .bn-title').css({
                'background': settings.titlebgcolor,
                'color': settings.titlecolor,
                'font-weight': fontw
            });
            $(settings.modulid + ' ul li a').css({
                'color': settings.linkcolor,
                'font-weight': fontw,
                'height': parseInt(settings.fonttextsize) + 6
            });
            $(settings.modulid + '...