У меня очень тяжелое время, когда Angular-Slick правильно загрузился на моей странице после того, как он был построен Грунтом, используя Yeoman Angular generator. Когда я обслуживаю файл локально, все выглядит идеально, но где-то вдоль линии после минимизации/уклонения все становится грушевидной. Он должен выглядеть как это, и делает, когда служил:Угловая пятна с грубой
Вот что все выглядит, как после того, как он был построен и прошел. Изображения даже не видны на всех, и кажется, что они укладки друг на друга из поля зрения: http://jamesiv.es/alpha
зависимостями:
{
"name": "v2",
"version": "0.0.0",
"dependencies": {
"angular": "^1.3.0",
"bootstrap-sass-official": "^3.2.0",
"angular-resource": "^1.3.0",
"angular-route": "^1.3.0",
"angular-google-maps": "~2.1.5",
"angular-bootstrap": "~0.13.1",
"particles.js": "~2.0.0",
"slick-carousel": "~1.5.8",
"angular-slick-carousel": "~3.0.2"
},
"devDependencies": {
"angular-mocks": "^1.3.0"
},
"appPath": "app",
"moduleName": "v2App",
"overrides": {
"bootstrap": {
"main": [
"less/bootstrap.less",
"dist/css/bootstrap.css",
"dist/js/bootstrap.js"
]
}
},
"resolutions": {
"angular": "^1.3.0"
}
}
Gruntfile:
grunt.registerTask('build', [
'clean:dist',
'wiredep',
'useminPrepare',
'concurrent:dist',
'autoprefixer',
'ngtemplates',
'concat',
'ngAnnotate',
'copy:dist',
'cdnify',
'cssmin',
'uglify',
'filerev',
'usemin',
'htmlmin'
]);
«slickCarousel» впрыскивается в модуль. Вот главный контроллер используется для Slick:
angular.module('v2App')
.controller('MainCtrl', function ($scope) {
$scope.images = [
"images/logos/angular.png",
"images/logos/android.png",
"images/logos/appengine.png",
"images/logos/atom.png",
"images/logos/bootstrap.png",
"images/logos/bower.png"
];
});
У меня есть Slick рендеринга с тем, как это с моей App настроен на правильную страницу:
<body ng-app="v2App">
<div ng-view="" class="content"></div>
</body>
И тогда я Slick внутри мой взгляд. Я определил «образы» в качестве данных, как и где это тянет изображения от:
<div class="row">
<div class="col-lg-12">
<slick data="images" dots="false" infinite="true" speed="300" slides-to-show="5" touch-move="false" slides-to-scroll="1">
<div ng-repeat="image in images">
<img class="img-responsive" src="{{image}}">
</div>
</slick>
</div>
</div>
Я пытался несколько исправлений для этого, например, как использование $ таймаут и используя тумблер данные нагрузки, но ничего не кажется Исправить это. Я почти уверен, что это вызвано Грунтом, но я могу ошибаться.
Любые предложения будут оценены. Я довольно застрял.
Я думаю, что у вас возникли проблемы CSS ... это решить еще? –
@JohnSpiteri К сожалению, я никогда не думал об этом. Я закончил тем, что использовал для этого свое собственное решение. –