I am using some javascript to randomly swap out the background image of a slideshow on page load. It works except that i want to use crossfading along with fade.
//slideshow script
<script>
$(document).ready(function(){
$('#slides').slides({
preload: true,
preloadImage: '/img/loading.gif',
play: 8000,
pause: 2500,
hoverPause: true,
crossfade:true,
effect:'fade',
});
});
When I set crossfade to "true", the transparent .pngs in the slide div stop fading nicely; the next one in line fades in ok, but the previous one persists and then disappears (doesn't fade out). If I delete crossfade, it works ok but the client wants then to fade in and out of each other.
Here's my jsfiddle
And here the location of my site home page where you can see the slider; (you need a user and password to see it, both are mig)
Related
slick.js carousel won't initialize in second tab. When I open the second tab the main video does not show until I click the dots.
I tried using $(videoSlider).slick('setPosition'); and also added .each function which does work but not if sliders are in the tabs. If I have numerous carousels on a page they function prooperly. It is only when put in tabs it does not work.
// initialize slick sliders
$(videoSlider).each(function() {
$(this).slick({
arrows: false,
dots: true,
infinite: true,
speed: 500, slidesToShow: 1,
slidesToScroll: 1
});
});
Carousel will work in tabs as it does when out of tabs
An issue that stands out is in your selector for videoSlider. This needs to be a string value and should most likely be '.videoSlider' to match a class used in your markup.
You may also run into an issue if you initialize a slideshow while it's hidden in a tab. In this case, Slick has trouble determining the slide width and assigns a width of '0px' to each slide. You can overcome this issue by refreshing your slideshow when you reveal your tab's contents. For instance, if your slideshow has id="slideshow1":
$("#slideshow1").slick("refresh");
More information about the hidden slideshow issue: https://github.com/kenwheeler/slick/issues/235
I have two scripts that work great independently, and now I want to combine them.
The first one is a slider that can load any content.
<script>
$(function(){
$('#slides').slides({
preload: true,
preloadImage: 'img/loading.gif',
play: 10000,
pause: 100000,
hoverPause: true,
effect: 'fade',
slidesLoaded: function() {
$('.caption').animate({
bottom:0
},200);
}
});
});
</script>
The second one is a script that can display a couple of div's with a smooth timed fade in.
<script type='text/javascript'>
$(window).load(function(){
$('.square').fadeTo(0,0).each(function(index) {
var dif = index % 5;
var lambda = parseInt(index / 8);
$(this).delay(250 * (dif + lambda)).css('visibility','visible').fadeTo(500,1)
});
});
</script>
When the page loads, different images in div's are fading in one by one. (second script). All this is in a slider div that is activated by the first script. When the slider goes to the next slide, the second script is already activated because the document was ready. I would like it to be "reset" when the second slide is activated. Then the second slide will show the second batch of images smoothly fading in, one-by-one.
I'm using flex slider in my html .
I have followed given steps to add slider in my html page.
Slider works well When animation = "slide" But
Not working properly when animation = "fade" ;
Fade effect does not show proper slides .
here is my script:
<script type="text/javascript">
$(window).load(function(){
$('.flexslider').flexslider({
animation: "fade",
animationSpeed: 1000,
direction: "horizontal",
slideshowSpeed: 2000,
pauseOnHover: true,
slideshow: true,
start: function(slider){
$('body').removeClass('loading');
}
});
});
</script>
Help me out.
thank's
Sounds like something with the CSS. I would create a fiddle so people can see your code and also explain exactly what you mean by "Fade effect does not show proper slides". What happens? Anything?
If you do that then I'm sure you'll get it figured out on here...
I had the same problem. Animation: "slide" worked fine but when I tried to use "fade" I wasn't able to click the thumbnails to change the slides. There is nothing wrong with the flex slider or the javascript. It works great in the flex slider demo, so...
Try fiddling with the positioning/layering of the <ol>. The thumbnails are probably layered beneath the main slide image, making it impossible to actually click them.
This worked for me:
ol.flex-control-thumbs {clear: both;}
But you can also try playing with positioning and z-index if clearing doesn't work. It's going to depend heavily on how your HTML and CSS is structured. If that <ol> thumbnail list can wiggle it's way underneath the slider, it will. And nobody likes not being able to click stuff!
In my case, solution was simple.
Thumbnails work well, but its "under" the slides. Just set .flex-control-nav with high z-index.
.flex-control-nav{
z-index:500;
}
Should work.
I'm using the Orbit slider, and after each slide animation, you can run a function.
I have four classes that contain content, and want to hide all of them bit the first div, and then fade in/out to show the second one after the first animation, so on and so forth until the end of the slides, where it loops back to the beginning, so the content stays in sync with the slider.
The HTML markup:
<div class="contentSlider">Content for slider 1</div>
<div class="contentSlider">Content for slider 2</div>
<div class="contentSlider">Content for slider 3</div>
<div class="contentSlider">Content for slider 4</div>
The Orbit plugin script is:
<script type="text/javascript">
$(window).load(function() {
$('#featured').orbit({
animation: 'horizontal-push', // fade, horizontal-slide, vertical-slide, horizontal-push
animationSpeed: 800, // how fast animtions are
timer: true, // true or false to have the timer
advanceSpeed: 10000, // if timer is enabled, time between transitions
pauseOnHover: false, // if you hover pauses the slider
directionalNav: true, // manual advancing directional navs
captions: false, // do you want captions?
captionAnimation: 'fade', // fade, slideOpen, none
captionAnimationSpeed: 800, // if so how quickly should they animate in
bullets: true, // true or false to activate the bullet navigation
bulletThumbLocation: '', // location from this file where thumbs will be
afterSlideChange: function(){
// function to keep the content below the slider in sync with the slider.
}
});
});
</script>
//set to correct bullet
setActiveBullet();
Before this line in jquery.orbit.js in shift function(line 332 in jquery-orbit-1.2.3.js)
alert(activeSlide);
it gives the current slide value;
based on the current slide value you can hide or show the
eq(activeSlide)
of the caption class and play with it.(fadeIn or fadeOut)
Why can't you enable the in built captions:true ,and put your caption html content in it
I'm having a problem fading in and out text with jQuery in IE8.
I'm using FlexSlider (WooThemes).
Plus... I also would like to stop the fade on the background image (after slide 1) if possible.
Here's my test site.
jQuery Code
jQuery(window).load(function(){
jQuery('.flexslider').flexslider({
animation: "fade",
animationLoop: false,
touch: true,
slideshowSpeed: 10000,
startAt: 0,
pauseOnAction: true, //Boolean: Pause the slideshow when interacting with control elements, highly recommended.
pauseOnHover: true, //Boolean: Pause the slideshow when hovering over slider, then resume when no longer hovering
start: function(slider){
jQuery('body').removeClass('loading');
},
after: function(slider) {
jQuery('#backgman').stop("fade");
},
end: function(slider){
// $('#result').load('form.html');
// window.location = "template-form.html"
//alert('Ready was performed.');
}
});
jQuery('#slide-text').css({zIndex:7}).fadeOut(0);
jQuery('#slide-text').css({zIndex:6}).fadeOut(0);
});
I have an IE8 css file and have used opacity:inherit; filter:inherit;
I think I'm really close to getting it... any ideas/suggestions?
Let me know if you need any additional information.
You must to remove div which you have used in "UL" tag and set float:left in your li style.
It should be like this,
<ul>
<li style="float:left;">...</li>
<li style="float:left;">...</li>
</ul>
For, example, take a look at this link where it was working fine.
Hope, this one will help you!.