JSFiddle - React, Tailwind, and code Playground

by Sai Baba Satchitanand

HTML

<script src="http://malsup.github.io/min/jquery.cycle2.min.js"></script>
<script src="http://malsup.github.io/min/jquery.cycle2.carousel.min.js"></script>
<div id="carousel">
    <article>
        <div class="service">
             <h1>Lead</h1>
        </div>
    </article>
    <article>
        <div class="service">
             <h1>Lead1</h1>
        </div>
    </article>
    <article>
        <div class="service">
             <h1>Lead2</h1>
        </div>
    </article>
</div>
<div id="carousel1" data-allow-wrap="true" data-cycle-prev="#prev" data-cycle-next="#next" class="cycle-slideshow" data-cycle-timeout="0" data-cycle-manual-fx="scrollHorz" data-cycle-slides=".readmore">
    <div class="readmore">
         <h2 class="lead">Lead</h2>

        <p>Testing some text right here</p> <a class="cta" href="<?php the_permalink();?>">Läs mer</a>

    </div>
    <div class="readmore">
         <h2 class="lead">Lead1</h2>

        <p>Testing some text right here</p> <a class="cta" href="<?php the_permalink();?>">Läs mer</a>

    </div>
    <div class="readmore">
         <h2 class="lead">Lead2</h2>

        <p>Testing some text right here</p> <a class="cta" href="<?php the_permalink();?>">Läs mer</a>

    </div>
</div>
<div id="next">next</div>
<div id="prev">prev</div>

CSS

.service {
    display: block;
    background-repeat: no-repeat;
    background-position: center;
    background-color: #85cfd2;
    width: 175px;
    height: 175px;
    border-radius: 50%;
    overflow: hidden;
    -webkit-transition: all 400ms ease-in;
    box-sizing: border-box;
    padding: 0px;
}
.cycle-slide-active .service {
    background-color:#521997;
}
.readmore {
    margin: 0 auto;
    overflow: hidden;
    padding: 0;
    width: 100%;
    height: 300px;
    white-space: normal;
    position: relative;
}
.service h1 {
    margin: 0 auto;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    font-family:"futura-pt" sans-serif;
    color: #fff;
    text-align: center;
    position: relative;
    top: 110px;
}

JavaScript

$('#carousel').cycle({
    allowWrap: true,
    carouselVisible: 5,
    prev: '#prev',
    next: '#next',
    carouselFluid: true,
    timeout: 0,
    slides: 'article',
    fx: 'carousel'
});

var slideshows1 = $('#carousel').on('cycle-next cycle-prev', function (e, opts) {
    // advance the other slideshow
    slideshows1.not(this).cycle('goto', opts.currSlide);
});

var slideshows2 = $('#carousel1').on('cycle-next cycle-prev', function (e, opts) {
    // advance the other slideshow
    slideshows2.not(this).cycle('goto', opts.currSlide);
});

$('#carousel article').click(function () {
    var count = $("#carousel1 .readmore").length - 1;
    var selectedIndex = $('#carousel').data('cycle.API').getSlideIndex(this);
    var index = selectedIndex<count ? selectedIndex: (selectedIndex-count)%count;
    slideshows1.cycle('goto', index);
    slideshows2.cycle('goto', index);
});