We Keep Coding

bxslider load jQuery on specific slide

I have BXSlider (https://bxslider.com/) installed. Now I want the following jQuery script to run on entering a "slide".
$(document).ready(function () {
$(".next-prev-nav").fadeTo( "slow", 1 );
$(".disable-slide-nav").hide();
});
(The script enables the navigation of the slider again.)
I tried to search the website of BXslider, but I couldn't find anything about it.
Hope someone can help me out.

You are looking for either onSlideBefore (executes immediately before each slide transition) or onSlideAfter (executes immediately after each slide transition - when transition completes) depending on your needs both can be found here - look at the section Callbacks.
Here is an example:
$(function(){
var slider = $('.bxslider').bxSlider({
mode: 'horizontal',
captions: true,
slideWidth: 600,
auto: true,
pause: 1000,
onSlideBefore: function () {
console.log('onSlideBefore');
// Your code either goes here or...
},
onSlideAfter: function () {
console.log('onSlideAfter');
// Goes here...
// For example lets turn the slider off after the second slide appears
slider.stopAuto();
}
});
});
#import url('https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.12/jquery.bxslider.min.css');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.12/jquery.bxslider.min.js"></script>
<div class="bxslider">
<div><img src="https://bxslider.com/assets/images/coffee1.jpg" title="Funky roots"></div>
<div><img src="https://bxslider.com/assets/images/coffee2.jpg" title="The long and winding road"></div>
<div><img src="https://bxslider.com/assets/images/coffee3.jpg" title="Happy trees"></div>
</div>

How to stop carousel onhover in SliderJS

I have no knowlege in JS so please help me with it. I have a slider (Slider JS) I need to make the slider to stop on hovering it and when the cursor is moved away it should resume again.
I refered this slidejs website which is here and i found this code which did not work form me
$(function(){
$("#slides").slides({
hoverPause: true
});
});
Here is my JS code
jQuery.noConflict();
jQuery(function() {
jQuery(".slider_container").jCarouselLite({
btnNext: ".arrow_right",
btnPrev: ".arrow_left",
visible: 4,
speed :1000,
auto : 500,
hoverPause: true,
});
});
Html
<div id="slide_image_contener" class="slider_container">
<ul id="slide">
<li><a class="vlightbox1" href="popup/vlb_images1/certification_1.jpg" title="certification_1"><img src="popup/vlb_thumbnails1/certification_1.jpg" class="vlightbox_1" alt="certification_1"/></a></li>
<li><a class="vlightbox1" href="popup/vlb_images1/certification_1.jpg" title="certification_1"><img src="popup/vlb_thumbnails1/certification_1.jpg" class="vlightbox_1" alt="certification_1"/></a></li>
<li><a class="vlightbox1" href="popup/vlb_images1/certification_1.jpg" title="certification_1"><img src="popup/vlb_thumbnails1/certification_1.jpg" class="vlightbox_1" alt="certification_1"/></a></li>
</ul>
</div>

You have error in code.
Your JS is referring to #slides:
$(function(){
$("#slides").slides({
hoverPause: true
});
});
But you are using ul id="slide"
Change this line: <ul id="slide"> to this: <ul id="slides">

The options which you are passing is wrong. You should pass pause instead of hoverPause Try the below code
jQuery(".slider_container").jCarouselLite({
btnNext: ".arrow_right",
btnPrev: ".arrow_left",
visible: 4,
speed :1000,
auto : 500,
pause: true
});

jquery cycle trigger event on slide change not before or after

I'm using the jquery cycle1 plugin for a slideshow with fade transitions between images, no previous or next controls. I need to layer text on top of this slider that changes color based on what slide is showing.
I'm not very fluent in jQuery so I'm having a hard time using the documentation to manipulate the available options. I've gotten this far thanks to this post and this one but the color changes slightly before or after depending on if I use before or after, obviously. How can I make the text color change at the same exact time the slide does?
Note: I have to use the cycle 1 plugin as my site uses jQuery 1.3.2 with no hope of upgrading.
here is a fiddle, and code below. Thanks in advance for any help!
here is my html:
<div id="text">this is some text over the slider</div>
<div id="switch-it">
<div id="slide1">
<a href="link1.html">
<img src="hp_hero_010114_01.jpg" height="500" width="980" border="0" />
</a>
</div>
<div id="slide2">
<a href="link2.html">
<img src="hp_hero_010114_02.jpg" height="500" width="980" border="0"/>
</a>
</div>
</div><!--//END switch-it-->
and here is the jQuery
$(document).ready(function(){
$('#switch-it').after('<div id="switch" class="switch">').cycle({
fx: 'fade',
speed: 800,
timeout: 500,
cleartypeNoBg: true,
height:'500px',
width:'980px',
pager:'#switch',
pause:1,
before: function (prev, current, opts) {
var current_id = $(current).attr('id');
if( current_id.match("slide1")){
$('#text').css('color','white');
}
else if( current_id.match("slide2")){
$('#text').css('color','red');
}
else if( current_id.match("slide3")){
$('#text').css('color','blue');
}
else if( current_id.match("slide4")){
$('#text').css('color','green');
}
},
pagerAnchorBuilder: function(index, el) {
return '•'; // whatever markup you want
}
});
});

It's not very elegant, but adding a timeout inside the before for half of your speed makes the change exactly in the middle of your transition.
setTimeout(function () { ...change text color }, 400);
JSFiddle
EDIT OR
Add a transition to your css for the #text for the same amount of time as your speed
#text {transition: color .8s linear}
JSFiddle

You might want to update to Cycle2 plugin it has what you are looking for
link
Down in "misc. bits" look for the state variable named 'busy';

visibility hidden flashes multiple times after fadeIn

I am trying to get some text to fade in after some images move once you reach a certain point on the page. It works fine if I am already down the page and I refresh, but when I scroll from the top to the area it does the correct animation but then the text starts to flash over and over again. Is there any way to stop this?
Here is the javascript
$(document).ready(function(){
$(window).scroll(function(){
if ($(this).scrollTop() > 1350) {
$('#managecontent1').animate({bottom: '0px'},900);
$('#managecontent2').animate({bottom: '0px'},900,function(){
$('#twocolumntextcontainer').css("visibility","visible").hide().fadeIn('slow');
});
}
});
});
and here is the HTML
<div id="twocolumntextcontainer">
<div id="twocolumntextleft">
<p>C.M.S. <span>Wordpress</span></p>
</div>
<div id="twocolumntextright">
<p>F.T.P. <span>FileZilla</span></p>
</div>
</div>
<div class="twocolumnlayout">
<div id="managecontent1">
<img src="img/wordpresslogo_203x203.png" />
</div>
<div id="managecontent2">
<img src="img/filezillaicon_210x208.png" />
</div>
</div>

You have set conditions that will cause this.
If you take a look, you are triggering the animation every time the window scrolls and the scrollTop value is greater than 1350px. If you continue to scroll at all beyond this point, the animation will continually trigger.
You will likely want to unbind the eventListener as soon as your condition is met (assuming you don't want the animation to happen again until the page is refreshed).
Add this within your if statement:
$(this).unbind('scroll');
That will unbind the scroll listener entirely from the window once your condition is met once.

Can you try following
$(document).ready(function () {
$(window).scroll(function () {
$('#twocolumntextcontainer').fadeOut("slow");
if ($(this).scrollTop() > 1350) {
$('#managecontent1').animate({ bottom: '0px' }, 900);
$('#managecontent2').animate({ bottom: '0px' }, 900, function () {
$('#twocolumntextcontainer').fadeIn('slow');
});
}
});
});

jQuery Cycle - #next #prev, goto nextGallery after final slide of currentGallery

I am using jQuery cycle in several galleries with #next #prev navigation and a image counter output.
Now I am trying to connect all these galleries together. If the user reaches the final slide of gallery A (galleryA.html), the #next anchor should point to gallery B (galleryB.html) / the #prev anchor should point to gallery C (galleryC.html).
How can I combine my 2 functions to do that?
// slideshow fx
$(function() {
$('#slideshow').cycle({
fx: 'fade',
speed: 350,
prev: '#prev',
next: '#next',
timeout: 0,
after: onAfter
});
});
//image counter output
function onAfter(curr,next,opts) {
var caption =
(opts.currSlide + 1) + opts.slideCount;
$('#counter').html(caption);
}
html:
<div id="slideshow-container">
<div class="slideshow-nav"><a id="prev" href=""></a></div>
<div class="slideshow-nav"><a id="next" href=""></a></div>
<div id="slideshow" class="pics">
<img src="galleryA/01.jpg" />
<img src="galleryA/02.jpg" />
<img src="galleryA/03.jpg" />
<img src="galleryA/04.jpg" />
<img src="galleryA/05.jpg" />
<img src="galleryA/06.jpg" />
</div>
</div>

Not too familiar with the cycle plugin, but you could put something like this in function onAfter:
if(opts.currSlide == opts.slideCount) {
$("#next").attr("href","galleryB.html");
}
or you could try
if(opts.currSlide == opts.slideCount) {
$("#next").click(function() { document.location = "galleryB.html"; });
}
Untested, something along those lines?
Basically it only attaches the redirect behaviour onto #next after the last slide has been shown.. There might be an onFinish option or something, have you checked the docs?

You can have a look here :
http://helpdesk.toitl.com/?p=cycle_plugin
It is not so easy to integrate 2 synchronized cycles in the same page ... In this sample there is no reload of the page with location=... but the 2 galleries are managed using the different commands of the cycle plugin.
Regards,
Dominique VINCENT