I want to display a number of cards in a carousel. For the carousel, I'm using react-slick. Since I want to show one card in the center, and I also want to show parts of the other cards at the ends of the carousel, I've set centerMode: true and added centerPadding:300px. The issue is, when I reduce the screen size, the cards overlap one another, and it looks horrible. How can I maintain the layout of the carousel, and ensure that there is always a certain amount of space between the cards, no matter the screen size?
import Slider from "react-slick";
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";
const settings = {
dots: true,
infinite: true,
speed: 500,
centerMode: true,
centerPadding: '300px',
slidesToShow: 1,
slidesToScroll: 1,
}
return (
<div style={{height: '400px', margin: '100px 10%'}}>
<Slider {...settings}>
<TestimonialCard description='"It has been a pleasure working with them. The UI/UX work they have done for our app is world-class and has been much appreciated.”' byline="Dr. John Doe, CEO" logo={Logo}/>
<TestimonialCard description='"It has been a pleasure working with them. The UI/UX work they have done for our app is world-class and has been much appreciated.”' byline="Dr. John Doe, CEO" logo={Logo}/>
<TestimonialCard description='"It has been a pleasure working with them. The UI/UX work they have done for our app is world-class and has been much appreciated.”' byline="Dr. John Doe, CEO" logo={Logo}/>
</Slider>
</div>
)
Instead of using px which is a fixed-set value, you can use vw which is short for viewport width. Say you put it to 10vw it means 10 percent of the width of the device that is loading the app, will be the size of the component that you are using it in. There is also vh, short for viewport height.
var settings = {
dots: true,
infinite: false,
speed: 500,
slidesToShow: 1,
slidesToScroll: 1,
centerMode: true,
centerPadding: 300px
responsive: [
{
breakpoint: 1024,
settings: {
centerPadding: 150px
}
},
You can add responsive attribute and reduce the centerPadding by half or whatever you want and comfortable with.
You can set another responsive attribute with another object values pairs in 768.
Related
I am using AngularJS to build a carousel with multiple items :
Now,
Each item has different (random width), and also the list of the items is random. (getting it from server).
Ofcourse it needs to be responsive, which means - the width of the item will be fixed - and when you resize it should display more/less items each.
Any recommendations for an AngularJS directive for this scenario?
Appreciate your reading, thanks.
I'd recommend: https://github.com/devmark/angular-slick-carousel
The last demo is the one which you are asking for:
https://devmark.github.io/angular-slick-carousel/#/
In your view, would need:
<slick class="slider" settings="slickConfig4" ng-if="slickConfig4Loaded">
<div ng-repeat="i in YOUR_IMAGES">
<img src={i.url} style="width:{{ i.width }}px;height:100px" />
</div>
</slick>
The configuration in your controller:
$scope.slickConfig4 = {
method: {},
dots: true,
infinite: true,
speed: 300,
slidesToShow: 1,
centerMode: true,
variableWidth: true
};
And after loading your data
$scope.slickConfig4Loaded = true;
I am trying to have stacked bar with different color as below.
I could achive bar as below however looking for -
1. label under each block and count.
2. On click on one of the block, color for rest of the blocks should be changed (should be same as hover behaviour)
Any suggestion and help would be appreciated.
You can use stacked bar chart with enabled data labels:
plotOptions: {
bar: {
stacking: 'normal',
dataLabels: {
color: 'black',
enabled: true,
y: 80
}
}
}
Live demo: http://jsfiddle.net/BlackLabel/wg46umjp/
API Reference: https://api.highcharts.com/highcharts/plotOptions.bar.dataLabels
In order to have the edges of the previous/next carousel items to show within Slider, I am reducing the .swiper-slide size. There are two ways of achieving this that I have tried:
setting .swiper-slide width to 90%
setting the slidesPerView param to 1.1
Both work nicely, but the final two items in the carousel show stange visual artefacts. The background of the container appears to overlap and intersect the slider. Images below (first in each example is as it is expected to render, second is with glitch). The visual glitch is cleared with a click, but still undesirable:
These are my Slider params
const params = {
slidesPerView: 3,
spaceBetween: 50,
speed: 400,
centeredSlides: true,
initialSlide: this.props.latestQuestionIndex,
slideToClickedSlide: true,
breakpoints: {
768: {
slidesPerView: 3,
spaceBetween: 30
},
425: {
slidesPerView: 1.1,
spaceBetween: 10
}
},
on: {
slideChange: () =>
this.state.swiper && this.setState({ currentIndex: this.state.swiper.activeIndex })
}
};
Is there another method of allowing for overlap of the edges of other carousel images, or a fix for this visual glitch?
I have implemented a scatterplot using react-plotly.js I would like the chart to re-size itself when the page layout changes. But currently, the layout of the chart doesn't change by itself. If I explicitly perform some function on the chart which forces the chart to redraw itself then only the chart width changes.
I applied useResizeHandler property and have set autosize to true. But that doesn't make any difference either.
<Plot
useResizeHandler
style={{ width: '100%' }}
data={chartData}
onClick={(data) => this.handlePlotClick(data)}
type={'scatter'}
layout={this.layout} />
const layout = {
autosize: true,
dragmode: true,
margin: {
l: 5,
r: 5,
t: 10,
b: 10,
pad: 0,
autoexpand: true
},
hovermode: 'closest',
hoverlabel: {
bgcolor: 'rgba(0,0,0,1)',
bordercolor: 'rgba(200,200,200,1)'
},
height: '650',
yaxis: {
visible: false
},
xaxis: {
autorange: false,
showline: true,
fixedrange: false, // true disables range selection on main graph
rangeslider: {
range: this.state.sliderRange,
visible: true,
borderwidth: 1,
bordercolor: '#000'
}
}
};
}
As you can see in the screenshot above, the div.svg-container has same width as the main-svg. But it still leaves white space on the right. I am unable to debug why it would behave that way. If I explicitly perform zoom on the chart that will redraw the plot then it will behave correctly. But I would like it to automatically resize when the page layout changes.
I was stuck on this problem too. Try window.dispatchEvent(new Event('resize')) from http://codrate.com/questions/how-can-trigger-the-window-resize-event-manually-in-javascript
I was calling resizeHandler when my chart is resized by dragging.
resizeHandler = () => {
this.child.resizeHandler();
window.dispatchEvent(new Event('resize'));
}
The charts always autoscales when the chart is resized, so I basically trigger the window resize when my chart size is changed. So for you, when you detect the page layout changes you can trigger the window resize.
I'm new to react, so maybe this question is a bit basic.
I have a multiple items carousel. Dots is currently set to true, but when it is loaded dynamically with 4 slides and the settings are:
slidesToShow: 4,
slidesToScroll: 4,
The dot is still displayed for tablets (max-width: 768px)... The point is that I would like to hide it.
Is there a way to add a condition so when the slide count is 4 , for responsive width 768px to hide the dot?
Here's an example: https://codepen.io/fauslg/pen/wXmWxL
this.settings = {
dots: true,
infinite: false,
speed: 500,
slidesToShow: 4,
slidesToScroll: 4,
arrows: false,
responsive:
You can change the code in your SliderComponent and add:
constructor(props){
.....
let {settings} = this.props;
for(let i = 0; i<settings.response.length();i++)
{
if(response[i].breakpoint == 768 &&
response[i].settings.slidesToShow==4){
settings.dots= false;
break;
}
}
......
.....
}
If the response array is always of the same structure(you know that width 768 is the second entry always):
constructor(props){
.......
let {settings} = this.props;
settings.dots= (
response[1].settings.slidesToShow==4)? false : true;
....}