JSFiddle - React, Tailwind, and code Playground

by sloga

HTML

<link rel="stylesheet" href="http://www.owlgraphic.com/owlcarousel/owl-carousel/owl.carousel.css">
<link rel="stylesheet" href="http://www.owlgraphic.com/owlcarousel/owl-carousel/owl.theme.css">
<script src="http://www.owlgraphic.com/owlcarousel/owl-carousel/owl.carousel.js"></script>
<div id="custom-pag-place"></div>

<div id="owl-demo" class="owl-carousel owl-theme">

    <div class="item"><a href="http://www.asi.calpoly.edu/events/frontevent/3140" title="link opens in a new window"><img src="http://www.asi.calpoly.edu/admin/img/upScroll/1428333645_MM_Web-Button.jpg" alt="Mustang Mile Poster" border="0" /></a>
            <div class="details">
            <h3>4th Annual Mustang Mile</h3> 
            <p>
            <span></span><br /><!-- ad desc or tagline -->
            <span>May 7, 2015</span><br /><!-- event date -->
            <span>6pm</span><br /><!-- event time(s) -->
            <span>Recreation Center Entrance</span><br /><!-- event location -->
            <span></span><!-- other info -->
            </p>
            <p><a href="http://www.asi.calpoly.edu/events/frontevent/3140" title="link opens in a new window">More Mustang Mile details</a></p>
            </div>
</div>
        
<div class="item"><a href="http://www.asi.calpoly.edu/club-recognition" title="link opens in a new window"><img src="http://www.asi.calpoly.edu/admin/img/upScroll/1428419044_Nominations_Web-Button.jpg" alt="Call for Nominations Poster" border="0" /></a>
            <div class="details">
            <h3>4th Annual Club Awards</h3>
            <p>
            <span>Call for Nominations</span><br /><!-- ad desc or tagline -->
            <span>Due May 5, 2015</span><br /><!-- event date -->
            <span>5pm</span><br /><!-- event time(s) -->
            <span></span><br /><!-- event location -->
            <span></span><!-- other info -->
            </p>
            <p><a href="http://www.asi.calpoly.edu/club-recognition" title="link opens in a new window">More Call...

CSS

#owl-demo .item img {
    display: block;
    float:left;
    width: 70%;
    height: auto;
}

#owl-demo .details {
    float:left;
    width:27%;
    padding:1%
}

#owl-demo .details h3 { /* this would ad title from DB */
    font-size:1.2em;
}

.owl-theme .owl-controls {
    position: relative;
}


.owl-theme .owl-controls .item-link {
    position: relative;
    display: block;
    width: 105px;
    height: 70px;
    margin: 0 2px;
    border-bottom: 4px solid #ccc;
    outline: none;
}

.owl-theme .owl-controls .item-link:focus {
    -webkit-box-shadow: 0 0 8px #cc4895;
    -moz-box-shadow: 0 0 8px #cc4895;
    box-shadow: 0 0 8px #cc4895;
    outline: none;
}

.owl-theme .owl-controls .active .item-link {
    border-bottom: 4px solid #cc4895;
}

.owl-theme .owl-controls .owl-page span {
    display: none;
}

.owl-theme .prev-owl,
.owl-theme .next-owl {
    position: absolute;
    top: 20px;
    display: block;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #c0c0c0;
    outline: none;
}

.owl-theme .prev-owl:focus,
.owl-theme .next-owl:focus {
    -webkit-box-shadow: 0 0 8px #cc4895;
    -moz-box-shadow: 0 0 8px #cc4895;
    box-shadow: 0 0 8px #cc4895;
}

.owl-theme .prev-owl {
    left: 24px;
}

.owl-theme .next-owl {
    right: 24px;
}

.owl-pagination{
    width: 570px;
    height: 74px;
    margin: 0 auto;
    overflow: hidden;
}

JavaScript

var owl;

$(document).ready(function () {

    owl = $("#owl-demo");

    owl.owlCarousel({
        autoPlay : 6000,
        navigation: false, // Show next and prev buttons
        slideSpeed: 300,
        paginationSpeed: 400,
        singleItem: true,
        afterInit: afterOWLinit // do some work after OWL init
    });
    
    function afterOWLinit() {

        // adding A to div.owl-page
        $('.owl-controls .owl-page').append('<a class="item-link" href="#"/>');

        var paginatorLink = $('.owl-controls .item-link');

        /**
         * this.owl.userItems - it's your HTML <div class="item"><img src="http://www.ow...t of us"></div>
         */
        $.each(this.owl.userItems, function (i) {

            $(paginatorLink[i])
                // i - counter
                // Give some styles and set background image for pagination item
                .css({
                    'background': 'url(' + $(this).find('img').attr('src') + ') center center no-repeat',
                    '-webkit-background-size': 'cover',
                    '-moz-background-size': 'cover',
                    '-o-background-size': 'cover',
                    'background-size': 'cover'
                })
                // set Custom Event for pagination item
                .click(function () {
                    owl.trigger('owl.goTo', i);
                });

        });

        // add Custom PREV NEXT controls
        $('.owl-pagination').prepend('<a href="#prev" class="prev-owl"/>');
        $('.owl-pagination').append('<a href="#next" class="next-owl"/>');


        // set Custom event for NEXT custom control
        $(".next-owl").click(function () {
            owl.trigger('owl.next');
        });

        // set Custom event for PREV custom control
        $(".prev-owl").click(function () {
            owl.trigger('owl.prev');
        });

    }

});