Javascript 带咕噜声的棱角滑溜_Javascript_Angularjs_Gruntjs_Yeoman_Slick.js

Javascript 带咕噜声的棱角滑溜

javascript angularjs gruntjs

Javascript 带咕噜声的棱角滑溜,javascript,angularjs,gruntjs,yeoman,slick.js,Javascript,Angularjs,Gruntjs,Yeoman,Slick.js,在使用Grunt构建页面之后，我真的很难在页面上正确加载。当我在本地提供文件时，一切看起来都很完美，但在缩小/丑陋之后，在某个地方，一切都变成了梨形。它看起来应该是这样的，当它被送达时：以下是构建和托管后的所有内容的外观。这些图像甚至根本看不见，它们似乎在视图外相互堆叠：依赖性： { "name": "v2", "version": "0.0.0", "dependencies": { "angular": "^1.3.0", "bootstrap-sass-o

在使用Grunt构建页面之后，我真的很难在页面上正确加载。当我在本地提供文件时，一切看起来都很完美，但在缩小/丑陋之后，在某个地方，一切都变成了梨形。它看起来应该是这样的，当它被送达时：

以下是构建和托管后的所有内容的外观。这些图像甚至根本看不见，它们似乎在视图外相互堆叠：

依赖性：

{
  "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"
  }
}

Grunfile：

 grunt.registerTask('build', [
    'clean:dist',
    'wiredep',
    'useminPrepare',
    'concurrent:dist',
    'autoprefixer',
    'ngtemplates',
    'concat',
    'ngAnnotate',
    'copy:dist',
    'cdnify',
    'cssmin',
    'uglify',
    'filerev',
    'usemin',
    'htmlmin'
  ]);

“滑溜转盘”被注入模块中。以下是用于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"
      ];
  });

我在这样的视图中进行了流畅的渲染，并将我的应用程序配置为正确的页面：

  <body ng-app="v2App">
    <div ng-view="" class="content"></div>
  </body>

然后我的视野里就有了滑溜的东西。我已经将“图像”定义为数据，因为它从中提取图像：

  <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>

我已经尝试了一些修复方法，比如使用$timeout和使用数据加载切换，但似乎没有任何方法可以修复它。我几乎可以肯定这是由咕噜声引起的，但我可能错了

如有任何建议，将不胜感激。我被卡住了。

这是我使用的CSS，没有它。。。它会有棱角，滑油会破裂。如果您仍然对使用它感兴趣。。。这是一个很棒的库，我反复使用它，所以值得让它为您的工具箱工作

.slick-slider
    display: block
    float left
    width 100%
    height 160px
    overflow hidden
    padding: 0
    margin: 0 0 10px 0
    background $white
    border-top $black-border
    border-bottom $black-border
    box-sizing: border-box
    -moz-box-sizing: border-box
    -webkit-touch-callout: none
    -webkit-user-select: none
    -khtml-user-select: none
    -moz-user-select: none
    -ms-user-select: none
    user-select: none
    -ms-touch-action: none
    -webkit-tap-highlight-color: transparent
    z-index 99

.slick-list
    position: relative
    overflow: hidden
    display: block
    margin: 0
    padding: 0

.slick-list:focus
    outline: none

.slick-loading .slick-list
    background: white url("../img/ajax-loader.gif") center center no-repeat

.slick-list.dragging
    cursor: pointer
    cursor: hand

.slick-slider .slick-list,
.slick-track,
.slick-slide,
.slick-slide img
    -webkit-transform: translate3d(0, 0, 0)
    -moz-transform: translate3d(0, 0, 0)
    -ms-transform: translate3d(0, 0, 0)
    -o-transform: translate3d(0, 0, 0)
    transform: translate3d(0, 0, 0)

.slick-track
    position: relative
    left: 0
    top: 0
    display: block
    zoom: 1

.slick-track:before,
.slick-track:after
    content: ""
    display: table

.slick-track:after
    clear: both

.slick-loading .slick-track
    visibility: hidden

.slick-slide
    float: left
    height: 100%
    min-height: 1px
    display: none

.slick-slide img
    display: block

.slick-slide.slick-loading img
    display: none

.slick-slide video
    display: block

.slick-slide video.slick-loading
    display: none

.slick-slide.dragging img
    pointer-events: none

.slick-initialized .slick-slide
    display: block

.slick-loading .slick-slide
    visibility: hidden

.slick-vertical .slick-slide
    display: block
    height: auto

如果在缩小之前一切都很好，那么我建议将“angular slick/dist/slick.js”和“slick carousel/slick/slick.js”包装在生活中

这是回购协议中的CSS，不利于缩小…

.slick-slider
    display: block
    float left
    width 100%
    height 160px
    overflow hidden
    padding: 0
    margin: 0 0 10px 0
    background $white
    border-top $black-border
    border-bottom $black-border
    box-sizing: border-box
    -moz-box-sizing: border-box
    -webkit-touch-callout: none
    -webkit-user-select: none
    -khtml-user-select: none
    -moz-user-select: none
    -ms-user-select: none
    user-select: none
    -ms-touch-action: none
    -webkit-tap-highlight-color: transparent
    z-index 99

.slick-list
    position: relative
    overflow: hidden
    display: block
    margin: 0
    padding: 0

.slick-list:focus
    outline: none

.slick-loading .slick-list
    background: white url("../img/ajax-loader.gif") center center no-repeat

.slick-list.dragging
    cursor: pointer
    cursor: hand

.slick-slider .slick-list,
.slick-track,
.slick-slide,
.slick-slide img
    -webkit-transform: translate3d(0, 0, 0)
    -moz-transform: translate3d(0, 0, 0)
    -ms-transform: translate3d(0, 0, 0)
    -o-transform: translate3d(0, 0, 0)
    transform: translate3d(0, 0, 0)

.slick-track
    position: relative
    left: 0
    top: 0
    display: block
    zoom: 1

.slick-track:before,
.slick-track:after
    content: ""
    display: table

.slick-track:after
    clear: both

.slick-loading .slick-track
    visibility: hidden

.slick-slide
    float: left
    height: 100%
    min-height: 1px
    display: none

.slick-slide img
    display: block

.slick-slide.slick-loading img
    display: none

.slick-slide video
    display: block

.slick-slide video.slick-loading
    display: none

.slick-slide.dragging img
    pointer-events: none

.slick-initialized .slick-slide
    display: block

.slick-loading .slick-slide
    visibility: hidden

.slick-vertical .slick-slide
    display: block
    height: auto

如果在缩小之前一切都很好，那么我建议将“angular slick/dist/slick.js”和“slick carousel/slick/slick.js”包装在生活中

这是回购协议中的CSS，它不利于缩小…

我认为您遇到了CSS问题。。。这个问题解决了吗？@JohnSpiteri遗憾的是，我从来没有想到这个问题。我最终实现了我自己的解决方案。我认为你有一个CSS问题。。。这个问题解决了吗？@JohnSpiteri遗憾的是，我从来没有想到这个问题。我最终实现了自己的解决方案。