slideToShow not rendering specified number of columns
up vote
3
down vote
favorite
I am using react-slick to render elements from the Array. My array length is 4 and every array element contains sub array and i specified 4 in slideToShow, and in 4 in slideToScroll.Inside 4 columns it is showing me 3 columns.Below is my code.
const settings = {
arrows: false,
infinite: true,
speed: 500,
slidesToShow: 4,
slidesToScroll: 4,
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 4,
slidesToScroll: 4
}
},
{
breakpoint: 780,
settings: {
slidesToShow: 2,
slidesToScroll: 2
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
]
};
<Slider {...settings} ref={slider => this.slider = slider}>
{
array_groups.map((item, index) =>
<div key={index}>
{
item.map((subItem, subIndex) =>
<div key={subIndex}>{subItem.title}
</div>)
}
</div>)
}
</Slider>
Can anyone please tell me, why it is showing 3 columns instead of 4.
Note: array_groups array contains 4 array elements. It is creating the 4th column, But not showing it.
reactjs react-slick
asked Nov 19 at 11:43
Rajat
1299
add a comment |
up vote
3
down vote
favorite
I am using react-slick to render elements from the Array. My array length is 4 and every array element contains sub array and i specified 4 in slideToShow, and in 4 in slideToScroll.Inside 4 columns it is showing me 3 columns.Below is my code.
const settings = {
arrows: false,
infinite: true,
speed: 500,
slidesToShow: 4,
slidesToScroll: 4,
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 4,
slidesToScroll: 4
}
},
{
breakpoint: 780,
settings: {
slidesToShow: 2,
slidesToScroll: 2
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
]
};
<Slider {...settings} ref={slider => this.slider = slider}>
{
array_groups.map((item, index) =>
<div key={index}>
{
item.map((subItem, subIndex) =>
<div key={subIndex}>{subItem.title}
</div>)
}
</div>)
}
</Slider>
Can anyone please tell me, why it is showing 3 columns instead of 4.
Note: array_groups array contains 4 array elements. It is creating the 4th column, But not showing it.
reactjs react-slick
asked Nov 19 at 11:43
Rajat
1299
add a comment |
up vote
3
down vote
favorite
up vote
3
down vote
favorite
I am using react-slick to render elements from the Array. My array length is 4 and every array element contains sub array and i specified 4 in slideToShow, and in 4 in slideToScroll.Inside 4 columns it is showing me 3 columns.Below is my code.
const settings = {
arrows: false,
infinite: true,
speed: 500,
slidesToShow: 4,
slidesToScroll: 4,
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 4,
slidesToScroll: 4
}
},
{
breakpoint: 780,
settings: {
slidesToShow: 2,
slidesToScroll: 2
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
]
};
<Slider {...settings} ref={slider => this.slider = slider}>
{
array_groups.map((item, index) =>
<div key={index}>
{
item.map((subItem, subIndex) =>
<div key={subIndex}>{subItem.title}
</div>)
}
</div>)
}
</Slider>
Can anyone please tell me, why it is showing 3 columns instead of 4.
Note: array_groups array contains 4 array elements. It is creating the 4th column, But not showing it.
reactjs react-slick
asked Nov 19 at 11:43
Rajat
1299
I am using react-slick to render elements from the Array. My array length is 4 and every array element contains sub array and i specified 4 in slideToShow, and in 4 in slideToScroll.Inside 4 columns it is showing me 3 columns.Below is my code.
const settings = {
arrows: false,
infinite: true,
speed: 500,
slidesToShow: 4,
slidesToScroll: 4,
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 4,
slidesToScroll: 4
}
},
{
breakpoint: 780,
settings: {
slidesToShow: 2,
slidesToScroll: 2
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
]
};
<Slider {...settings} ref={slider => this.slider = slider}>
{
array_groups.map((item, index) =>
<div key={index}>
{
item.map((subItem, subIndex) =>
<div key={subIndex}>{subItem.title}
</div>)
}
</div>)
}
</Slider>
Can anyone please tell me, why it is showing 3 columns instead of 4.
Note: array_groups array contains 4 array elements. It is creating the 4th column, But not showing it.
reactjs react-slick
reactjs react-slick
asked Nov 19 at 11:43
Rajat
1299
asked Nov 19 at 11:43
Rajat
1299
asked Nov 19 at 11:43
Rajat
1299
asked Nov 19 at 11:43
Rajat
1299
asked Nov 19 at 11:43
Rajat
1299
1299
add a comment |
add a comment |
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53373922%2fslidetoshow-not-rendering-specified-number-of-columns%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
