Angularjs - 8 cards carrousel

Developer
Adnene Manai
Size
3,571 Kb
Views
14,168
  1. Angularjs - 8 cards carrousel Previews
  2. Angularjs - 8 cards carrousel HTML Codes
  3. Angularjs - 8 cards carrousel CSS Codes
  4. Angularjs - 8 cards carrousel JS Codes

How do I make an angularjs - 8 cards carrousel?

Transform http://codepen.io/fstark/pen/KbgyJ to angularjs carrousel //TODO Idea is to careate directive for carrousel with settings for card rotation and animantion. Moz/Chrome. What is a angularjs - 8 cards carrousel? How do you make a angularjs - 8 cards carrousel? This script and codes were developed by Adnene Manai on 15 October 2022, Saturday.

Angularjs - 8 cards carrousel Previews
IQ Test

Angularjs - 8 cards carrousel - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Angularjs - 8 cards carrousel</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div ng-app="main" ng-controller="mainCntr"> <h1>Angular JS Carrousel <span>8 Cards</span></h1> <div class="dropdown dropdown-dark"> <select ng-model="theme" class="dropdown-select" ng-options="t.name for t in themes"></select><br> </div>
<div class="carrousel"> <div class="card" card delay="{{$index}}" ng-repeat="item in [1,2,3,4,5,6,7,8]"><img ng-src="http://lorempixel.com/150/100/{{theme.name}}/{{$index}}"></div>
</div>
</div> <script src='http://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Angularjs - 8 cards carrousel - Script Codes CSS Codes

@import "https://wallaceerick.com.br/clientes/flat-ui/assets/css/modules/_icons.scss";
@import url("https://fonts.googleapis.com/css?family=Lato");
body { font-family: Lato, Arial; color: white; padding: 20px; background-color: #222;
}
h1 { font-weight: normal; font-size: 40px; font-weight: normal; text-transform: uppercase;
}
h1 span { font-size: 13px; display: block; padding-left: 4px;
}
.carrousel
{	-webkit-perspective: 500px;	-moz-perspective: 500px;	width: 600px;	height: 100px;	position: relative;	margin: 0 auto;
}
@-webkit-keyframes carrousel
{ from { -webkit-transform: rotateY( 360deg ) translateZ( 200px ) rotateY( -360deg ); -moz-transform: rotateY( 360deg ) translateZ( 200px ) rotateY( -360deg ); z-index: 10; opacity: 0.9 } 50% { z-index: -10; } to { -webkit-transform: rotateY( 0deg ) translateZ( 200px ) rotateY( 0deg ); -moz-transform: rotateY( 0deg ) translateZ( 200px ) rotateY( 0deg ); z-index: 10; opacity: 0.9 }
}
@-moz-keyframes carrousel
{ from { -moz-transform: rotateY( 360deg ) translateZ( 100px ) rotateY( -360deg ); z-index: 10; opacity: 0.9 } 50% { z-index: -10; } to { -moz-transform: rotateY( 0deg ) translateZ( 100px ) rotateY( 0deg ); z-index: 10; opacity: 0.9 }
}
.card
{	width: 150px;	height: 100px;	background-color: #442222; font-size: 40px;	opacity: 0;	position: absolute;	top:100px;	left:225px; box-shadow: 0px 0px 20px rgba(0,0,0,.5); text-align: center; -webkit-animation-name: carrousel; -moz-animation-name: carrousel; -webkit-animation-duration: 8s; -moz-animation-duration: 8s; -webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; -moz-animation-timing-function: linear; }
.card:hover
{ border: solid #4466cc 3px; box-shadow: 0px 0px 10px #4466cc;
}
/*Drop Down*/
.dropdown { display: inline-block; position: relative; overflow: hidden; height: 28px; width: 150px; background: #f2f2f2; border: 1px solid; border-color: white #f7f7f7 whitesmoke; border-radius: 3px; background-image: -webkit-linear-gradient(top, transparent, rgba(0, 0, 0, 0.06)); background-image: -moz-linear-gradient(top, transparent, rgba(0, 0, 0, 0.06)); background-image: -o-linear-gradient(top, transparent, rgba(0, 0, 0, 0.06)); background-image: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.06)); -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
}
.dropdown:before, .dropdown:after { content: ''; position: absolute; z-index: 2; top: 9px; right: 10px; width: 0; height: 0; border: 4px dashed; border-color: #888888 transparent; pointer-events: none;
}
.dropdown:before { border-bottom-style: solid; border-top: none;
}
.dropdown:after { margin-top: 7px; border-top-style: solid; border-bottom: none;
}
.dropdown-select { position: relative; width: 130%; margin: 0; padding: 6px 8px 6px 10px; height: 28px; line-height: 14px; font-size: 12px; color: #62717a; text-shadow: 0 1px white; background: #f2f2f2; /* Fallback for IE 8 */ background: rgba(0, 0, 0, 0) !important; /* "transparent" doesn't work with Opera */ border: 0; border-radius: 0; -webkit-appearance: none;
}
.dropdown-select:focus { z-index: 3; width: 100%; color: #394349; outline: 2px solid #49aff2; outline: 2px solid -webkit-focus-ring-color; outline-offset: -2px;
}
.dropdown-select > option { margin: 3px; padding: 6px 8px; text-shadow: none; background: #f2f2f2; border-radius: 3px; cursor: pointer;
}
/* Fix for IE 8 putting the arrows behind the select element. */
.lt-ie9 .dropdown { z-index: 1;
}
.lt-ie9 .dropdown-select { z-index: -1;
}
.lt-ie9 .dropdown-select:focus { z-index: 3;
}
/* Dirty fix for Firefox adding padding where it shouldn't. */
@-moz-document url-prefix() { .dropdown-select { padding-left: 6px; }
}
.dropdown-dark { background: #444; border-color: #111111 #0a0a0a black; background-image: -webkit-linear-gradient(top, transparent, rgba(0, 0, 0, 0.4)); background-image: -moz-linear-gradient(top, transparent, rgba(0, 0, 0, 0.4)); background-image: -o-linear-gradient(top, transparent, rgba(0, 0, 0, 0.4)); background-image: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.4)); -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), 0 1px 1px rgba(0, 0, 0, 0.2); box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), 0 1px 1px rgba(0, 0, 0, 0.2);
}
.dropdown-dark:before { border-bottom-color: #aaa;
}
.dropdown-dark:after { border-top-color: #aaa;
}
.dropdown-dark .dropdown-select { color: #aaa; text-shadow: 0 1px black; background: #444; /* Fallback for IE 8 */
}
.dropdown-dark .dropdown-select:focus { color: #ccc;
}
.dropdown-dark .dropdown-select > option { background: #444; text-shadow: 0 1px rgba(0, 0, 0, 0.4);
}

Angularjs - 8 cards carrousel - Script Codes JS Codes

var app = angular.module('main',[]);
app.controller('mainCntr',function($scope){ $scope.theme={name:'city'}; $scope.themes = [ {name:'abstract'},
{name:'animals'},
{name:'business'},
{name:'cats'},
{name:'city'},
{name:'food'},
{name:'nightlife'},
{name:'fashion'},
{name:'people'},
{name:'nature'},
{name:'sports'},
{name:'technics'}];
});
app.directive('card', function () { return { restrict: 'AC', link: function (scope, element, attrs) { scope.$watch(attrs.delay, function (value) { element.css('-webkit-animation-delay','-'+attrs.delay+'s'); element.css('-moz-animation-delay','-'+attrs.delay+'s'); }); } }
});
Angularjs - 8 cards carrousel - Script Codes
Angularjs - 8 cards carrousel - Script Codes
Home Page Home
Developer Adnene Manai
Username adnmanai
Uploaded October 15, 2022
Rating 3
Size 3,571 Kb
Views 14,168
Do you need developer help for Angularjs - 8 cards carrousel?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Adnene Manai (adnmanai) Script Codes
Name
A Pen by Adnene Manai
Gallery unsplash
Generate Date CSV
Svg ani
Flexbox Gallery with Angularjs
Etienne Cendrier
Gallery
Quick starter with Angularjs
Generate Stock Date CSV
Create amazing video scripts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!