I am using slick-carousel in angular 4 slick-carousel
In my home.component.html
<div class="list-books" *ngIf="results?.length > 0">
<div class="col-md-3 col-xs-6" *ngFor="let item of results;let i=index">
<a>
<div class="mt-card-item">
<div class="mt-card-content">
<div class="row">
<div class="col-md-12">
<span>{{item.Name}}</span>
</div>
</div>
<div class="row" >
<div class="col-md-12">
<span>{{item.Address}}</span>
</div>
</div>
<div class="row">
<div class="col-md-12">
<span class="mt-card-name">{{item.Telephone}}</span>
</div>
</div>
</div>
</div>
</a>
</div>
</div>
Inside my home.component.ts
$('.list-books').slick({
dots: false,
infinite: false,
speed: 300,
fade: false,
slidesToShow: 4,
slidesToScroll: 4,
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 3,
slidesToScroll: 1,
infinite: true,
dots: true
}
},
{
breakpoint: 600,
settings: {
slidesToShow: 2,
slidesToScroll: 1
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
]
});
The variable results holds the data to be filled in by the carousel. When the component loads I can se the data but could not load the css and breaks the UI. It looks the data comes first but cant load the css cannot figure it out
I have also added the css in my index.html and slick.min.js in my angular.json
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/gh/kenwheeler/slick#1.8.1/slick/slick.css" />
"node_modules/slick-carousel/slick/slick.min.js"
Any idea about what could be done. Any help would be appreciated.
Here try Try to add a timeout for your init()
setTimeout(() => { //you slick-carousel init code }, 1000);
In angular js version it worked as suggested by Nick njj
In angular.json it has a section like:
"styles": [
"//cdn.jsdelivr.net/gh/kenwheeler/slick#1.8.1/slick/slick.css",
],
Or if you want add your src/style.css
#import "//cdn.jsdelivr.net/gh/kenwheeler/slick#1.8.1/slick/slick.css";
And other hand I have found a working example on stackBlitz
example
Related
I am having a very intermittent problem with Ajax and Datatables.
Here's my JavaScript Code:
var table_1 = $('#task_runner_table').DataTable( {
"ajax": '../static/files/task_runner.json',
"columns": [
null,
null
],
"columnDefs": [{ targets: [0], className: 'dt-body-right' },
{ targets: [1], className: 'dt-body-center' }],
"ordering": false,
"pageLength": 30,
"searching": false,
"paging": false,
"info": false,
} );
var table_2 = $('#task_runner_stats').DataTable( {
"ajax": '../static/files/tr_stats.json',
"columns": [
null,
null
],
"columnDefs": [{ targets: [0], className: 'dt-body-right' },
{ targets: [1], className: 'dt-body-center' }],
"ordering": false,
"pageLength": 30,
"searching": false,
"paging": false,
"info": false,
} );
setInterval(function(){
table_1.ajax.reload();
}, 2999)
setInterval(function(){
table_2.ajax.reload();
}, 2971)
Here's my HTML Code:
<div class="container">
<div class="row no-gutters">
<div class="col-6">
<div class="card-block">
<table id="task_runner_table" class="display" data-order="[]"></table>
</div>
</div>
<div class="col-6">
<div id="event_chart2"></div>
<div id="event_chart3"></div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row no-gutters">
<div class="col-6">
<table id="task_runner_stats" class="display" data-order="[]"></table>
</div>
</div>
</div>
The issue has to do with table_2. If I comment out table_2 and the setInterval for it, I do not have any issues. But when I run it, I get an error:
DataTables warning: table id=task_runner_stats - Invalid JSON response. For more information about this error, please see http://datatables.net/tn/1
It doesn't occur immediately -- the page will refresh a few times and then the error will appear. Sometimes it runs for 5 minutes, sometimes 30seconds before the error appears.
when I go to the developer tools --> network --> response. I always get the same valid JSON structure:
{"data": [["max_queue", ###], ["max_pool", ##3], ["max_running", ###]]}## Heading ##
How do I solve the problem?
I have two carousels on my page using owl-carousel. Both show an empty last item. I'm a beginner and I have no idea on how to solve this. Can somebody help me?
I'm using twig to loop trough my php array.
<section id='noticia-carousel' class='pt-0'>
<div class='container main-container'>
<div class='owl-carousel owl-theme'>
{% for noticia in noticias_principais %}
<div class='box'>
<img src='{{noticia.imagem_capa}}' alt='Imagem referente à notícia {{noticia.titulo | striptags}}'>
<div class='titulo'>
<h4><a href='noticia/{{noticia.id}}'> {{noticia.titulo | striptags}} </a></h4>
</div>
</div>
{% endfor %}
<div class="owl-controls">
<div class="owl-nav">
</div>
</div>
</div>
<div class='text-center'>
<button class='btn btn-secondary' onclick="window.location.href='/noticias'">Todas
as Notícias </button>
</div>
</div>
</section>
$('#noticia-carousel .owl-carousel').owlCarousel({
items: 2,
dots: false,
nav: true,
navText: ['<i class="fa fa-angle-left" aria-hidden="true"></i>', '<i class="fa fa-angle-right" aria-hidden="true"></i>'],
animateOut: 'fadeOut',
autoplay: true,
loop: true,
autoplayTimeout: 4000,
autoplayHoverPause: true,
responsiveClass: true,
responsive: {
0: {
items: 1,
nav: false
},
600: {
items: 1,
nav: false
},
1000: {
items: 2
},
1300: {
items: 2
}
}
});
Here is how it looks right now: https://educacao.ouropreto.mg.gov.br/
Works great, but the last item is empty. I want it to autoplay and loop.
This HTML after your {% for %} loop has become an item in your carousel because it is a child of .owl-carousel:
<div class="owl-controls">
<div class="owl-nav"></div>
</div>
Remove it and there will be no extra space in the carousel.
I need to set custom dots in owl carousel. I have this code in JS:
$(document).ready(function() {
$('#header-slider').owlCarousel({
loop: true,
autoplay: true,
autoplayTimeout: 2300,
pagination: false,
navigation: true,
navText: [$('.am-next'), $('.am-prev')],
navigation: true,
margin: 0,
dotsData: ["<button role='button' class='owl-dot'></button><svg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='16' height='16' viewbox='0 0 250 250' enable-background='new 0 0 426.667 410' xml:space='preserve'><path class='loader' transform='translate(125, 125) scale(.84)'></svg>"],
responsive: {
0: {
items: 1
},
600: {
items: 1
},
1000: {
items: 1,
nav: false
},
1200: {
items: 1,
nav: false
}
}
});
});
But with this code nothing happend, just undefined dots are displayed. Is even possible to make custom dots like this?
Change the following code like this:
$(document).ready(function() {
$('#header-slider').owlCarousel({
loop: true,
autoplay: true,
autoplayTimeout: 2300,
pagination: false,
navigation: true,
navText: [$('.am-next'), $('.am-prev')],
navigation: true,
margin: 0,
dotData: true,
dotsData: true
responsive: {
0: {
items: 1
},
600: {
items: 1
},
1000: {
items: 1,
nav: false
},
1200: {
items: 1,
nav: false
}
}
});
});
Add your dots data in your owl-item:
<div class="item" data-dot="<button role='button' class='owl-dot'></button>">
<!-- Your Image -->
</div>
So looking at the documentation, the dotsData option takes a boolean which just tells Owl Carousel to look for the data-dot attribute for each item a dot is shown for. So your custom markup needs to go into the HTML rather than being passed in as a string when configuring the carousel in JS.
If you check this Fiddle you can see how the JS option relates to the HTML data attribute: https://jsfiddle.net/4xymnwey/
HTML
<ul class="owl-carousel owl-theme">
<li class="carousel-slot" data-dot="<p>text 1</p>">slide 1</li>
<li class="carousel-slot" data-dot="<p>text 2</p>">slide 2</li>
<li class="carousel-slot" data-dot="<p>text 3</p>">slide 3</li>
</ul>
JS
$(".owl-carousel").owlCarousel({
items: 1,
dots: true,
dotsData: true
});
Credit to this issue comment on GitHub for the answer. I hope that helps :)
If nothing helped to you.
Try to achieve manually.
Here is the example:-
HTML Auto-generated by Owl-carousel
<div class="owl-controls">
<div class="owl-pagination">
<div class="owl-page"><span class=""></span></div>
<div class="owl-page"><span class=""></span></div>
<div class="owl-page active"><span class=""></span></div>
<div class="owl-page"><span class=""></span></div>
<div class="owl-page"><span class=""></span></div>
<div class="owl-page"><span class=""></span></div>
</div>
</div>
It will auto-generated by Owl carousel.
select parent id/class of this and change content using javascript or jquery. It's totally up to you.
here is the example:-
Javascript
var dots = document.querySelectorAll("#testomonial .owl-pagination .owl-page");
let i=1;
dots.forEach((elem)=>{
elem.innerHTML = i;
i++;
})
I've installed Slick sliders synced slides for product images and thumbnails and it all works fine until you use the main image to navigate instead of the thumbnails.
You can see the issue here:
https://monosnap.com/file/2wLtDBErumVnQs8UlA5PtRro8UBQZq
It's run on Shopify but I don't think that would be the issue it's more something to do with centring but I just can't figure it out!
Any help appreciated!
document.addEventListener("DOMContentLoaded", function(event) {
$('.slider-for').slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: true,
fade: true,
asNavFor: '.slider-nav'
});
$('.slider-nav').slick({
slidesToShow: 3,
slidesToScroll: 1,
asNavFor: '.slider-for',
dots: false,
centerMode: true,
focusOnSelect: true,
infinite: true
});
});
<div class="slider-for">
{% for image in product.images %}
<img src="{{image | img_url: '565x', crop: 'center'}}" title="{{image.alt | default: product.title | escape}}" alt='{{image.alt | default: product.title | escape}}'/>
{% endfor %}
</div>
<div class="slider-nav">
{% for image in product.images %}
<div>
<img src="{{image | img_url: '400x'}}" alt="{{image.alt | default: product.title | escape}}" class="product-thumbnails">
</div>
{% endfor %}
</div>
I have this 2 data tables below as you can see one of them is overlapping the data table and the other one is need to edit the width. I try to add width but don't have any effect on my first data table. Any suggestion about this two problems?.
HTML
<div class="row">
<div class="col-lg-6">
<div class="panel panel-primary">
<div class="panel-heading">
<div class="row">
<div class="col-lg-6">
<i class="fa fa-list fa-fw"></i>Borrower Name
</div>
</div>
</div>
<!-- /.panel-heading -->
<div class="panel-body">
<div class="dataTable_wrapper">
<div class="col-lg-6">
<table class="table table-striped table-bordered table-hover table-responsive nowrap"
role="grid" style="width: 100%;" id="dtBorrowerName">
</table>
</div>
</div>
</div>
</div>
</div>
#*</div>
<div class="row">*#
<div class="col-lg-6">
<div class="panel panel-primary">
<div class="panel-heading">
<div class="row">
<div class="col-lg-6">
<i class="fa fa-list fa-fw"></i>Book
</div>
</div>
</div>
<!-- /.panel-heading -->
<div class="panel-body">
<div class="dataTable_wrapper">
<div class="col-lg-6">
<table class="table table-striped table-bordered table-hover table-responsive nowrap"
role="grid" style="width: 10%;" id="dtBook">
</table>
</div>
</div>
</div>
</div>
</div>
</div>
JS CODE
var dtBorrowerName = $('#dtBorrowerName').DataTable({
responsive: true,
processing: true,
info: true,
search: true,
stateSave: true,
order: [[1, "desc"]],
lengthMenu: [[5, 10, 20, -1], [5, 10, 20, "All"]],
ajax: { "url": "/LS/GetBorrower" },
columns:
[
{ data: "BorrowerID", title: "", visible: false, searchable: false },
{ data: "IDNo", title: "ID Number" },
{ data: "Name", title: "Complete Name", sClass: "alignRight", width: " 100px" },
{ data: "BookTransactionHdrID", title: "BookTransactionHdrID", visible: false, searchable: false }
]
});
function GetStudentBook(getId) {
if (getId != 0 || getId != undefined || getId != "") {
dtStudBook = $('#dtBook').DataTable({
responsive: true,
processing: true,
info: true,
retrieve: true,
destroy: true,
search: true,
stateSave: true,
lengthMenu: [[5, 10, 20, -1], [5, 10, 20, "All"]],
ajax: {
"url": "/LS/GetStudentBook",
"data": function (d) {
d.BookTransactionDtlID = getId;
}
},
columns:
[
{ data: "BookId", title: "", visible: false, searchable: false },
//{ data: "Barcode", title: "Barcode", searchable: false },
{ data: "Author", title: "Author" }
// { data: "Title", title: "Title", sClass: "alignRight" },
// { data: "DatePublish", title: "Date Publish", sClass: "alignRight" },
// { data: "PlacePublish", title: "Place Publish" },
// { data: "NameOfPublisher", title: "Name Of Publisher"},
// { data: "ISBN", title: "ISBN"},
// { data: "BookTransactionDtlID", title: "", visible: false }
]
});
}
else {
//do nothing..
}
}
I hit this problem. It is caused by the length of the table headers and the padding around them. (I am assuming that it looks OK if the panel is wide?).
The solution is to write complicated JS to split words like "Publisher" or (as I did in the end) use Bootstrap visibility to show normal words on larger screens and use abbreviations on smaller screens (I found I had to write extra media queries to clean this up).
You may need a tooltip or whatever to explain your abbreviations. You are rather trying to fit a quart into a pint pot (that is a lot of headings for a small panel if you want them orderable etc) I think it will take quite a bit of hand crafting with very specific media queries.
Hope that helps.