Я использую слайдер angularJs-slick для своего проекта, чтобы показать некоторые пакеты как скользящую функцию.
Я включил все необходимые файлы и динамически получал пакеты через контроллер.
Здесь пакет показывается один за другим вместо слайдера с кнопками контроллера слайдов. и кнопки управления не загружаются в DOM. любая помощь приветствуется. поправьте меня, если я делаю что-то не так здесь. спасибо
<div class="row slick-container">
<slick settings="responsiveConfig">
{% verbatim %}
<div class="col-xs-11 col-xs-offset-0-5 col-sm-11 col-sm-offset-0-5">
<div class="row slick-container text-elegant">
<slick slides-to-show="4" slides-to-scroll="4">
<div class="col-sm-3 space-bottom-none slick-anchor space-top-none" ng-repeat="item in popularpackages">
<div class="panel panel-default panel-elegant">
<div class="panel-header text-center hidden-xs">
<img class="img-responsive inline full-block" ng-src="/images/aa1.{{loop.index+1}}.jpg" />
</div>
<div class="panel-body">
<a ng-click="trackPopularClick('{{item.test_name}}')" title="{{ item.test_name }}">
<div class="text-center">
<div title="{{ item.test_name }}">
<h3 class="space-top-none text-heading text-primary text-ellipsis text-center">{{ item.test_name }}</h3>
<span class="text-sm text-muted">Best Suited Category:</span>
<img class="img-responsive inline" style="height:1em;display:inline;border:0;" ng-src="/images/{{ item.item_icon }}.png"> <span class="text-sm text-muted">{{ item.item_name }}</span>
<div class="text-elegant text-heading text-muted text-center space-top-lg">
<span class="text-base text-center">{{ item.bundledTestsCount }} parameters</span></br>
<span>
INR
<del class="text-muted">{{ item.price }}</del>
<span class="text-secondary text-lg">{{ item.displayPrice }}</span>
</span>
</div>
<hr />
<span ng-repeat="organ in item.organCovered | split:',':0">
<img title="{{ organ }}" alt="{{ organ }}"
class="inline img-responsive" ng-src="/images/organs/{{ organ|trim }}.png"
style="height: 15px;">
<span class="text-primary">{{ organ|trim }}</span>
</span>
</br></br>
<a href="/packages/{{item.slug}}-in-{{locationCity}}">
<button class="btn-span blueBorderBtn btn-float-left">+ Know more</button>
</a>
<button class="btn btn-primary btn-float-right" ng-click="checkout(item.testLabId,locationCityId)">Book Now</button>
</div>
</div>
</a>
</div>
</div>
</slick>
</div>
</div>
</div>
{% endverbatim %}
</slick>
</div>
verbatims are used because I am using twig
```JAVASCRIPTS: this is in the proper structure
angular.module('MT.app', [
'slickCarousel'
])
.controller ('popularTestsController', function (
$scope,
) {
$scope.responsiveConfig = {
enabled: true,
autoplay: true,
draggable: false,
autoplaySpeed: 3000,
method: {},
dots: false,
infinite: false,
speed: 300,
slidesToShow: 3,
slidesToScroll: 3,
event: {
beforeChange: function (event, slick, currentSlide, nextSlide) {
},
afterChange: function (event, slick, currentSlide, nextSlide) {
}
},
responsive: [{
breakpoint: 1024,
settings: {
slidesToShow: 3,
slidesToScroll: 3,
infinite: true,
dots: true
}
},
{
breakpoint: 600,
settings: {
slidesToShow: 2,
slidesToScroll: 2
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}]
};
})
javascript is properly included in the js file, from module declaration to controller usage.
below css and JS cdn are included in the same order as I have mentioned below:
```CSS CDN
<link rel="stylesheet" href="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css"/>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css"/>
```JS CDN
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-slick-carousel/3.1.7/angular-slick.js"></script>