Am using slick slider with slidesToShow: 4 and fade: True its working fine. But if more then 5 slides its not scrolling because of fade: True, is it possible more then 5 slides we need auto-play with scroll.
Related
I want to take down the page with the swipe button using native-stack-navigator and transparentModal. (the button in the first picture). But gesture event does not work on transparentModal.
Using the presentation modal doesn't work for me. I need to use Fullscreen. When I use presentation card, the problem in the second picture occurs. (left top and right top white)
options: {
headerMode: 'none',
presentation: 'transparentModal',
animation: 'slide_from_bottom',
gestureDirection: 'vertical',
obscureBackground: true,
gestureEnabled: true,
fullScreenGestureEnabled: true,
}
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'm use carouFredSel plugin for responsive carousel.
When scroll bottom (on mobile), browser address bar pannel will hide, slider update height and jump to top. And when scroll to top, browser address bar pannel will show and slider update sizes and jump to top too. How fix it?
I call callback 'updateSizes' some times and carousel calculate mobile browser url bar height) only when scroll top, and only when scroll bottom after this bar hide
$('.container').carouFredSel({
auto: false,
circular: false,
infinite: false,
responsive: true,
width: '100%',
height: 'variable',
items: {
visible: 1,
start: 1,
height: 'variable',
},
});
Here is a solution:
$(window).scroll(function () {
$("body").attr("height",$(document).scrollTop());
});
$(window).on("resize", function(e){
e.preventDefault();
$(document).scrollTop($("body").attr("height"))
});
I have a website http://www.raggeddaisy.com where I have implemented the Flexslider utility. On my Default page, The Slider images are scrolling correctly, however, the Carousel images underneath aren't scrolling in combination with the Slider image. As the Slider image scrolls correctly, the carousel seems to jump four images at a time even though it doesn't highlight one of the images in the carousel that is visable.
This same piece of code (minus the actual images) is duplicated on my http://www.raggeddaisy.com/MagneticBoards.csthml page and the slider images work perfectly.
Can anyone help me figure out why this is behaving differently on the two pages?
<script type="text/javascript">
$(function(){
SyntaxHighlighter.all();
});
$(window).load(function(){
$('#carousel').flexslider({
animation: "slide",
controlNav: false,
animationLoop: true,
slideshow: true,
itemWidth: 100,
itemMargin: 0,
asNavFor: '#slider'
});
$('#slider').flexslider({
animation: "slide",
controlNav: false,
animationLoop: true,
slideshow: true,
sync: "#carousel",
start: function(slider){
$('body').removeClass('loading');
}
});
});
Thanks in advance.
Try to add the move attribute (number of slides that the slider should move) to the carousel, like this.
$('#carousel').flexslider({
animation: "slide",
controlNav: false,
animationLoop: true,
slideshow: true,
itemWidth: 100,
itemMargin: 0,
asNavFor: '#slider',
move: 1 // ADDED
});
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