Slideshow

by Yaakov Ainspan

HTML

<div class="slider-wrap">
    <div class="slider" data-running="false" data-paused="true">
        <img class="starter-img" src="http://images.freeimages.com/images/previews/e16/tree-1533498.jpg" /> <a href="http://labs.blogs.com/.a/6a00d8341caed853ef016768796ee4970b-pi" role="img-data"></a>
 <a href="http://www.successconnections.com/articles/wp-content/uploads/2013/04/technology.jpg" role="img-data"></a>
 <span class="controls">
        <span class="ui-icon ui-icon-circle-triangle-w prev control"></span>
 <span class="ui-icon ui-icon-play play control"></span>
 <span class="ui-icon ui-icon-circle-triangle-e seek-for control">
    </span>

    </div>
</div>

CSS

.slider-wrap {
    width:100%;
    display:flex;
    background:rgb(5, 1, 40);
    border:1px solid cyan;
    border-radius:5px;
}
.slider {
    border:1px solid black;
    height:300px;
    width:300px;
    text-align:center;
    margin-left:130px;
}
.slider img {
    height:300px;
    width:300px;
}
.controls {
    background:rgba(70, 100, 100, .9);
    padding:4px;
    padding-top:6px;
    border-radius:4px;
    position:absolute;
    top:270px;
    left:260px;
}
span.ui-icon {
    display:inline-block;
}
.control {
    cursor:pointer;
}

JavaScript

$(function () {
    $(".controls").hide(); //Hide controls

    $(".slider").hover(function () {
        $(".controls").fadeIn(500);
    }, function () {
        $(".controls").fadeOut(500);
    }); // show controls on hover

    $(".controls").on("click", ".play", function () {
        $(".slider").attr({
            'data-running': 'true',
            'data-paused': 'false'
        });
        $(this).toggleClass("ui-icon-play ui-icon-pause play pause");
    });

    $(".controls").on("click", ".pause", function () {
        $(".slider").attr({
            'data-running': 'false',
            'data-paused': 'true'
        });
        $(this).toggleClass("ui-icon-play ui-icon-pause play pause");
    }); //Add play/pause functionality
    
    var slideOne = $(".starter-img");
    var slideTwo = $("a[role=img-data]:first");
    var slideThree = $("a[role=img-data]:last");
    var slides = [slideOne, slideTwo, slideThree];
    var slideShowContainer = $(".slider");
    function slideShowPlay(){
    }

});