I want to hide a directive at the beginning, when it is still creating. In this directive I'm integrating a jquery carousel.
This is the directive:
return {
restrict: 'E',
replace: true,
scope: true,
templateUrl: 'slick.html',
link: function(scope: any, element: any, attrs: any) {
scope.slickReady = false;
var slickEl = element.querySelector('.slick');
if(slickEl){
slickEl.on('init', function(){
scope.slickReady = true;
});
slickEl.slick({
arrows: true,
autoplay: false,
dots: true,
infinite: false,
speed: 300,
slidesToShow: 4,
slidesToScroll: 4,
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
}
}
]
})
}
}
}
This is the main html:
<slick></slick>
This is the slick.html:
<div ng-switch on="slickReady">
<div class="slick" ng-switch-when="true"></div>
<div class="spinner" ng-switch-when="false">
<div ng-repeat="item in todos">
<img ng-src="{{item.face}}" class="md-avatar img-center">
<p class="truncate">{{item.who}}</p>
</div>
</div>
</div>
The problem is that I have this error in console:
TypeError: element.querySelector is not a function
at Object.link (http://localhost/js/directives/slick.js:9:35)
EDIT
I tried to do this:
var slickEl = element[0]querySelector('.slick');
if(slickEl.length > 0)
because, looking at the debugging, the 'element' is so structured:
0:div length:1
In this way, I have not the error but the carousel doesn't build.
If You are using Jquery Carousel then it must be tipical jquery. So try:
slickEl=$(element).find(".slick");
Related
_high.html.erb:
<div class="col-xl-12">
<div class="default-slick-carousel freelancers-container freelancers-grid-layout">
<%= render partial: '/pages/top_trainers' %>
</div>
</div>
##To reinitialize the carousel when coming back to the carousel page, I have added this:
<script type="text/javascript">
$(document).ready(function(){
$('.default-slick-carousel').not('.slick-initialized').slick({
infinite: false,
slidesToShow: 3,
slidesToScroll: 1,
dots: false,
arrows: true,
adaptiveHeight: true,
responsive: [
{
breakpoint: 1292,
settings: {
dots: true,
arrows: false
}
},
{
breakpoint: 993,
settings: {
slidesToShow: 2,
slidesToScroll: 2,
dots: true,
arrows: false
}
},
{
breakpoint: 769,
settings: {
slidesToShow: 1,
slidesToScroll: 1,
dots: true,
arrows: false
}
}
]
});
})
</script>
So, when I am on this page, carousel is working fine.But when i am moving to some other page and coming back to the carousel page, carousel sliding is not working
i want to make slider with dynamic content on it and changed based on click. i have used slick slider and its working fine at the first load, after clicking on any one content, new content will be added and remove the previous one. At this time slick slider not working.
Please help me, any help will be appreciated.
HTML Code:
<div class="video-placeholder" *ngFor="let relate of relatedArray">
<div class="carousel16to9ratio">
<div><img class="img-fluid"
src="image"
alt=""></div>
<div class="overlayIframe"
(click)="playNextVideo()">
</div>
</div>
<div class="carousel-video-title">video name</div>
</div>
typescript:
ngAfterContentInit() {
setTimeout(function () {
$('.carousel-custome').slick({
dots: false,
infinite: false,
speed: 300,
slidesToShow: 4,
slidesToScroll: 1,
prevArrow: '<i class="fas fa-chevron-left prev"></i>',
nextArrow: '<i class="fas fa-chevron-right next"></i>',
cssEase: 'linear',
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 3,
slidesToScroll: 1,
dots: false
}
},
{
breakpoint: 600,
settings: {
slidesToShow: 2.3,
slidesToScroll: 1,
centerMode: false,
initialSlide: 0
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 2.3,
slidesToScroll: 1,
centerMode: false,
initialSlide: 0
}
}
]
});
}, 200);
}
on playNextVideo() function i again call ngOnInit() and remove slick data using
$('.carousel-custome').slick('slickRemove', null, null, true);
how to achieve this, please suggest me.
I am using slick carousel in one of my projects & have added the configuration to display the next and prev button.
I am trying to tweak the default behavior of the next and prev button in such a way that clicking them just scrolls from left to right but the currently selected slide will remain the same. I am not able to tweak this default behavior and clicking the next and prev button is changing the selected slide as well. Has anyone tried the same?
$('.product-slider').slick({
dots: true,
infinite: false,
speed: 700,
slidesToShow: 4,
slidesToScroll: 4,
responsive: [{
breakpoint: 1024,
settings: {
slidesToShow: 3,
slidesToScroll: 3,
infinite: false,
dots: true
}
}, {
breakpoint: 768,
settings: {
slidesToShow: 2,
slidesToScroll: 2,
infinite: false,
dots: true
}
}, {
breakpoint: 480,
settings: {
slidesToShow: 1,
slidesToScroll: 1,
infinite: false,
dots: true
}
}
]
});
I'm doing a web app with Angular and Angular Material. I have to do a carousel and I found a nice jquery's component. So I made a directive with that. It works, but the problem is that for 1 or 2 seconds I see the elements of the carousel displayed like a <ul> list, so vertically. Then, when the directive is build, I see correctly the carousel.
Is there a way to insert a loader (maybe with angular material) that shows while the directive is not build?
This is the code
angular.module('app').directive("slick", function($timeout) {
return function(scope: any, el: any, attrs: any) {
$timeout((function() {
el.slick({
arrows: true,
autoplay: false,
dots: true,
infinite: false,
speed: 300,
slidesToShow: 4,
slidesToScroll: 4,
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
}
}
// You can unslick at a given breakpoint now by adding:
// settings: "unslick"
// instead of a settings object
]
})
}), 100)
}
});
I would use a boolean scope variable that tracks when slick is initialized. Start it at false, and use slick's init event to know when to set to true.
Basically:
angular.module('app').directive("slick", function($timeout) {
return {
restrict: 'E',
replace: true,
scope: true,
templateUrl: 'slick.tpl.html',
link: function(scope: any, el: any, attrs: any) {
scope.slickReady = false;
// use a child element (defined in template) so we can toggle between carousel and spinner
var slickEl = el.children('.slick').first();
if(slickEl){
// listen for slick's init event
slickEl.on('init', function(){
scope.slickReady = true;
});
// initialize slick (not sure why you had it wrapped in $timeout in OP)
slickEl.slick({
...
});
}
};
}
});
slick.tpl.html
<div ng-switch on="slickReady">
<div class="slick" ng-switch-when="true"></div>
<div class="spinner" ng-switch-when="false">
<!-- use whatever kind of spinner you want -->
</div>
</div>
I have accordion combination: tabs is slider (I use slick carousel with set break point). It work fine, until I resize window over break point, it not until working.
This is my site:
http://geeman-2.myshopify.com/
(New arrivals section)
And this my code:
$(document).ready(function(){
$('.sub-slider').slick({
dots: false,
infinite: true,
autoplay: true,
autoplaySpeed: 3000,
speed: 300,
slidesToShow: 6,
slidesToScroll: 6,
responsive: [
{
breakpoint: 1208,
settings: {
slidesToShow: 4,
slidesToScroll: 4
}
},
{
breakpoint: 798,
settings: {
slidesToShow: 2,
slidesToScroll: 2
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
]
});
var panelHandle;
$('.btn-on').on('click', function() {
var $this = $(this),
handle = $this.data('handle');
panelHandle = handle;
$('#' + handle).slideDown('slow');
$('.triangle-' + handle).slideDown('slow');
$('.' + handle).slick({
dots: false,
infinite: true,
speed: 300,
arrows: false,
slidesToShow: 4,
slidesToScroll: 4,
responsive: [
{
breakpoint: 798,
settings: {
slidesToShow: 2,
slidesToScroll: 2
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
]
});
});
$('.btn-close').on('click', function() {
var $this = $(this),
handle = $this.data('handle');
$('#' + handle).slideUp(1000);
$('.triangle-' + handle).slideUp(1000);
});
});
I hope everyone help me solve it!
Thanks!
Did you try the $('.slick-carousel-responsive').resize(); trick found here? https://github.com/jellekralt/Responsive-Tabs/issues/52 - adding it to my resize event fixed a similar issue for me!