Even following different examples I can't apply the solution. Here are some sites I visited:
https://react-slick.neostack.com/docs/example/custom-paging
https://codesandbox.io/s/react-slick-forked-rxj5vp?file=/index.js:472-572
https://jsfiddle.net/tjwo23L8/
For me it is always presented in the frontend a wrong value that is not the total value of slides. Here is the code I am applying:
const heroSettings = { dots: true, infinite: true,fade: true,lazyLoad: true, speed: 800, autoplay: true, autoplaySpeed: 5000,slidesToShow: 1,slidesToScroll: 1, customPaging: i => (<button> {i + '/' + (i + currentSLide)}</button>),};
I get a value on the frontend similar to: 1/30 or 2/7. Since I have 7 slides in total in the loop.
Related
I'm using slick-list to build an element where people can insert their own slides.
The slider is supposed to show 4 slides, but sometimes the number of slides doesn't reach that much and the slider bugs, making slides smaller (in width) than they were supposed to be.
I've tried to use infinite:true but it didn't go as I expected.
Here's how my slick is:
`
$('.el-lista-slider-orcamento .itens').each(function(){
$(this).slick({
slidesToShow: 4
,infinite: true
,slidesToScroll: 1
,autoplay: false
,autoplaySpeed: 4000
,speed: 500
,easing: 'swing'
,swipeToSlide: true
,pauseOnHover: false
,pauseOnFocus: false
,adaptiveHeight: true
,prevArrow: $(".el-lista-slider-orcamento .setas .seta-anterior")
,nextArrow: $(".el-lista-slider-orcamento .setas .seta-proximo")
,responsive: [
{
breakpoint: 1280
,settings: {
slidesToShow: 2
}
},
{
breakpoint: 768
,settings: {
slidesToShow: 1
}
}
]
});
})
`
Is there a way to automatically duplicate the slides so I can reach the minimum of 5 (4+1) slides?
Thank you.
I've tried to set 'infinite' to 'true', expecting the slick-list to automatically duplicate the slides. I've seen some poeple complaining about this 'feature' (how they wish it didn't duplicate) but nothing happened.
Change slidesToShow: 4 in 3.99.
Learn more here.
I hope you can help me.
I am using Debut theme and this is my product and I would like to be able to put a slideshow on my product, to change images and variant if possible when I press the arrows (which I painted by my self for the example).
this.settings = {
accessibility: true,
arrows: true,
dots: true,
fade: true,
draggable: true,
touchThreshold: 20,
autoplay: this.autorotate,
autoplaySpeed: autoplaySpeed,
// eslint-disable-next-line shopify/jquery-dollar-sign-reference
appendDots: this.$arrows,
customPaging: function(slick, index) {
return (
'<a href="' +
selectors.wrapper +
sectionId +
'" aria-label="' +
loadSlideA11yString.replace('[slide_number]', index + 1) +
'" data-slide-number="' +
index +
'"></a>'
);
}
};
As I was looking for what I needed was to change the value of the arrows var(which was false) to true in my theme.js file, as you can see I already did it but I still don't see results.
I create a line chart using dojo. Recently, I have been applying multiple axis on the chart. But there was a problem here. It is applied to multiple axes in one place I have raised the issue of overlapping tick value. and do not change the properties of leftBottom, is there a way to adjust the shaft position? For example, x: 10, y: 20?
my code
var axisXRef = {labels : labelsample, titleOrientation : "away", stroke : {}, natural : true};
var axisYRef = {vertical : true, stroke : {}};
var chart = new Chart("chartNode");
chart.addPlot("lines", { type: Lines, tension: 3 ,min:0});
chart.addPlot("stacklines", { type: StackedLines, tension: 3 ,hAxis:"x",vAxis:"y1"});
chart.addPlot("areas", { type: Areas, tension: 3,hAxis:"x",vAxis:"y2" });
chart.custom.axisX = lang.clone(axisXRef);
chart.custom.axisY = lang.clone(axisYRef);
chart.addAxis("x", chart.custom.axisX);
chart.addAxis("y", chart.custom.axisY);
chart.addAxis("y1", {
vertical: true,
min : 50,
max:70,
leftBottom:true,
majorLabels: true, majorTicks: true, majorTick: {color:"red",length:50},
minorLabels: true, minorTicks:true, minorTick:{color:"red",length:50},
microTicks: true, microTick:{color:"red",length:50},
fixUpper: "major",
fixLower:"minor"
});
chart.addAxis("y2", {
vertical: true,
min : 0,
max:49,
leftBottom:true,
majorLabels: true, majorTicks: true, majorTick: {color:"blue",length:25},
minorLabels: true, minorTicks:true, minorTick:{color:"blue",length:25},
microTicks: true, microTick:{color:"blue",length:25},
fixUpper: "major",
fixLower:"minor"
});
Unfortunately Dojo charting only supports two axis per direction both axis being on different side of the chart. In other words you can't have two axis both on the left side of the chart. You have to have one right side using leftBottom: false property.
I want to have client side paging.
But for some reason, I only seem to get back the first page? Even though I know I have two pages worth of data (IE... I step through my code, and I definitely have two...)... What is more baffling is that my links to navigate through the pages never seem to be correct... For instance I would expect the following screen to say 1 of 2...
Also I would expect the bottom right hand side to say View 1-15 of 21?
My feeling is that I am doing something wrong in my data layer to give this pager it's info.
So It only returns the first page.
public static string JsonifyEnc(IEnumerable<TemplateModel> model, int popId, int page, int rows) {
TemplateModel variable = model.ToArray()[0];
ArrayList al = new ArrayList();
//foreach (PatientACOModel patMod in variable.Template) {
int i = 1;
int rowstart = (page * rows + 1) - rows;
int rowend = page * rows;
//Here is where I create the rows... nothing special here
var griddata = new {
total = variable.Template.Count % rows > 0 ? (variable.Template.Count / rows) + 1 : (variable.Template.Count / rows),
page = page,
records = al.Count,
rows = al.ToArray()
};
When I quick wath the total variable it says two?
This would be the first part of my json string that is returned...
{"total":2,"page":1,"records":15,"rows":
So it's there. Also, this is how I am building up my jqGrid...
$(document).ready(function () {
jQuery("#frTable").jqGrid ({
cmTemplate: { sortable: false },
caption: '#TempData["POPNAME"]' + ' Population',
datatype: 'json',
mtype: 'GET',
url: '/Encounters/GetAjaxPagedGridData/', //'Url.Action("GetAjaxPagedGridData", "Encounters", new { popId = TempData["POPULATIONID"] })',//
postData: { popId: '#TempData["POPULATIONID"]'},
pager: '#pager',
jsonReader: {repeatitems: false},
loadonce: true,
height: 'auto',
gridview: true,
viewrecords: true,
rowNum: 15,
shrinkToFit: false,
autowidth: true,
If you use loadonce: true on the client side you should change the server code so that it ignores page and rows options and returns all data. You should just sort the data corresponds to sidx and sord parameter (see sortname and sortorder in jqGrid). You don't need to fill total, page and records parts in the response.
If you use loadonce: true jqGrid load the data and save it in internal data and _index parameters. After that jqGrid change datatype option of jqGrid to "local". So all later sorting, filtering (searching) and paging of data will be done locally.
I have a enhancedgrid and used on two pages. When check box (component of data enhanced grid) is checked on page1, the equivalent row(s) on pg 2 are then ticked. My enhancedgrid code is
grid = new dojox.grid.EnhancedGrid({
loadingMessage:"Please wait",
store:newStore,
structure:layoutQL,
autoWidth:false,
autoHeight:true,
columnReordering:false,
rowsPerPage:3,
indirectSelection: true,
//noDataMessage:"No transactions have been processed for posting.",
//selectionMode:'single',
plugins: {
pagination: {
description: true,
sizeSwitch: false,
pageStepper: true,
gotoButton: true,
/*page step to be displayed*/
maxPageStep: 6,
/*position of the pagination bar*/
position: "bottom",
indirectSelection: true
},
filter : {
// Show the closeFilterbarButton at the filter bar
closeFilterbarButton: true,
// Set the maximum rule count to 5
ruleCount: 5,
// Set the name of the items
itemsName: "records"
}
}
I am using EnhancedDataGrid as in dojo framework. Any help will be appreciated.
Try "grid.selection.deselectAll()" when you move from one page to the next.