As I know Ionic slider using Swiper JS
I put the loop on true but it not looping
it reach the final slide and stop
here is my config
Config= {
initialSlide: 0,
slidesPerView: 1,
speed: 400,
spaceBetween: 20,
loop: true,
autoplay: {
delay: 1000,
disableOnInteraction: false,
},
};
<ion-slides
#slides
[options]="Config"
loop="true"
>
<ion-slide>{{"slide-1"}}</ion-slide>
<ion-slide>{{"slide-2"}}</ion-slide>
</ion-slides>
Put "loop" as true in your html (as above). This worked for me..
Related
my React website from right to left
<html lang="ar" dir="rtl">
and I have react-slide to show 1 image every slide
const settings = {
dots: true,
infinite: true,
autoplaySpeed:1500,
speed: 1000,
slidesToShow: 1,
slidesToScroll: 1,
autoplay: true,
arrows: false,
initialSlide: 0,
fade: true,
rtl: true
};
my problem is fade effect not show any image !!!!
Assuming there are no problems in the html or css code, try either of the following cssEase options.
cssEase: 'linear',
cssEase: 'cubic-bezier(0.600, -0.280, 0.735, 0.045)'
I have multiple slick slider on same page. It works fine. I set breakpoint for responsiveness but when I test it from mobile phone the slider initiate few seconds later. Suppose, I set 4 slide initially, and set 2 slides in breakpoint : 768, when I check it from my phone at first it shows 4 slides after few seconds it automatically shows 2 slides.
This is my slider script:
$(document).ready(function(){
$('.autoplay').slick({
slidesToShow: 4,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 2500,
arrows: false,
dots: false,
pauseOnHover: true,
responsive: [{
breakpoint: 768,
settings: {
slidesToShow: 2
}
}, {
breakpoint: 520,
settings: {
slidesToShow: 2,
arrows: false,
}
}]
});
});
I have 4 sliders, and I use 4 different script tag.
My file structure:
-- jquery js
-- slick js
-- slick scripts
Can anyone please tell me why this problem occur?
Note: This is my first time asking a question on here.
I have built a logo slider (with 2 breakpoints) using Slick.js via the build in this video by Tim Strifler (Divi Life) which I used as a base: https://www.youtube.com/watch?v=m8jMTbzyQU4.
The slider works how I want it to except whenever I resize the browser window. Then the slider "goes haywire" (stops, slides backwards, changes speeds, loads images at a stuttered/jumbled rate, etc.).
If I refresh the page at whatever screen size I'm currently on, then it will reset and work fine. (It does not appear to right itself if I just wait.)
Here is the code I am using to style the slider:
(The Divi row it is in is set to 100% width and overflow is hidden.)
jQuery(document).ready(function() {
jQuery('.divilife-3-col-feature-blurb-slider').slick({
dots: false,
arrows: false,
pauseOnHover: false,
changeDir: false,
slidesToShow: 3,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 0,
speed: 7000,
cssEase: "linear",
infinite: true,
responsive: [
{
breakpoint: 980,
settings: {
slidesToShow: 2,
slidesToScroll: 1
}
},
{
breakpoint: 767,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
]
});
});
</script>
I have tried different settings including changing the row width, toggling btwn overflow hidden/visible, taking away the breakpoints, and adding mobileFirst: true.
But I haven't found anything that remedies the problem.
My setting:
const settings= {
infinite: false,
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
dots: true,
nextArrow: <NextArrow />,
prevArrow: <PrevArrow />,
dotsClass: "slick-dots mb-9"
};
You can use initialSlide:1 in your settings object
you can check more here on API's doc by React Slick
https://react-slick.neostack.com/docs/api#initialSlide
I have created a bar chart with rangeslider using react-plotly.js. I want to enable drag and zoom feature on chart area as provided by the library. But that feature is not working for me. The fixedRange attribute of layout is not true. The cursor changes to the double arrow cursor but when I perform drag action, nothing happens. The area selected is not highlighted and not even zoomed in. But when I double click, the area get zoomed out.
My layout settings looks like:
const layout = {
title: this.state.chartTitle,
autosize: true,
dragmode: false,
// showlegend: true,
margin: {
r: 0,
t: 50,
b: 100,
pad: 0,
autoexpand: true
},
scrollZoom: true,
hoverlabel: {
bgcolor: 'rgba(0,0,0,1)',
bordercolor: 'rgba(200,200,200,1)'
},
width: this.state.layoutWidth,
height: '750',
yaxis: {
title: this.state.yaxisTitle,
type: 'linear',
showgrid: true
},
xaxis: {
title: this.props.intl.formatMessage(messages.xAxisTitle),
type: this.state.xaxisType,
autorange: false,
showgrid: false,
range: this.state.axisRange,
rangeslider: {
visible: true,
range: this.state.sliderRange
}
}
I even tried scrollZoom attribute but that doesn't work either. The version of plotly.js and react-plotly.js that I am using is :
"plotly.js": "^1.41.3",
"react-plotly.js": "^2.2.0",
"react-plotlyjs": "^0.4.4",
Am I suppose to also add some css settings to it ? Please help.
Instead of putting
scrollZoom: true to layout, please try to put it into the config tree, like:
const Plot = createPlotlyComponent(Plotly);
ReactDOM.render(
React.createElement(Plot, {
data: [...],
layout: {...},
config: {
scrollZoom: true,
}
}),
document.getElementById('root')
);