TODO: создайте директиву AngularJS для отображения списка изображений в бесконечной, плавной петле прокрутки слева направо.Для простоты вы можете принять фиксированную высоту / ширину для изображений, указанных выше. Работа должна выполняться в директиве и стилях без добавления вспомогательных библиотек или плагинов.
angular.module('myApp', [])
.controller('myCtrl', function ($scope) {
// list of images to scroll, each image is 280px x 200px
$scope.images = [
'http://build.ford.com/dig/Ford/Mustang/2018/BP3TT-TILE-EXT/Hero/EXT/4/vehicle.png',
'http://build.ford.com/dig/Ford/Mustang/2018/BP3TT-TILE-EXT/Hero[EcoBoost®%20Fastback]/EXT/4/vehicle.png',
'http://build.ford.com/dig/Ford/Mustang/2018/BP3TT-TILE-EXT/Hero[EcoBoost® Premium Fastback]/EXT/4/vehicle.png',
'http://build.ford.com/dig/Ford/Mustang/2018/BP3TT-TILE-EXT/Hero[EcoBoost® Convertible]/EXT/4/vehicle.png',
'http://build.ford.com/dig/Ford/Mustang/2018/BP3TT-TILE-EXT/Hero[GT Fastback]/EXT/4/vehicle.png',
'http://build.ford.com/dig/Ford/Mustang/2018/BP3TT-TILE-EXT/Hero[GT Premium Convertible]/EXT/4/vehicle.png',
'http://build.ford.com/dig/Ford/Mustang/2018/BP3TT-TILE-EXT/Hero[Shelby® GT350R]/EXT/4/vehicle.png',
'http://build.ford.com/dig/Ford/Mustang/2018/BP3TT-TILE-EXT/Hero[Shelby GT350®]/EXT/4/vehicle.png'];
})
.directive('myScroller', function () {
return {
// >> your directive code <<
};
});
.container {
width: 700px;
margin: 0 auto 100px;
padding: 20px;
overflow: hidden;
}
.container .image-list {
height:200px;
width:2240px;
}
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js@1.1.5" data-semver="1.1.5" src="http://code.angularjs.org/1.1.5/angular.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div ng-app="myApp">
<div ng-controller="myCtrl">
<div class="container">
<h1>Static Images</h1>
<div class="image-list">
<img ng-repeat="image in images" ng-src="{{image}}" />
</div>
</div>
<div class="container">
<h1>Scrolling Images</h1>
<!-- use my scroller directive, see script.js file for directions -->
<div my-scroller="images"></div>
</div>
</div>
</div>
</body>
</html>