{"html":"<div id=\"{{uc_id}}\" style=\"direction:ltr;\">\n  <div id=\"sync1\" class=\"owl-carousel\">\n\n    {% for item in current_post.cf_project_pics %}\n <div class=\"item\" style=\"background-image:url({{item.image}});background-size:cover;background-position:center;height:{{slider_main_image_height}}px;display: flex; align-items: center; justify-content: center; flex-direction: column;\">\n    <\/div>\n   {% endfor %}\n\n  <\/div>\n<\/div>\n\n<div>\n  <div id=\"sync2\" class=\"owl-carousel\">\n    \n    \n    {% for item in current_post.cf_project_pics %}\n\n<div class=\"item\" style=\"background-image:url({{item.image}});background-size:cover;background-position:center;height:{{thumb_height}}px;\">  <\/div>\n{% endfor %}\n\n  <\/div>\n<\/div>","html_item":"","html_item2":"","css":".owl-carousel .owl-wrapper-outer {\n direction: ltr;\n}\n\n.owl-carousel .owl-item {\n}\n\n.owl-theme .owl-controls .owl-buttons div {\n    color: black;\n    display: inline-block;\n    \/* zoom: 1; *\/\n    *: ;\n    display: inline;\n    margin: 5px;\n    padding: 3px 10px;\n    font-size: 12px;\n    border-radius: 30px; \n    background: #869791; \n    filter: Alpha(Opacity=50);\n    opacity: 0.5;\n    border-style: solid;\n    border-width: 1px;\n}\n\n#sync1 .item{\n    background: #0c83e7;\n    padding: 80px 0px;\n    margin: 5px;\n    color: #FFF;\n    -webkit-border-radius: 3px;\n    -moz-border-radius: 3px;\n    border-radius: 3px;\n    text-align: center;\n}\n#sync2 .item{\n    background: #C9C9C9;\n    padding: 10px 0px;\n    margin: 5px;\n    color: #FFF;\n    -webkit-border-radius: 3px;\n    -moz-border-radius: 3px;\n    border-radius: 3px;\n    text-align: center;\n    cursor: pointer;\n}\n\n#{{uc_id}} .itemTitle\n{\n  color:white;\n  font-size:48px;\n  padding-bottom:14px;\n}\n\n#{{uc_id}} .itemDescription\n{\n  color:white;\n  font-size:18px;\n  line-height:1.8em;\n  padding-bottom:14px;\n}\n\n#{{uc_id}} .itemLink a\n{\n  display:inline-block;\n  padding:14px 50px;\n  border:1px solid white;\n  margin-top:20px;\n  color:white;\n  text-decoration:none;\n}","css_item":"","js":"jQuery(document).ready(function() {\n  var sync1 = jQuery(\"#sync1\");\n  var sync2 = jQuery(\"#sync2\");\n \n  sync1.owlCarousel({\n    singleItem : true,\n    autoPlay : true,\n    slideSpeed : 1000,\n    pagination:false,\n    afterAction : syncPosition,\n    responsiveRefreshRate : 200,\n\tnavigation:false\n  });\n \n  sync2.owlCarousel({\n    items : 4,\n    itemsDesktop      : [1199,4],\n    itemsDesktopSmall     : [979,4],\n    itemsTablet       : [768,4],\n    itemsMobile       : [479,3],\n    pagination:false,\n\tmargin:0,\n    responsiveRefreshRate : 100,\n    afterInit : function(el){\n      el.find(\".owl-item\").eq(0).addClass(\"synced\");\n    }\n  });\n \n  function syncPosition(el){\n    var current = this.currentItem;\n    jQuery(\"#sync2\")\n      .find(\".owl-item\")\n      .removeClass(\"synced\")\n      .eq(current)\n      .addClass(\"synced\")\n    if(jQuery(\"#sync2\").data(\"owlCarousel\") !== undefined){\n      center(current)\n    }\n  }\n \n  jQuery(\"#sync2\").on(\"click\", \".owl-item\", function(e){\n    e.preventDefault();\n    var number = jQuery(this).data(\"owlItem\");\n    sync1.trigger(\"owl.goTo\",number);\n  });\n \n  function center(number){\n    var sync2visible = sync2.data(\"owlCarousel\").owl.visibleItems;\n    var num = number;\n    var found = false;\n    for(var i in sync2visible){\n      if(num === sync2visible[i]){\n        var found = true;\n      }\n    }\n \n    if(found===false){\n      if(num>sync2visible[sync2visible.length-1]){\n        sync2.trigger(\"owl.goTo\", num - sync2visible.length+2)\n      }else{\n        if(num - 1 === -1){\n          num = 0;\n        }\n        sync2.trigger(\"owl.goTo\", num);\n      }\n    } else if(num === sync2visible[sync2visible.length-1]){\n      sync2.trigger(\"owl.goTo\", sync2visible[1])\n    } else if(num === sync2visible[0]){\n      sync2.trigger(\"owl.goTo\", num-1)\n    }\n    \n  }\n \n});"}