JSFiddle - React, Tailwind, and code Playground

by David Kyle

HTML

<div class="testimonials">
    <blockquote class="active">Lorem ipsum dolor sit amet, at mea nulla epicuri. Nec mollis recusabo id. Vel ut legimus recteque. Eu usu affert gloriatur intellegebat, ut nec eligendi intellegam. Vim an possit molestie, sit ut errem putent expetendis, sed eu vocent deleniti.
        <footer>
            <img src="https://farm3.staticflickr.com/2532/4156855375_9438560dd7_q.jpg" alt="" /><cite>Charles Dickens <small>writer of Great Expectations</small>  </cite>

        </footer>
    </blockquote>
    <blockquote>Dolorum veritus no nam. Id docendi consulatu maiestatis mea. Natum saperet principes vel et. Pro eu eripuit euismod omnesque, ad pri nullam aliquid. Nam omnis dicam cu.
        <footer>
            <img src="https://farm3.staticflickr.com/2752/4426288835_9f97bf01fc_q.jpg" alt="" /><cite>Charles Dickens <small>writer of Great Expectations</small>  </cite>

        </footer>
    </blockquote>
    <blockquote>Ad vel enim atqui, eam ei graece petentium. Vim et sensibus intellegat, qui probo mazim labore id. Eu bonorum reprehendunt mediocritatem vim. Duo debet tempor cu, vix vivendum tacimates intellegat te.
        <footer>
            <img src="https://farm4.staticflickr.com/3024/2768357844_79a344e0c8_q.jpg" alt="" /><cite>Charles Dickens <small>writer of Great Expectations</small>  </cite>

        </footer>
    </blockquote>
    <blockquote>Ne ius illud epicuri omnesque. Sint evertitur reprimique vix in. Dicit minimum liberavisse ea nec. Nec adhuc dignissim no, nobis delenit omittantur ad est. Sit no consulatu hendrerit. Omittam omittantur comprehensam in usu, honestatis repudiandae te vim, cu dolorem phaedrum his. Paulo mollis sed ut.
        <footer>
            <img src="https://farm3.staticflickr.com/2031/2165710068_7e2efb2197_q.jpg" alt="" /><cite>Charles Dickens <small>writer of Great Expectations</small>  </cite>

        </footer>
    </blockquote>
</div>
<div class="testimonials-nav"><a href="#" data-dir="prev"...

SCSS

.testimonials {
    text-align: center;
    display: block;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
}
.testimonials blockquote {
    margin:0;
}
.testimonials blockquote img {
    width: 100px;
    border-radius: 50%;
    border: solid 10px rgba(0, 0, 0, 0.19);
}
footer small {
    display: block;
}
.testimonials blockquote {
    position: absolute;
    opacity: 0;
    visibility: hidden;
    transition: .5s;
}
blockquote.active{
    position: absolute;
    opacity: 1;
    visibility: visible;        
}
.testimonials-nav{
    font-size: 3em;
    margin: 0px auto;
    display: block;
}

JavaScript

var slider = function (container, nav) {
        var self = this;
        self.container = container;
        self.itens = container.children();
        self.itensLen = self.itens.length;
        self.nav = nav.find('a');

        self.auto = true;
        self.current = 0;

        self.numberEls = function () {
            self.itens.each(function (index, element) {
                $(element).attr('data-item', index);
            });
        }
        self.setHeight = function () {
            height = self.itens.filter('[data-item=' + this.current + ']').height();
            self.container.css({
                "height": height
            });
        }

        self.init = function () {

            self.numberEls();
            self.setHeight();
        }


    };


    slider.prototype.setCurrent = function (dir) {
        var pos = this.current;
        pos += (~~ (dir === 'next') || -1);

        this.current = (pos < 0) ? this.itensLen - 1 : pos % this.itensLen;

        return pos;
    };

    slider.prototype.transition = function () {
        this.itens.removeClass('active');
        this.itens.filter('[data-item=' + this.current + ']').addClass('active');
    };

    slider.prototype.automatic = function () {
        if (this.auto === true) {
            console.log("yay");
        }
    }

    slider.prototype.activateNav = function (target) {
        this.nav.on('click', function (e) {
            this.setCurrent(target);
            e.preventDefault();
        });
    };

    testimonial = new slider($('.testimonials'), $('.testimonials-nav'));
    testimonial.nav.on('click', function (e) {
        testimonial.setCurrent($(this).data('dir'));
        testimonial.transition();
        testimonial.setHeight();
        testimonial.activateNav($(this).data("dir"));
        e.preventDefault();
    });

    testimonial.init();