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;
....}
Related
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.
I am trying to get top left and right bottom of the Map which i am displaying. And i am trying to get this particular data in zoom event, but somehow this.map is becoming undefined and breaking the application
this.map.on('zoomend', function (layer) {
console.log("zoom",layer.target._zoom)
console.log("getbounds", this.map.getBounds());
});
Below i am providing the componentDidMount, here only i am defining zoom event, which working fine if i simply console.
componentDidMount() {
/* We are loading the map here whether or not load has loaded */
this.map = L.map('map', {
center: [50, 10],
zoom: 3,
minZoom: 2,
maxZoom: 11,
zoomControl: false,
attributionControl: false,
scrollwheel: false,
legends: true,
infoControl: false,
});
console.log("getbounds", this.map.getBounds()); //WORKING BUT JUST ONCE, when this component mounts.
this.map.on('zoomend', function (layer,a) {
console.log("zoom",layer.target._zoom)
console.log("zoom",layer)
console.log("a",a)
console.log("getbounds", this.map.getBounds()); // NOT WORKING, this.map GETS UNDEFINED which is obvious also.
});
/* Giving zoom control a different place in UI */
L.control.zoom({ position: 'topright' }).addTo(this.map);
L.control.scale({ position: "topright" }).addTo(this.map);
/* Selecting and showing styles for the map */
L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}', {
}).addTo(this.map);
}
Just change this part of your code bro
this.map.on('zoomend', (layer,a) => {
console.log("zoom",layer.target._zoom)
console.log("zoom",layer)
console.log("a",a)
console.log("getbounds", this.map.getBounds()); // NOT WORKING, this.map GETS UNDEFINED which is obvious also.
});
The reason why your code did not work is you were using simple function as a callback which need to bind to use this.
Solution: Use arrow function
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 need to make a chart with data from 1 full year, but it has too many x labels.
I did this to remove some:
var labels= []
for(var i = 0; i< 360;i++) {
labels.push(i%30 == 0 ? "":i);
}
This worked fine for a while, but now I need the tooltip to show the exact day so I need the label for that.
I'm using angularJs and ChartJs.
If you didn't specify autoSkip: false for ticks of x-axes, you should have x-axes labels auto skipped. It is by default true. So you shouldn't have overwhelming labels, plus tooltips should still show those auto skipped data.
xAxes: [{
ticks: {
autoSkip: false,
fontSize: 11,
...
}
}]