How to make appearance of jssor slide a triggerable event? - javascript

Using a basic JSSOR Slideshow, with n div image placeholders, where the divs are read in descending or top-down order, just like any other normal HTML page, I can add javascript into a div, or add javascript somewhere else on the page to make something happen within a slide div (animation, fade, etc.).
The problem is it will trigger once, as when the document is loaded. How do I make a javascript function "re-triggerable", so that it is called when that one slide (let's say slide #2) appears in the display loop?
Feel free to ask more questions if this is not clear enough.
Here's an example: Slide Show On the first slide appearance, a gold medal scrolls to the middle of the slide, using jQuery animate(). It will only do this once, not each time the slide appears. The reason is that the gold medal animate script only loads once, when the html page is loaded. I want that gold medal animate script to reload again and again, each time slide #1 makes its appearance.

Please do this job when slideshow plays over at slide 0.
var jssor_slider1 = new $JssorSlider$(...;
function SlideshowEndEventHandler(slideIndex, progressBegin, slideshowBegin, slideshowEnd, progressEnd) {
if (slideIndex == 0) {
//runs the animation when slideshow plays over at slide 0
$("#goldmedal").animate({
opacity: 0.99,
left: "+=490",
height: "toggle"
}, 2500, function () {
// Animation complete.
$("#goldmedal").animate({ opacity: 0.0 }, 4000, function () {
$("#goldmedal").css("left", "0px");
});
});
}
}
jssor_slider1.$On($JssorSlider$.$EVT_SLIDESHOW_END, SlideshowEndEventHandler);
//As it would not play slideshow at the beginning for slide 0, make a manual trigger at the beginning then.
SlideshowEndEventHandler(0);

Related

How to set the Swiper.js speed (transition duration) to zero on mouse Enter?

I made a slider with Swiper.js which automatically scrolls in a loop.
My code: https://codepen.io/BehnamAzg/pen/NWzmBKo
I wanted it to stop scrolling when it's being hovered, so I add this code:
autoplay: {
disableOnInteraction: false,
pauseOnMouseEnter: true
}
This is working fine, but the speed of scrolling is too high
so to adjust that I have to add a speed (transition duration) to it. but by adding this it makes the mouseEnter a delay to make an effect.
For example:
If I set the "speed" to 5000ms, it would take 5 seconds till the slider stops scrolling when it's hovered.
I don't want this "speed attribute" effects my hovering, I want it to immediately stop the scrolling.
For solving this, I tried to add a delay instead of speed but it will remove the smoothness of scrolling.
I tried to set the transition duration to zero while being hovered with CSS, but that also didn't work:
.swiper:hover > .swiper-wrapper {
transition-duration: 0 !important;
}
I also tried to add a swiper.setProgress(progress, speed) to it and set the speed to zero, it did work but it will mess up the progress of the slider:
$(".swiper").each(function(elem, target){
var test = target.swiper;
$(this).hover(function() {
test.setProgress(0, 0);
}, function() {
test.setProgress(0, 5000);
});
});
I don't know what to do anymore, any suggestions?!

How to make a transform animation

I have a script for my HTML page. I want to make the following in that script:
Show a preloading #id for some seconds and then fade out;
While the div is loading the main page under that div which is shown cause my opacity is to 0.7 I want to tranform the nav-bar up to browser windows so bassically hide it and in that position to tranform a new nav-bar.
I want that to take place while the preloading page is working not after!
And I want to show more contects in parraler with the nav-bar animation.
I created the script but I get lost in how to position my actions and I don't know if I made anything corrdctly. I make the fade out preloader.
$(window).load(function(){
$("#fade").css({opacity: 0.7})
$("#fade").delay(4000).fadeOut(1000, function() {
$('#nav-before').transition({ y: '40px' }); //now I want to hide the nav
//and show the new with id="nav-after"
//and in parraller with the above to be able to load more contects
$("#fade").remove(); //when evrything finished kill the div
});
});
$( "#fade" ).animate({
opacity: 0.0
}, 5000, function() {
// Animation complete.
});
You can play with animate. Here is the reference: jquery.com/animate/

Swiper slider. Prepeding one slide and simulating transition to it

I want to achieve a specific behaviour with this awesome JS slider (Swiper) using its complete API, but I am out of luck until the moment... Need some help with this:
Current situation:
Only one slide at the beginning.
What I want each time I click a button is:
The dynamic creation of a new slide BEFORE the first one in each case --> Easy thing, with the prepend() method of Swiper API :)
But (and here is the problem) I want the final users to have the sensation of being just loading the preceding slide, i.e., clicking the button and seeing the swipe transition towards left...
I want this "rare" behaviour because my slider has to show several hundreds of slides, and loading all of them at a time from the beginning results in an extremely slow page load since it has to download hundreds of images...
Thanks in advance.
I finally got it working, like this:
Once the button (with class="prev") is clicked:
$(document).on('click', '.prev', function() {
// If it is the first slide...
if (mySwiper.activeIndex == 0) {
// Slide content
var slide = '<p>New slide</p>';
// Creation of the slide (it instantly moves to index 0 --> the new slide)
mySwiper.prependSlide(slide);
// And then instant (speed = 0) swipe to slide with index 1
// (the one we were watching before creating the new...)
mySwiper.swipeTo(1, 0, false);
// Finally, we implement the visual transition to new slide (index 0)
mySwiper.swipePrev();
}
});
I hope it helps somebody.
Thanks.

How to make carousel smooth scroll to top when next slide and use 'hand carousel'

I use carousel bootstrap 3 to use slide text. When the row#1 text is long to bottom (ex: height 300px) and the row#2 text is too short (ex:just 10px), The problem is we always must scroll to top as manually when we click next to row#2 from row#1. How to make when next slide, the system will 'smooth scrolling' to top as automatically???
In other hand, How to user can use 'hand carousel' ??? (I don't know the technology name but user just tap to right on mobile when want to next slide) when use mobile so its easy next slide without go to bottom again (find the carousel again) (this issue important when mobile ).
This is simple code
$(document).ready(function() {
$('#carousel-example-generic').carousel({
interval: false
})
});
But full code in fiddle: http://jsfiddle.net/luisan/B9FeP/1/
Thanks
You could tap into the carousels slide event and then add the jquery scroll top function
$('#carousel-example-generic').bind('slid', function () {
console.log('slid event');
$('.carousel-inner').scrollTop(0);
});
Maybe using body would be better
$('body').scrollTop(0);
You can also add in an animation that would look nicer
$('body').animate({ scrollTop: 0 }, 600);

how to slow down Flowslider slider?

I have a flowslider slider, here the page of the project http://www.flowslider.com/
It's a very easy to use slider however I don't know how to reduce the sliding speed, there's no working example in the site
that's my slider initialization code:
<script>
jQuery(document).ready(function($) {
// Select your slider element and call Flow Slider plugin.
var $slider = $("#slider");
$slider.FlowSlider({
controllerOptions: [{
mouseStart:100,
mouseEnd:100,
}],
marginStart:20,
marginEnd:20,
mode:"horizontal"
});
});
</script>
the actual slider is just a
<div id="slider">
a bunch of PHP generated divs here, each one is a slider element
</div>
I tried setting speed and coefficient but without any results
You can't change the sliding speed, it's because the sliding speed depends on user mouse action ( user mouse movement) and the width of content div and the count of images in it. It means when you move your mouse slowly cross the slides the sliding happens slow and when you do it fast slides goe fast. This slide is not that kind of slides that repeats sliding in a period of time.
As written in the documentation of HoverCenter you can use the coefficient or write your own moveFunction. It seems that a list for controllerOptions is missing in the documentation.
To get coefficient to work, use something like:
$('#flowslider').FlowSlider({
mode: 'horizontal',
marginStart: 0,
marginEnd: 0,
controllers: ['HoverCenter'],
controllerOptions: [{
coefficient: 0.1
}]
});

Categories

Resources