React Slick with rows - reactjs

I want to add the slick carousel in my react app.
This is the origin code:
http://kenwheeler.github.io/slick/
I found the react-slick, but in the base code, it possible add multiple rows (responsive)
In the react-slick component this possible does not work
https://github.com/akiran/react-slick/issues/502
How can I use the slick gallery in react with all the options that exists in the origin code.


You should add the following to your settings variable:
rows: 2
slidesPerRow: 1


in your responsive settings add row=2
responsive : [{
breakpoint : 600,
settings : {
slidesToShow : 3,
slidesToScroll : 2,
rows : 2,
}
}]


I have implemented slick carousel in my react app. Please find below code :
class SimpleSlider extends React.Component {
render() {
var settings = {
dots: true,
autoplay: true,
arrows: true
};
return (
<Slider {...settings}>
<div><img src='../../src/assets/1.jpg' /></div>
<div><img src='../../src/assets/2.jpg' /></div>
<div><img src='../../src/assets/3.jpg' /></div>
<div><img src='../../src/assets/4.jpg' /></div>
</Slider>
);
}
}
If you want to add rows dynamically you can add that as well, you will need to make single row as a template in JavaScript and append it inside <Slider> component dynamically. Hope this would be helpful to you.


slick oly updating the current row not every which is been view
for eg. multiple rows 2 showing den still have to move two slides at a time but only updating 2 slides not 4

Related

Is there a way to add new tab in WordPress Gutenberg editor

I am completely new to Gutenberg and I need to add a new tab in the setting section Please check this screenshot
I Have created some blocks for Gutenberg but no experience in this. I tried this code
import { TabPanel } from '#wordpress/components';
const onSelect = ( tabName ) => {
console.log( 'Selecting tab', tabName );
};
const MyTabPanel = () => (
<TabPanel className="my-tab-panel"
activeClass="active-tab"
onSelect={ onSelect }
tabs={ [
{
name: 'tab1',
title: 'Tab 1',
className: 'tab-one',
},
{
name: 'tab2',
title: 'Tab 2',
className: 'tab-two',
},
] }>
{
( tab ) => <p>{ tab.title }</p>
}
</TabPanel>
);
But didn't help me. Anyone here please help me.
Thanks in advance

In the screenshot you provided, the location you are attempting to add a tab to is the Settings Header
(gutenberg/packages/edit-post/src/components/sidebar/settings-header) for which there is not currently a slot in the Gutenberg API to extend from (although this could potentially be done, it's best to not interfere with core UI).
The prefered method to add to the Admin UI is to use an provided SlotFill for custom content, currently there are:
PluginBlockSettingsMenuItem
PluginDocumentSettingPanel
PluginMoreMenuItem
PluginPostPublishPanel
PluginPostStatusInfo
PluginPrePublishPanel
PluginSidebar
PluginSidebarMoreMenuItem
The PluginSidebar slot is useful for adding custom content that is specific for your plugins/blocks purpose. The main point to consider is whether the content you wish to add applies just to your block, the post/page as a whole or is some other 'global' setting to do with a plugin.
If your content applies to the whole post/page, the PluginPostStatusInfo slot may be a good location to add to. You could also add your own Panel that appears underneath the "Document" tab.
If the content is block-specific, then you can use the to add custom controls underneath "Block" tab that contextually show when your block is selected. This would also be a good place for meta field values that are specific to the block or custom controls for colors/display options related to your block.
The official WordPress Gutenberg documentation also has a tutorial on Block Controls: Block Toolbar and Settings Sidebar which walks through some common scenarios for adding your own settings in Blocks.

FullCalendar React header custom buttons not showing

I'm trying to add some icons to the header as buttons, I've tried using both bootstrap and fontawesome as mentioned in the docs but I get an empty square instead of the icon. When using the bootstrap theme I get 'undefined', when using the standard I get the below.
Here's my code:
const customButtons = {
custom1: {
icon: "fa-times",
click: function() {
alert('test');
}
}
}
<CustomCalendar
customCalendarRef={customCalendarRef}
select={(e: any) => processClick(e)}
customButtons={customButtons}
themeSystem="standard"
header={{
right: '',
center: '',
left: 'prev,next today custom1'
}}
/>
Result:
How can I show an icon as a button in the header?

I'm also using fullcalendar in my react app so I've tried using your code. First there's one thing you forgot, wich is fontawesome icons also needs the "fa" class, so the correct would be fa fa-times, not only fa-times.
But then there's another issue which is the icon comes with custom fullcalendar classes when rendered:
So a solution you might use is to add this to your css somewhere:
.fc-icon.fa {
font: normal normal normal 14px/1 FontAwesome !important;
}
It worked for me:
Edited:
The string of the fontawesome classes should start with a blank space otherwise the 'fa' class will concatenate with the fullcalendar class. So: icon: ' fa fa-times'

Multiple labels for multiple data-sets in chart.js

I am using chart.js in react to create Line charts. I have to show data of the day, month and year. For the day I have different labels and data, for the month I have different labels and data, while for the year I have also different labels and data. I able to add multiple datasets and it works fine, but when I try to add multiple labels, it didn't work. Please help. Here is my code.
Live code demo: https://codesandbox.io/s/objective-bird-8owf1
import {Line} from 'react-chartjs-2';
const checkinsData={
labels:['4 P.M','5 P.M','6 P.M','7 P.M','8 P.M','9 P.M','10 P.M','11 P.M','12 A.M','1 A.M','2 A.M','3 A.M','4 A.M'],
datasets:[
{
label:"Day",
backgroundColor:"blue",
borderColor:'#333',
borderWidth:2,
lineTension:0.1,
fill:true,
data:[4,5,6,7,8,9,10,11,12,1,2,3,4]
},
{
label:"Week",
backgroundColor:"green",
borderColor:'#333',
borderWidth:2,
lineTension:0.1,
fill:true,
labels:['Sun','Mon','Tue','Web','Thu','Fri','Sat'],
data:[1,2,3,4,5,6,7]
},
{
label:"Month",
backgroundColor:"red",
borderColor:'#333',
borderWidth:2,
lineTension:0.1,
fill:true,
labels:['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
data:[1,2,3,4,5,6,7,8,9,10,11,12]
}
]
}
<div className="col-md-8 default-shadow bg-white pd-30-0 border-radius-10 align-center">
<Line
data={checkinsData}
options={
{
title:{
text:'Total Check-ins',
fontSize:20,
display:true
},
legend:{
display:true,
position:'top'
}
}
}
/>
</div>

Your x-axis should be constant. So you can't have more than one kind of data there. In your case, you want time, week day and month name on x-axis at the same time which is not possible in single graph. You can either generate three graphs or populate different data set on same graph by triggering events (like click etc).
What i mean is, when day button is click, data set for day will populated with labels, '4 P.M','5 P.M','6 P.M', when month is click, data set for month with labels 'jan','feb' etc should be populated

Here is the working code of the following question. I used one label set and update it on the button click. Similarly, I updated the datasets.
import React from 'react';
import {Line} from 'react-chartjs-2';
const checkinsData={
labels:['4 P.M','5 P.M','6 P.M','7 P.M','8 P.M','9 P.M','10 P.M','11 P.M','12 A.M','1 A.M','2 A.M','3 A.M','4 A.M'],
datasets:[
{
label:"Day",
backgroundColor:"blue",
borderColor:'#333',
borderWidth:2,
lineTension:0.1,
fill:true,
data:[4,5,6,7,8,9,10,11,12,1,2,3,4]
}
]
}
class CheckinGraph extends React.Component{
constructor(props)
{
super(props)
this.state={
key: Date.now()
}
this.setDayData=this.setDayData.bind(this);
this.setWeekData=this.setWeekData.bind(this);
this.setMonthData=this.setMonthData.bind(this);
}
setDayData=function() {
checkinsData.datasets.backgroundColor="blue";
checkinsData.labels=['4 P.M','5 P.M','6 P.M','7 P.M','8 P.M','9 P.M','10 P.M','11 P.M','12 A.M','1 A.M','2 A.M','3 A.M','4 A.M'];
checkinsData.datasets[0].data=[4,5,6,7,8,9,10,11,12,1,2,3,4];
this.setState({ key: Date.now() });
}
setWeekData=function()
{
checkinsData.datasets.backgroundColor="green";
checkinsData.labels=["Sun","Mon","Tue","Wed","Thu","Fri","Sat"];
checkinsData.datasets[0].data=[40,50,16,18,80,29,10];
this.setState({ key: Date.now() });
}
setMonthData=function()
{
checkinsData.datasets.backgroundColor="purple";
checkinsData.labels=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"]
checkinsData.datasets[0].data=[100,120,200,256,560,178,280,190,370,100,300,200];
this.setState({ key: Date.now() });
}
render()
{
return(
<div className="col-md-12 default-shadow bg-white pd-30-0 border-radius-10 align-center">
<ul className="list list-inline graph-label-list">
<li className="list-inline-item" onClick={this.setDayData}>
Day
</li>
<li className="list-inline-item" onClick={this.setWeekData}>
Week
</li>
<li className="list-inline-item" onClick={this.setMonthData}>
Month
</li>
</ul>
<Line
redraw
data={checkinsData}
options={
{
title:{
display:false
},
legend:{
display:false
}
}
}
/>
</div>
)
}
}
export default CheckinGraph;

You incorrectly listed "Jun', please be consistent in using quotes.
Just fix "Jun' to 'Jun' and everything should work.
Bonus, please look up some coding styles:
Google JavaScript Style Guide,
Airbnb JavaScript Style Guide etc.

angular-ui-swiper - How to set options?

I am trying to use angular-ui-swiper with AngularJS. Implementation was very easy, please see here https://www.npmjs.com/package/angular-ui-swiper
But I am not able to set more options for this slider, because I found no angular examples on the web. Can you please support me?
I am able to access the instance of the slider via "instance"-Attribute set in the html code. But I just managed to jump to a special slide. But I also want to have initially 3 slides per view for example. How can I achieve this?
Thank you
<swiper instance="instance">
<slides>
<slide ng-repeat="subpage in sliderElements">
<img src="{{subpage.featuredImage}}" alt="" title=""/>
</slide>
</slides>
<prev></prev>
<next></next>
<pagination></pagination>
</swiper>
Here are some options I need:
<script>
var swiper = new Swiper('.swiper-container', {
slidesPerView: 4,
spaceBetween: 30,
centeredSlides: true,
pagination: {
el: '.swiper-pagination',
clickable: true,
},
});
https://github.com/nolimits4web/Swiper/blob/master/demos/130-centered.html

You should write each property in this form (add -):
<swiper slides-per-view="4"> this is the same like slidesPerView: 4

bxslider loop carousel first child issue

I am using bxslider to build a nice carousel displaying 2 items at a time.
this is my html:
<ul class="bxslider clearfix">
<li>
<span>Case Study</span>
<h3>The London Business School</h3>
+ See Full Case Study
</li>
<li>
<span>Case Study</span>
<h3>The Terra Santa College</h3>
+ See Full Case Study
</li>
<li>
<span>Case Study</span>
<h3>Case Study number 3</h3>
+ See Full Case Study
</li>
</ul>
and this is my JS:
jQuery('#case-studies .bxslider').bxSlider({
mode: 'horizontal',
useCSS: false,
moveSlides: 1,
pager: false,
minSlides: 2,
maxSlides: 2,
slideWidth: 360,
autoHidePager: true,
slideMargin: 10
});
It works great and shows 2 items each click.
the issue I have is that each slide has a background image of a simple line in the left side and I am trying to remove the backgroun from the first item only.
I was thinking I can use last-child in my li item like so:
#case-studies .bxslider li:first-child {
background: none !important;
}
but after I checked on the site the bxslider loop animation clones the number of the slides you have in order to create a loop and the first hcild isn't necassary the one you see..
anyway I can add a class to the first item that appears?
Thanks

To remove the left and right arrows at respective ends you have to add two more options in the initializing script. After adding the final code will look like
var slider = $('.bxslider').bxSlider({
mode: 'horizontal',
useCSS: false,
moveSlides: 1,
pager: false,
minSlides: 2,
maxSlides: 2,
slideWidth: 360,
autoHidePager: true,
slideMargin: 10,
infiniteLoop : false, // Newly added code
hideControlOnEnd : true, // Newly added code
onSliderLoad : function(currentIndex){
$('.bxslider li').removeClass('current');
$('.bxslider li').eq(currentIndex).addClass('current');
},
onSlideAfter : function($element){
$('.bxslider li').removeClass('current');
$element.addClass('current');
}
});
To get the first slide in the view you have to run the script below
$('.bxslider li').eq(slider.getCurrentSlide())
NOTE: this code will work only if you have passed infiniteLoop : false and hideControlOnEnd : true while initializing the slider.
HINT:The slider doesn't clone the elements if hideControlOnEnd option is true .
UPDATE:
Check out this fiddle
Leave a comment if you have any doubts

Resources