JSFiddle - React, Tailwind, and code Playground

by johntrepreneur

HTML

<script src="http://maps.googleapis.com/maps/api/js?sensor=false&amp;libraries=places"></script>
<script src="http://viljamis.com/responsive-slides/responsiveslides.min.js?v=1.6"></script>
<div id="wrapper">
     <h3>Transparent buttons over the left and right side</h3>

    <!-- Slideshow 2 -->
    <div class="rslides_container">
        <ul class="rslides" id="slider2">
            <li>
                <img src="http://tempo5.sandicor.com/SNDImages/33/120048161_101_81.jpg"
                alt="">
            </li>
            <li>
                <img src="http://tempo5.sandicor.com/SNDImages/33/120048161_201_81.jpg"
                alt="">
            </li>
            <li>
                <img src="http://tempo5.sandicor.com/SNDImages/33/120048161_301_81.jpg"
                alt="">
            </li>
        </ul>
    </div>
     <h3>in maps infowindow</h3>

    <!-- Slideshow 4 -->
    <div id="map" style="width:800px; height:800px; border:1px solid red; margin-bottom:100px;"></div>
</div>

CSS

/*! http://responsiveslides.com v1.53 by @viljamis */
 .rslides {
    position: relative;
    list-style: none;
    overflow: hidden;
    width: 100%;
    padding: 0;
    margin: 0;
}
.rslides li {
    -webkit-backface-visibility: hidden;
    position: absolute;
    display: none;
    width: 100%;
    left: 0;
    top: 0;
}
.rslides li:first-child {
    position: relative;
    display: block;
    float: left;
}
.rslides img {
    display: block;
    height: auto;
    float: left;
    width: 100%;
    border: 0;
}
* {
    margin: 0;
    padding: 0;
}
html {
    background: #fff;
}
body {
    color: #333;
    font: 14px/24px sans-serif;
    margin: 0 auto;
    max-width: 700px;
    _width: 700px;
    padding: 0 30px;
    text-align: center;
    -webkit-font-smoothing: antialiased;
}
#wrapper {
    float: left;
    width: 100%;
    margin-bottom: 50px;
}
h1 {
    font: 600 28px/36px sans-serif;
    margin: 50px 0;
}
h3 {
    font: 600 18px/24px sans-serif;
    color: #999;
    margin: 0 0 20px;
}
a {
    color: #222;
}
.rslides {
    margin: 0 auto;
}
.rslides_container {
    margin-bottom: 50px;
    position: relative;
    float: left;
    width: 100%;
}
.centered-btns_nav {
    z-index: 3;
    position: absolute;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    top: 50%;
    left: 0;
    opacity: 0.7;
    text-indent: -9999px;
    overflow: hidden;
    text-decoration: none;
    height: 61px;
    width: 38px;
    background: transparent url("themes.gif") no-repeat left top;
    margin-top: -45px;
}
.centered-btns_nav:active {
    opacity: 1.0;
}
.centered-btns_nav.next {
    left: auto;
    background-position: right top;
    right: 0;
}
.transparent-btns_nav {
    z-index: 3;
    position: absolute;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    top: 0;
    left: 0;
    display: block;
    background: #fff;
    /* Fix for IE6-9 */
    opacity: 0;
    filter: alpha(opacity=1);
    width: 48%;
    text-indent: -9999px;
    overflow: hidden;
   ...

JavaScript

$(function () {

        // Slideshow 2
        $("#slider2").responsiveSlides({
            auto: false,
            pager: true,
            nav: true,
            speed: 500,
            maxwidth: 800,
            namespace: "transparent-btns"
        });


        var map = new google.maps.Map(document.getElementById('map'), {
            zoom: 10,
            center: new google.maps.LatLng(32.716222, -117.132358),
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            noClear: true
        });
        var marker = new google.maps.Marker({
            position: new google.maps.LatLng(32.716222, -117.132358),
            map: map
        });
        var infoWindow = new google.maps.InfoWindow();
        infoWindow.setOptions({
            maxWidth: 400
        });
        var content =
            '<div style=" margin-bottom:50px; ">' +
            '<ul class="rslides" id="slider4">' +
            '<li><img src="http://tempo5.sandicor.com/SNDImages/33/120048161_101_81.jpg" alt=""></li>' +
            '<li><img src="http://tempo5.sandicor.com/SNDImages/33/120048161_201_81.jpg" alt=""></li>' +
            '<li><img src="http://tempo5.sandicor.com/SNDImages/33/120048161_301_81.jpg" alt=""></li>' +
            '</ul>' +
            '</div>';
        google.maps.event.addListener(marker, 'click', (function (marker, content) {
            return function () {
                infoWindow.setContent(content);
                infoWindow.open(map, marker);
            }
        })(marker, content));
        google.maps.event.addListener(infoWindow, 'domready', (function () {
            return function () {
                $("#slider4").responsiveSlides({
                    auto: false,
                    pager: true,
                    nav: true,
                    speed: 500,
                    maxwidth: 400,
                    namespace: "transparent-btns"
                });
            }
        })());


    });