<!DOCTYPE html>
<html>
<head>
<script data-require="jquery@2.0.3" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script data-require="angular.js@*" data-semver="1.2.16" src="https://code.angularjs.org/1.2.16/angular.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.slick/1.3.6/slick.css" />
<link href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="style.css" />
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery.slick/1.3.6/slick.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="CarouselCtrl">
<div class="container">
<div class="carousel-container">
<div slick class="carousel" center-mode="true" slides-to-show="3">
<div class="slide-container" ng-repeat="option in actions.0.positions">
<div class="slide" data-option-id="{{option[0].option}}">
<h3 ng-show="$index == 0">Recommended</h3>
<h3 ng-hide="$index == 0">Option {{$index+1}}</h3>
<div class="icon-down-arrow"></div>
<div class="slide-content">
<p class="clearfix" ng-repeat="fund in option">
<span class="col-sm-6">{{fund.percent}}%</span>
<span class="col-sm-6">{{fund.fund}}</span>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
// Code goes here
app = angular.module("myApp", []);
app.directive("slick", function($timeout) {
return {
restrict: "AEC",
scope: {
accessibility: "@",
arrows: "@",
autoplay: "@",
autoplaySpeed: "@",
centerMode: "@",
centerPadding: "@",
cssEase: "@",
dots: "@",
draggable: "@",
easing: "@",
fade: "@",
infinite: "@",
lazyLoad: "@",
onBeforeChange: "@",
onAfterChange: "@",
onInit: "@",
onReInit: "@",
pauseOnHover: "@",
responsive: "=",
slide: "@",
slidesToShow: "@",
slidesToScroll: "@",
speed: "@",
swipe: "@",
touchMove: "@",
touchThreshold: "@",
vertical: "@"
},
link: function(scope, element, attrs) {
return $timeout(function() {
return angular.element(element).slick({
accessibility: scope.accessibility !== "false",
arrows: scope.arrows !== "false",
autoplay: scope.autoplay === "true",
autoplaySpeed: (scope.autoplaySpeed !== null ? parseInt(scope.autoplaySpeed, 10) : 3000),
centerMode: scope.centerMode === "true",
centerPadding: scope.centerPadding || "50px",
cssEase: scope.cssEase || "ease",
dots: scope.dots === "true",
draggable: scope.draggable !== "false",
easing: scope.easing || "linear",
fade: scope.fade === "true",
infinite: scope.infinite !== "false",
lazyLoad: scope.lazyLoad || "ondemand",
onBeforeChange: scope.onBeforeChange || null,
onAfterChange: scope.onAfterChange || null,
onInit: scope.onInit || null,
onReInit: scope.onReInit || null,
pauseOnHover: scope.pauseOnHover !== "false",
responsive: scope.responsive || null,
slide: scope.slide || "div",
slidesToShow: (scope.slidesToShow !== null ? parseInt(scope.slidesToShow, 10) : 1),
slidesToScroll: (scope.slidesToScroll !== null ? parseInt(scope.slidesToScroll, 10) : 1),
speed: (scope.speed !== null ? parseInt(scope.speed, 10) : 300),
swipe: scope.swipe !== "false",
touchMove: scope.touchMove !== "false",
touchThreshold: (scope.touchThreshold ? parseInt(scope.touchThreshold, 10) : 5),
vertical: scope.vertical === "true"
});
});
}
};
});
app.controller("CarouselCtrl", function($scope) {
$scope.actions = [{
id: 4253,
description: "Open a Brokerage account for Baby with the following allocation:",
positions: [
[{
id: 9,
investment_id: 97,
option: 0,
fund: "Calvert Short Duration Bond Fund",
fund_abbr: "CSDAX",
percent: 100
}],
[{
id: 10,
investment_id: 95,
option: 1,
fund: "Washington Mutual Latin America Fund",
fund_abbr: "WMPAF",
percent: 50
}, {
id: 12,
investment_id: 96,
option: 1,
fund: "Vanguard Small CAP Diversified",
fund_abbr: "VSCD",
percent: 50
}],
[{
id: 9,
investment_id: 97,
option: 2,
fund: "Calvert Short Duration Bond Fund",
fund_abbr: "CSDAX",
percent: 100
}],
[{
id: 9,
investment_id: 97,
option: 3,
fund: "Calvert Short Duration Bond Fund",
fund_abbr: "CSDAX",
percent: 100
}],
[{
id: 9,
investment_id: 97,
option: 4,
fund: "Calvert Short Duration Bond Fund",
fund_abbr: "CSDAX",
percent: 100
}]
],
assigned_on: "2014-04-01"
}];
});
/* Styles go here */
.slick-track {
margin: 0 auto;
}
.slick-prev:before, .slick-next:before {
color: #797b7c;
font-family: FontAwesome;
font-size: 60px;
}
.slick-prev:before {
content: "\f104";
}
.slick-next:before {
content: "\f105";
}
.slick-slide {
transform: scale(0.9);
}
.slick-slide.slick-center {
transform: scale(1);
}
.slick-slide.slick-center .slide {
opacity: 1.0;
}
.slide {
background: #fff;
border-radius: 6px;
box-shadow: 0 0 16px rgba(0, 0, 0, 0.2);
opacity: 0.65;
}
.slide .icon-down-arrow {
position: absolute;
left: 50%;
margin-left: -13px;
margin-top: -11px;
}
.slide h3 {
font-family: "helveticaneue-bold", "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #6d7276;
font-size: 22px;
border-bottom: 1px #c2c2c2 solid;
padding: 15px 0;
font-weight: normal;
position: relative;
margin-bottom: 10px;
text-align: center;
}
.slide .slide-content p {
border-bottom: 1px #c2c2c2 solid;
color: #797b7c;
padding: 5px 0;
margin: 0;
}
.slide .slide-content p span {
font-family: "helveticaneue-bold", "Helvetica Neue", Helvetica, Arial, sans-serif;
display: inline-block;
font-size: 40px;
}
.slide .slide-content p span + span {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 18px;
margin-right: 0;
}
.slide .radio-container {
margin: 5px auto;
text-align: center;
padding: 5px;
}
.slide .radio-container .icon-radio {
margin: 0 auto;
}