个人中心
gpt4 book ai didi

javascript - Angular-Slick 与 Grunt

转载 作者：行者123 更新时间：2023-11-28 07:06:34 26 4
gpt4 key购买 nike

我很难获得 Angular-Slick在 Grunt 使用 Yeoman Angular generator 构建页面后正确加载到我的页面上。当我在本地提供文件时，一切看起来都很完美，但是在缩小/丑化之后，一切都变成了梨形。它应该看起来像这样，并且在上菜时是这样的:

enter image description here

这是构建和托管后的所有内容。这些图像根本不可见，看起来它们在 View 之外相互堆叠: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"
  }
}

Grunt 文件:

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

'slickCarousel' 被注入(inject)到模块中。这是用于 Slick 的主 Controller :

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"
      ];
  });

我的应用程序配置为正确的页面，从这样的 View 中进行了流畅的渲染:

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

然后我的 View 中就出现了 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>

我已经尝试了许多修复此问题的方法，例如使用 $timeout 和使用数据加载切换，但似乎没有任何方法可以修复它。我几乎可以肯定这是由 Grunt 引起的，但我可能是错的。

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

最佳答案

这是我使用的 CSS，没有它...Angular Slick 将会崩溃。如果您仍然有兴趣使用它...这是一个很棒的库，我一遍又一遍地使用它，因此值得让它为您的工具箱工作。

.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”包装在 IIFE 中!

这是file在存储库中，并且它不适合缩小...

关于javascript - Angular-Slick 与 Grunt，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31665506/

26 4 0
文章推荐： ios - 点击更改 WKInterfaceButton 背景图像
文章推荐： c++ - Windows 创建错误 - 可能是事件处理
文章推荐： c++ - 共享对象和引用对象的引用计数
文章推荐： javascript - 如何将 Float 与 AngularJS 与 x 轴上的时间集成
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com