JSFiddle - React, Tailwind, and code Playground

by Katarina Countiss

HTML

<a href="#" class="clickme">Show/Hide Event Posters</a>
<div class="box">

<div class="buttons">
<button class="date-nav-prev">Prev</button>
<button class="date-nav-next">Next</button></div>
<div id="wrapper">
    <div id="slider">
        
        <div>
            <img alt="1" src="https://katikati.files.wordpress.com/2015/10/poster-adas-fourth.jpg">
        </div>
        <div>
            <img alt="2" src="https://katikati.files.wordpress.com/2015/10/poster-adas-fourth.jpg">
        </div>
        <div>
            <img alt="3" src="https://katikati.files.wordpress.com/2015/10/poster-adas-fourth.jpg">
        </div>
            <div><img alt="4" src=
            "https://katikati.files.wordpress.com/2015/10/poster-adas-fourth.jpg"></div>
                  <div><img alt="5" src=
            "https://katikati.files.wordpress.com/2015/10/poster-adas-fourth.jpg"></div>
                        <div><img alt="6" src=
            "https://katikati.files.wordpress.com/2015/10/poster-adas-fourth.jpg"></div>
    </div><!-- end slider-->
</div><!-- end wrapper-->
            </div> <!-- end box-->

CSS

#wrapper {
    width:570px;
    height:876px;
    border:1px solid #333;
    position:relative;
    overflow:hidden;
}
#slider {
    width: 3420px;
    height: 100%;
    position: absolute;
}
#slider div {
    width:570px;
    height:100%;
    float:left;
}
.box button {
    background-color: green;
}

.box{
    text-align: center;
}

JavaScript

console.log("javascript is working");
$(document).ready(function() {
 // Slideshow Code

var sliderWidth = 570;
var slider = $('#slider');
var sliderCount = $('div', slider).length;
slider.width(sliderCount * sliderWidth);

$('.date-nav-prev').click(function () {
    $('#slider').animate({
        left: '+=' + sliderWidth
    }, 500);
});

$('.date-nav-next').click(function () {
    $('#slider').animate({
        left: '-=' + sliderWidth
    }, 500);
});

// Hide all the elements in the DOM that have a class of "box"
$('.box').hide();

// Make sure all the elements with a class of "clickme" are visible and bound
// with a click event to toggle the "box" state
$('.clickme').each(function() {
    $(this).show(0).on('click', function(e) {
        // This is only needed if your using an anchor to target the "box" elements
        e.preventDefault();
        
        // Find the next "box" element in the DOM
        $(this).next('.box').slideToggle('fast');
    });
});

});