JSON IMAGE CAROUSEL

JSON IMAGE CAROUSEL

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<div class="slider"></div>

CSS

@import url(http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:400,700);

*{
    margin: 0;
    padding: 0;
}
ul li {  margin: 0;
    padding: 0;list-style:none}

.slider {
    display: block;
    min-height: 345px;
    max-width: 665px;
    margin: auto;
    border: 12px rgba(255,255,240,1) solid;
    -webkit-box-shadow: 0px 0px 5px rgba(0,0,0,.8);
    -moz-box-shadow: 0px 0px 5px rgba(0,0,0,.8);
    box-shadow: 0px 0px 5px rgba(0,0,0,.8);
    margin-top: 20px;
    position: relative;
}

.slider ul{  
    display: block;
    height: auto;
    max-width: 640px;
    overflow:hidden}

.slider>ul>li {
    height: 320px;
    float: left;
    position: absolute;
}

.slider >ul>li>img {
    margin: auto;
    height: 100%;
}

.desc {
    position: absolute;
    top: 0;
    left: 0;
    width: 260px;
    font-family: 'Yanone Kaffeesatz';
    z-index: 1000;
     background-color: rgba(255,255,240,0.5);
  
 
    display: inline-block;
    text-align: center;
    padding-top: 7px;
    border-bottom-right-radius: 15px;
}

JavaScript

$(function(){
    var json = {
        "slider":[{
            "img"    : "http://placehold.it/640x320/09f/fff/&text=Andrew Pougher FRONT END",
            "title"  : "Studio 1",
            "desc" : "great for first time buyers"
        },
        {
            "img"    : "Andrew Pougher UI/UX",
            "title"  : "Studio 2",
            "desc" : "great for first time buyers"
        },
        {
            "img"    : "http://placehold.it/640x320/055/fff/&text=Andrew Pougher JQUERY",
            "title"  : "Studio 3",
            "desc" : "great for first time buyers"
        },
        {
            "img"    : "http://placehold.it/640x320/099/fff/&text=Andrew Pougher .Net",
            "title"  : "Studio 4",
            "desc" : "great for first time buyers"
        }]};
    
    
    
    var mhtml = '<ul>';
    $.each(json.slider, function(key, val){
        mhtml += '<li><div class="img-responsive"><p>"'+val.img+'" </p></div>';
        mhtml += '<div class="desc"><h1 class="title">'+val.title+'</h1>';
        mhtml += '<p class="expert">'+val.desc+'</p></div>';
        mhtml += '</li>';
    });
    mhtml += '</ul>';
    $('.slider').append($(mhtml));
    //runShow();
   // switchImage();
      });


$(document).ready(function() {
  $(".slider ul> li:gt(0)").css("opacity" , "0");
  var j = 0;
     var delay = 2000; //millisecond delay between cycles
     function cycleThru(){
             var jmax = $(".slider ul> li").length -1;
             $(".slider ul> li:eq(" + j + ")")
                     .animate({"opacity" : "1.0"} ,400)
                     .animate({"opacity" : "1"}, delay)
                     .animate({"opacity" : "0"}, 400, function(){
                             (j == jmax) ? j=0 : j++;
                             cycleThru();
                     });
             };

     cycleThru();
  
});

/*
function runShow(){
$(".slider ul> li:gt(0)").hide();

setInterval(function() { 
  $('.slider ul > li:first')
    .hide()
    .next()
   ...