Im trying to do swiper marquee.
But I only found a solution with .swiper-wrapper { transition-timing-function: linear; } which doesn't work well with loop and safari IOS.
It is logical to assume that autoplay with delay:0 and freemode should create something similar to marquee, but alas, this does not work.
Are there any other ways to make a marquee swiper?
I tried this code and expecting marquee:
` const sliderInstance = new Swiper(root, {
...defaultOptions,
modules: [FreeMode, Autoplay],
init: false,
slidesPerView: 2.2,
loop: true,
freeMode: true,
spaceBetween: 8,
autoplay: {
delay: 1000,
disableOnInteraction: false,
},
});`
Related
Auto Play Slider is Not Working
I tried all solutions from the given stack overflow nothing works for me I am using ionic4 slide
I am trying this from last 6 days not getting the solution please let me know proper solution so that I can fix this issue
#ViewChild('sliderRef', { static:false }) slides: IonSlides;
option = {
slidesPerView: 1,
spaceBetween: 10,
centeredSlides: true,
speed:1000,
loop:true,
autoplay:{disableOnInteraction:false}
}
ionViewWillEnter(){
this.sliderThree =
{
slidesItems: [
{
id: "../../assets/images/market.jpg",
name:"Sumo"
},
{
id: "../../assets/images/mobile.jpg",
name:"Shelcal 500"
},
{
id: "../../assets/images/test.jpg",
name:"Orofer Xt"
},
]
};
this.slide.update();
}
async slideChange() {
console.log("method called");
this.slides.update();
}
<ion-slides [options]="option" #sliderRef (ionSlideDidChange)="slideChange()">
<ion-slide *ngFor="let item of sliderThree.slidesItems" style="width:90%;height:20vh;" (click)="labTest()">
<ion-card style="width:90%;height:20vh;
display:-webkit-box;
overflow:hidden;border:1px solid grey;" >
<img [src]="item.id" style="width:100%;height:20vh;
display:-webkit-box;" alt="">
</ion-card>
</ion-slide>
</ion-slides>
Had an similar issue try manually starting on ionViewDidEnter and stoping it on ionViewDidEnter.
But first remove your loop, and autoplay properties from the options like so:
option = {
slidesPerView: 1,
spaceBetween: 10,
centeredSlides: true,
speed:1000
}
Then handle start and stop like this:
ionViewDidEnter(){
this.slide.startAutoplay();
}
ionViewDidLeave(){
this.slide.stopAutoplay();
}
EDIT:
If you want to make it work between tabs, then use the autoplay option like so:
option = {
slidesPerView: 1,
spaceBetween: 10,
centeredSlides: true,
speed:1000,
autoplay: {
delay: 1000,
disableOnInteraction: false
}
}
Has anyone had luck creating a vue application that utilizes Electron webviews? I have the following setup, but when I run the window is blank.
function createWindow() {
// Create the browser window.
win = new BrowserWindow({
webviewTag: true,
width: 1276,
height: 800,
frame: false,
titleBarStyle: 'hiddenInset',
center: true,
movable: true,
webPreferences: {
nodeIntegration: true
}
})
}
Then in my component.
<webview id="foo" src="https://www.youtube.com/" style="display:inline-flex; width:640px; height:480px"></webview>
Move webviewTag: true, to webPreferences
I'm trying to make a carousel with http://unslider.com like this:
$('.carousel').unslider({
autoplay: true,
speed: 750,
delay: 3000,
nav: false,
infinite: true,
arrows: {
prev: '<div class="prev-btn"></div>',
next: '<div class="next-btn"></div>'
}
})
All slides became invisible when i added the option animation: 'fade'. I cannot figure out why.
http://codepen.io/tjeu-kayim/pen/EgYYXN
I found the answer myself:
Add the css .unslider-fade {height: 100%} and the slides wil show up.
Sadly, the answer to this problem as to this date is to set a height to the unslider container. The GitHub repo of the unslider project has many questions regarding this issue, but all the answers are "add a widht and height to the container".
I guess the best css selector to use would be .unslider-fade, and I suggest you add your own class to the slider too, so it would end up looking something like .unslider-fade.your-class{height:###px;}; that way you will only affect the slider with fade in your website, in case you have any other slider working with the horizontal or vertical animation (or images with some other height).
Change your javascript a little bit:
$('.carousel').unslider({
autoplay: true,
speed: 0, //change this line(previously 750)
delay: 3000,
nav: false,
infinite: true,
arrows: {
prev: '<div class="prev-btn"></div>',
next: '<div class="next-btn"></div>'
}
})
And add this to css:
.carousel ul li {
opacity: 0;
-webkit-transition: opacity .75s; // if you want 750ms
transition: opacity .75s; // if you want 750ms
}
.carousel ul li.unslider-active {
opacity: 1;
}
And that's it, now you have "fade" effect. Enjoy!
In Safari 5 the Viewport-Height is wrong on first load: http://www.filmreich.com/
When the slider starts to go to next slide, the viewport-height is correct. This is the code I use:
slider.reloadSlider({
mode: 'horizontal',
speed: 800,
pause: 7000,
infiniteLoop: false,
adaptiveHeight: true,
preloadImages: 'visible',
nextText: '<i class="fa fa-angle-right"></i>',
prevText: '<i class="fa fa-angle-left"></i>',
pager: false,
controls: false,
auto: true,
onSliderLoad: function(){
jQuery('.article-controls a').on('click', function(e){
e.preventDefault();
var goTo = jQuery(this).attr('data-slide-index');
slider.goToSlide(goTo);
});
}
});
I use jQuery(window).load(), to be sure the slider is fully loaded.
I find a solution - not the best way - but that worked for me. I added the following Code to the onSlideLoad-function:
setTimeout(function(){
var sliderHeight = jQuery('.bxslider li:first-child').height() + 'px';
jQuery('.bx-viewport').css('height', sliderHeight);
}, 300);
I am using a flexslider slideshow on my website and it is too fast. I would like it to pause between each slide. There are 3 slides. It is not easy read all the text on one of the slides before another slide shows up.
The below code is from the Functions.js file. How can I slow down the slide and let it pause between each slide.
$(window).load(function() {
$('.flexslider').flexslider({
animation: "slide",
controlsContainer: ".slider-holder",
slideshowSpeed: 7000,
directionNav: false,
controlNav: true,
animationDuration: 5000,
before:function( slider ){
$('.img-holder').animate({'bottom' : '-30px'},300)
},
after:function( slider ){
$('.img-holder').animate({'bottom' : '0px'},300)
}
});
});
$(window).load(function() {
$('.flexslider').flexslider({
animation: "slide",
controlsContainer: ".slider-holder",
slideshowSpeed: 7000,
directionNav: false,
controlNav: true,
animationSpeed: 6000,
before:function( slider ){
$('.img-holder').animate({'bottom' : '-30px'},300)
},
after:function( slider ){
$('.img-holder').animate({'bottom' : '0px'},300)
}
});
});
use animationSpeed: 6000 option control the speed,value is in millseconds 6000=6 seconds,also remove animationDuration ,there is no such option