We Keep Coding

jQuery bxslider dynamic update not working

I am having issues with dynamically updating content with bxslider. I am able to successfully load the content by entering the li items in HTML. When I attempt to append or replace the ul html with new li content from my database, it fails to reload the slider. Here is the important markups from my script. Is there any reason why I get no errors in the console.log and no images or slides?
var url = 'image/picture.jpg';
updateSlider('<li><img src=\''+url+'\'></li>');
var slider, sliderConfig = {
pager: true,
pagerType: 'short',
auto: true,
slideWidth: screen.width,
onSliderLoad: function(){
$('.bx-viewport').css({'height':'100% !important'});}}
$(function(){
slider = $('.bxslider').bxSlider(sliderConfig);
});
function updateSlider(data){
$('.bxslider').html(data);
slider.reloadSlider(sliderConfig);
}

I found the answer, thank you for your suggestions.
The issue lies with the CSS. Once i reloaded the slider, the CSS was setting to 0 on the .bx-wrapper, .bx-viewport, .bxslider and .bxslider li elements. Once i reset them to the necessary heights it resolved my issue.
$(".bx-wrapper,.bx-viewport,.bxslider,.bxslider li").css("height",newHeight);

Try like this, means call the updateSlider('<li><img src=\''+url+'\'></li>'); only after you are having data using any delayed function like as ajax. I have put on document ready but you need to run after successful ajax request:
var url = 'image/picture.jpg';
var slider, sliderConfig = {
pager: true,
pagerType: 'short',
auto: true,
slideWidth: screen.width,
onSliderLoad: function () {
$('.bx-viewport').css({'height': '100% !important'});
}
}
function updateSlider(data) {
$('.bxslider').html(data);
}
$(function () {
slider = $('.bxslider').bxSlider(sliderConfig);
//update slider on load or after any ajax call success
updateSlider('<li><img src=\'' + url + '\'></li>');
});
$('document').on('click', 'a', function () {
slider.reloadSlider(sliderConfig);
});

How to use "stopAuto" function in bxslider?

I have a bx slider which has 6 images. I want to go through each of them once then stop for a second and then begin again, then stop for one second again etc. It's mentioned here (http://bxslider.com/options) but with no full example.
This is the code I have now. It doesn't stop navigation images.
<script>
$('.bxslider').bxSlider({
auto: true,
autoControls: true,
speed: 1,
pause:200
});
</script>
Sorry for the lame question. I am a still a newbie to jQuery.

Set autoDelay option and onSlideAfter function
Demo: http://jsfiddle.net/3h0ewwz4/
var slider = $('.bxslider').bxSlider({
auto: true,
autoDelay:2000,
onSlideAfter: function (slide, oldIndex, newIndex) { // add this function to solve issue
if (newIndex === 5) { // remember, it's zero based indices with bxslider...5 is index of last image
slider.stopAuto();
setTimeout(function () {
slider.goToSlide(0);
slider.startAuto();
}, 2000);
}
},
autoControls: true,
speed: 1,
pause:200
});

Carousel jumps using mySwipe

I have 4 bullets points, and I noticed the function callback and transitionEnd fire twice. So the carousel jumps some slide...I don't understand why. window.mySwipe is initialized once.
<script src="js/swipe-slider.js"></script>
<script>
window.mySwipe = new Swipe(document.getElementById('slider'), {
startSlide: 0,
speed: 400,
auto: 2000,
continuous: true,
disableScroll: false,
stopPropagation: true,
callback: function(index, elem) {
console.log("callback: " + index);
},
transitionEnd: function(index, elem) {
console.log("-");
}
});
</script>
OUTPUT CONSOLE :

Finally, I removed auto: 2000 and I used a recursive function by calling window.mySwipe.next();. Now, no jumps anymore.

fire event after element cycled with cycle.js

im using cycle.js for some basic transitions between some pictures:
$(document).ready(function() {
var first;
var $slider = $(".trauringe");
$slider.cycle({
timeout: 8000,
next: '#next',
prev: '#prev' });
});
what i would like to do is, to fire an event when the element "cycled" to the next one. Means when the next picture is faded in.
Any help much appreciated!
greets

$('#s5').cycle({
fx: 'scrollLeft',
timeout: 5000,
before: onBefore,
after: onAfter
});
function onBefore() {
$('#output').html("Scrolling image:<br>" + this.src);
}
function onAfter() {
$('#output').html("Scroll complete for:<br>" + this.src)
.append('<h3>' + this.alt + '</h3>');
}
Here is a working example from FIDDLE
Happy Coding :)

You can use before / after.
For example,
$('#slide_cont').cycle({
fx: 'scrollLeft',
before: onBefore,
after: onAfter
});
function onBefore() {
$('#output').html("Scrolling image:<br>" + this.src);
}
function onAfter() {
$('#output').html("Scroll complete for:<br>" + this.src).append(this.alt);
}

Loading jQuery plugin RhinoSlider content via AJAX

I'm using the jQuery plugin RhinoSlider and have it working ok, however I want to load the content via AJAX to speed up the page load times. According to their site you need to change the call a little as per: http://rhinoslider.com/tricks/get-the-content-of-the-slider-via-ajax/
The default call is:
$(document).ready(function(){
// store the jquery object
var $slider = $('#slider');
$.get('content-of-slider.php', function(data){
$slider.append(data).rhinoslider();
});
});
That works fine, however I still need to include my options, I tried the below but it didn't work..
$(document).ready(function(){
// store the jquery object
var $slider = $('#slider');
$.get('content-of-slider.php', function(data){
$slider.append(data).rhinoslider(
showTime: 6000,
effectTime: 2500,
autoPlay: true,
showBullets: 'always',
showControls: 'never',
slidePrevDirection: 'toRight',
slideNextDirection: 'toLeft'
);
});
});

Seems I was missing the curly braces after the rhinoslider( portion; I added them as below and it now works.
$(document).ready(function() {
// store the jquery object
var $slider = $('#slider');
$.get('content-of-slider.php', function(data){
$slider.append(data).rhinoslider({
showTime: 6000,
effectTime: 2500,
autoPlay: false,
showBullets: 'always',
showControls: 'never',
slidePrevDirection: 'toRight',
slideNextDirection: 'toLeft'
});
});
});