JSFiddle - React, Tailwind, and code Playground

MaxImage rotator

by freedawirl

HTML

<script src="http://www.aaronvanderzwan.com/maximage/2.0/lib/js/jquery.cycle.all.js"></script>
<script src="http://aaronvanderzwan.com/maximage/2.0/lib/js/jquery.maximage.js"></script>
<link rel="stylesheet" href="http://aaronvanderzwan.com/maximage/2.0/lib/css/jquery.maximage.css">
<!-- Maximage / Cycle -->
<div id="maximage">
    <img src="http://www.aaronvanderzwan.com/maximage/2.0/lib/images/demo/coalesse.jpg" alt="" />
    <img src="http://www.aaronvanderzwan.com/maximage/2.0/lib/images/demo/wall_portrait.jpg" alt="" />
    <img src="http://www.aaronvanderzwan.com/maximage/2.0/lib/images/demo/laughing.jpg" alt="" />
    <img src="http://www.aaronvanderzwan.com/maximage/2.0/lib/images/demo/pattern.jpg" alt="" />
    <img src="http://www.aaronvanderzwan.com/maximage/2.0/lib/images/demo/roof_shooting.jpg" alt="" />
    <img src="http://www.aaronvanderzwan.com/maximage/2.0/lib/images/demo/man.jpg" alt="" />
    <img src="http://www.aaronvanderzwan.com/maximage/2.0/lib/images/demo/coffee_shop.jpg" alt="" />
    <img src="http://www.aaronvanderzwan.com/maximage/2.0/lib/images/demo/gas_station.jpg" alt="" />
</div>

<div class="contentContainer">
    <p class='largeTxt'>Some Navigation Examples</p>
    <p>Arrows</p>
    <a href="" id="arrow_left">
        <img src="http://www.aaronvanderzwan.com/maximage/2.0/lib/images/demo/arrow_left.png" alt="Slide Left" />
    </a>
    <a href="" id="arrow_right">
        <img src="http://www.aaronvanderzwan.com/maximage/2.0/lib/images/demo/arrow_right.png" alt="Slide Right" />
    </a>
    <hr />
    <p>Nav</p>
    <div id="cycle-nav"><ul></ul></div>
    <hr />
    <p>Toggle Pause</p>
    <a href="" class="toggle">Pause/Play it</a>
</div>

CSS

/* Other container */
.contentContainer {
    background:#333;
    color:#fff;
    font-family:sans-serif;
    padding:20px;
    margin-top:20px;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter: alpha(opacity=50);
    opacity:0.8;
}

/* Center my loader */
#maximage {
    display:none;
}

/*I want to style my pager*/
#cycle-nav {
    float:left;
    margin-bottom:20px;
}
#cycle-nav ul {
    list-style-type:none;
}
#cycle-nav ul li {
    border:1px solid #ffffcc;
    float:left;
    margin:4px;
}
#cycle-nav ul li a {
    background:#fff;
    float:left;
    height:10px;
    margin:2px;
    width:10px;
}
#cycle-nav ul li.activeSlide {
    border:1px solid #FF8000;
}

/* Overwrite Maximage's default background-size */
div.mc-image {
    -webkit-background-size: contain;
    -moz-background-size: contain;
    -o-background-size: contain;
    background-size: contain;
}

/* Other random styles */
#arrow_left, #arrow_right {text-decoration:none;}
a {color:#fff;}
a:hover {text-decoration:none;}
a:active {color:#999;}
hr {clear:both;}
p {margin-bottom:20px;}
.largeTxt {font-size:30px;}

JavaScript

$(function() {
    $('#maximage').maximage({
        backgroundSize: "contain",
        cycleOptions: {
            fx: 'fadeZoom',
            //sync: false,
            speed: 800,
            timeout: 8000,
            prev: '#arrow_left',
            next: '#arrow_right',
            pager: '#cycle-nav ul',
            pagerAnchorBuilder: function(idx, slide) {
                return '<li><a href="#"></a></li>';
            }
        },
        onFirstImageLoaded: function() {
            jQuery('#maximage').fadeIn('fast');
        }
    });
    
    $('.toggle').bind('click', function(e){
        e.preventDefault();
        $('#maximage').cycle('toggle');
    });
});