JSFiddle - React, Tailwind, and code Playground

by fresheyeball

HTML

<link rel="stylesheet" href="http://www.idangero.us/sliders/swiper/css/idangerous.swiper.css">
<script src="http://www.idangero.us/sliders/swiper/js/idangerous.swiper.js"></script>
<div id="experience-left-details">
    <div class="swiper-container">
        <div id="experience-gallery" class="swiper-wrapper">
            <div class="swiper-slide">
                <img src="http://placehold.it/953x552/f4ecd/" alt="tempPlaceholder1" />
            </div>
            <div class="swiper-slide">
                <img src="http://placehold.it/953x552/3cdgb/" alt="tempPlaceholder2" />
            </div>
            <div class="swiper-slide">
                <img src="http://placehold.it/953x552/2b5fg/" alt="tempPlaceholder3" />
            </div>
        </div> 
        <a class="arrow-left" href="#">PREV</a>
        <a class="see-map" href="#">SEE MAP</a>
        <a class="arrow-right" href="#">NEXT</a>
    </div>
    <div class="media-container hide">
        <iframe src="https://www.google.com/maps/embed?pb=!1m10!1m8!1m3!1d1559.5790451282094!2d-7.906911662505048!3d38.5762071386327!3m2!1i1024!2i768!4f13.1!5e0!3m2!1spt-PT!2s!4v1398792343352" width="953" height="552" frameborder="0" style="border:0"></iframe> 
        <a class="see-gallery" href="#">SEE GALLERY</a>
    </div>
</div>
<div>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est accusamus maiores rem fuga facere et voluptatum ipsa dicta hic nulla totam sapiente tempora sequi placeat alias reiciendis consequatur dolorum odit.</p>
    </div>

CSS

/*GENERIC STYLES*/
.media-container.hide {
    /*for google maps to work, I should NOT use display:none; */
    position: absolute !important;
    top: -99999px !important;
    left: -99999px !important;
}
.swiper-container.hide {
    display:none;
}
img {
    max-width: 100%;
    vertical-align: middle;
}

/*STRUCTURE STYLES*/
#experience-left-details {
    width: 70%;
    overflow: hidden;
    /*this element could be floated left some times*/
}

/*Responsive Media Container Styles*/
.media-container {
    position: relative;
    padding-bottom: 57.92235047219307%; /* This is the aspect ratio.*/
    height: 0;
    overflow: hidden;
}
.media-container iframe,
.media-container embed,
.media-container object {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
}

/*SWIPER SPECIFIC STYLES CUSTOMIZATION*/
.swiper-container {
    position: relative;
    /*width: 100%;
    height: 100%;*/
}
.swiper-container .arrow-left,
.swiper-container .arrow-right {
    display:block;
    position: absolute;
    bottom: 7px;
    width: 50px;
    height: 50px;
}
.swiper-wrapper {
    width:20000px;
}
.swiper-container .arrow-left {
    left: 8px;
}

.swiper-container .arrow-right {
    right: 7px;
}

.swiper-container .see-map,
.media-container .see-gallery {
    display: block;
    position: absolute;
    width: 60px;
    height: 60px;
    bottom: 7px;

    /* horizontal center */
    left:0;
    right:0;
    margin-left:auto;
    margin-right:auto;
    text-align: center;
}

JavaScript

var mySwiper = new Swiper('.swiper-container', {
    mode: 'horizontal',
    loop: true,
    /*I need this, otherwise, the height gets mess up. Why? I don't know: */
    calculateHeight: true
});

$(".arrow-left").on('click', function (event) {
    event.preventDefault();
    mySwiper.swipePrev();
});

$(".arrow-right").on('click', function (event) {
    event.preventDefault();
    mySwiper.swipeNext();
});

var $eld = $("#experience-left-details");
$eld.on('click', '.see-map, .see-gallery', function (event) {
    event.preventDefault();
    $eld.fadeOut(
        function(){
            $(".media-container, .swiper-container").toggleClass('hide');
            setTimeout(function(){
                mySwiper.reInit(true);
                mySwiper.resizeFix(true);            
            }, 16);
        }
    ).fadeIn();
});