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.
Related
I am having a situation where on clicking on first slide of slider, i need the carousel to move to next slide.
Below is the code which i am using to create a slider
var $myanimSlider = $('.animslider').slick({
dots: true,
arrows: true,
slidesToShow: 3.6,
slidesToScroll: 1,
vertical: false,
autoplay: false,
autoplaySpeed: 2500,
infinite: false,
focusOnSelect: true,
touchMove: true,
speed: 500,
centerMode: true,
centerPadding: '0',
cssEase: 'linear',
prevArrow: '<div class="animslick_nav prev-arrow"><i></i><svg><use xlink:href="#circle"></svg></div>',
nextArrow: '<div class="animslick_nav next-arrow"><i></i><svg><use xlink:href="#circle"></svg></div>',
appendDots: $('.animDots'),
responsive: [
{ breakpoint: 767,
settings: {
arrows: true,
dots: true,
slidesToShow: 1
}
}
]
}).slickAnimation();
and i was trying to use the slickNext on click of first slide so that it may move to second slide.
$('#slick-slide00').click(function() {
$myanimSlider.slick("slickNext");
});
slick-slide00 is the id of first slide but the above code is not working.
Can someone help me understand what is the issue and there is no errors in the console also.
Let's suppose slick slider pagination has 25 pages (it might be possible on mobile devices)
Is it possible to set up a slick slider to show pagination like shown below?
Pagination block: < 1 ... 2 3 4 ... 25 >
Update: what I mean is to hide some pages and show these dots instead
try this
<section class="slider">
<div>slide1</div>
<div>slide2</div>
<div>slide3</div>
<div>slide4</div>
<div>slide5</div>
</section>
<span class="pagingInfo"></span>
$(".slider").slick({
autoplay: true,
dots: true,
customPaging: function (slider, i) {
var thumb = $(slider.$slides[i]).data();
return `<a>${i}</a>`;
},
responsive: [
{
breakpoint: 500,
settings: {
dots: false,
arrows: false,
infinite: false,
slidesToShow: 2,
slidesToScroll: 2,
},
},
],
});
_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 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 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");