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);
Related
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,
},
});`
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
}
}
How to stop swiper slide autoplay on mouse enter and start autoplay on mouse leave? I have tried .stopAutoPlay() and .startAutoPlay() function but not worked for me.
thank you here is code.
var swiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',
paginationClickable: true,
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
spaceBetween: 0,
loop: true,
effect: 'slide',
longSwipes: true,
autoplay:2000,
autoplayDisableOnInteraction:true,
});
$(".swiper-container").mouseenter(function(){
swiper.stopAutoPlay();
});
$(".swiper-container").mouseleave(function(){
swiper.startAutoPlay();
});
Check swiper API docs, u should use mySwiper.startAutoplay(), letter "p" is lowercase
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
I made a video gallery with magnific popup.
But unlike the imagegallery, the videogallery doesn't show a counter e.g. 1/3 at the bottom right of the video. Why not? In the imagegallery it works well.
Code of the Videogallery:
$('.gallery_video').each(function() { // the containers for all your galleries
$(this).magnificPopup({
delegate: 'a', // the selector for gallery item
disableOn: 700,
type: 'iframe',
mainClass: 'mfp-fade',
removalDelay: 160,
preloader: true,
fixedContentPos: false,
gallery: {
enabled:true
},
callbacks: {
lazyLoad: function(item) {
console.log(item); // Magnific Popup data object that should be loaded
}
}
});
});
Code of imagegallery:
$('.image-popup-no-margins').magnificPopup({
type: 'image',
closeOnContentClick: true,
closeBtnInside: true,
fixedContentPos: true,
mainClass: 'mfp-no-margins mfp-with-zoom', // class to remove default margin from left and right side
image: {
verticalFit: true
},
zoom: {
enabled: true,
duration: 300 // don't foget to change the duration also in CSS
},
callbacks: {
lazyLoad: function(item) {
console.log(item); // Magnific Popup data object that should be loaded
}
}
});
Both scripts don't specify a counter so why isn't it showing up on both?
thank you
It has been a time ago when this was asked but a full anwser:
You have to add or specify the iframe markup.
You also want to add some small css updates for positioning the counter.
var $attachmentContainers = $('.js-attachments-in-gallery');
$attachmentContainers.magnificPopup({
delegate: 'a',
type: 'image',
gallery:{
enabled:true,
},
iframe: {
markup:
'<div class="mfp-iframe-scaler">'+
'<div class="mfp-close"></div>'+
'<iframe class="mfp-iframe" frameborder="0" allowfullscreen></iframe>'+
'<div class="mfp-bottom-bar">'+
'<div class="mfp-counter"></div>'+
'</div>'+
'</div>'
}
});
.mfp-iframe-scaler .mfp-bottom-bar {
margin-top: 4px; }
Figured it out - for the iframe type you have to specify that you want a counter:
$(this).magnificPopup({
.....
iframe: {
markup: '<button title="Close (Esc)" type="button" class="mfp-close">×</button>'+
'<div class="mfp-counter"></div>'
}