<!-- nosimple -->
<div x-data="{
    active: 0, 
    total: 0, 
    init() {this.total = this.$refs.track.children.length; this.render(); }, 
    render() {Array.from(this.$refs.track.children).forEach((el, i) => {el.style.display = (i === this.active) ? 'block' : 'none'; });},
    next() { this.active = (this.active + 1) % this.total; this.render(); },
    prev() { this.active = (this.active - 1 + this.total) % this.total; this.render(); } }" 
    @keydown.window.right="next()"
    @keydown.window.left="prev()"
    class="pos-relative bordered rounded10 bg-primary50 pad20-rl pad20-b" x-cloak>
    
    <div x-ref="track" class="bor-solid-b bor1 bor-primary200 overflow-hidden h300px-min" x-cloak>
<!-- /nosimple -->

<div class="animation-fade">
    ## Sedes gratissima longam placidique

    Lorem markdownum ossa lacrimae intortos; ne, ac habet. Dixit corpora **navita aquae** tuorum rapta. In rictus, poenam `firmwareMegapixelComputing` inpendere at quod nudaeque. Turbant e Pindo pudoris acies peragebant revellere fortius sua albas gentes tonitrumque videt seposuisse omnes inmittor excita et illo.

    Et *utrumque* creditur, lingua ad undis cruor repugnat, spectant. Manu referunt tibi ferax hoc relictus caelumque portas quibus cingere concutiuntque; et undis Aeolidis volenti mundi? Sed pro iubet oro, qui luctus? Gaudete tradit et quidem, ora quam quas quoque pendenti Proetus, apte? Inpatiens innumeris: animus ipse nostri.
</div>

<div class="animation-fade">
    ## Ipso malis potest

    Lorem markdownum foret inclusas neci soporem pignora visa puer regia ille cadit amplexus. Madidis mentem vultus.

    Sospite vacuam facilis Hyacinthon, descendi sed. Commisso sine, Oete abeunt et cunctis nulla grandaevique munus Polymestoris digitis.

    Thalamis animosque nullus turba concubitu corporis: stagna perdere pariter consorte. *Peliacae nec* ab tamen fuerit acta: spreta modo cara magna non serpentis et felix locat vestrae summa, dura. Urbis Creteque conposito inplevit neque mora idque non omnia saevorum origine formam, **his**. Aures *morabar terrae terrigenae* ante; discedere fallunt draconum gerere.
</div>

<div class="animation-fade">
    ## Aureae a tamen videre

    Lorem markdownum oris materno, navis modo, est amat. Facie et et arma, te velit ripae fugiamus etiam suis. Patrios in Bacchi quam ramis coniunx fragilesque Pisaeae facta toro fatorum placabitis. Ablati madefactis grates quippe *vidit* primas mero, animi pisces Leucosiamque retroque liliaque: insignia ducit at Talibus!

    Mons visa; ad est **posse nec relictas**, facies ipse, ope neve tumulumque satos duobus `cdn_integer_address`. Vix ait mandarat subiecit lacunae: successit intremuit ponto. Quater monte certamina secundum et gaudet Phiale parabat sed `opacity_graphics` ulla valuere; **et inquit** pendeat vulnera atque. Expugnacior Iolaus senserat fontibus confinia videri erat crimine Pyrame saetigeri. Arbore mea incurrite curru.
</div>

<!-- nosimple -->
    </div>

    <div class="t-center" x-cloak>
        <template x-for="i in total"><span @click="active = i-1; render()" class="cursor-pointer t200" :class="active === i-1 ? 't-primary600' : 't-gray300'">•</span></template>
    </div>
        
    <div class="flex flex-vcenter gap10 mar10-t" x-cloak>
        <button @click="prev()" class="button">←</button>
        <div><span x-text="active + 1"></span> / <span x-text="total"></span></div>
        <button @click="next()" class="button">→</button>
    </div>
</div>
<!-- /nosimple -->