Develop Reference

slider changes on mouse scroll

I am using bootstrap carousel slider on my website. I want slides to change on mouseScroll.how can I do this.this code works fine but I want to change slides on mouseScroll
this is my code
<script>
$(document).ready(function() {
$("#product_slider").owlCarousel({
rtl:true,
loop:true,
margin:4,
autoplay:false,
autoplayTimeout:10000,
autoplayHoverPause:true,
lazyLoad : true,
pagination:false,
nav:true,
dots: false,
navText:false ,
responsive:{
0:{
items:1
},
500:{
items:1
},
768:{
items:4
},
1200:{
items:5
}
}
});
});
</script>

This will make the carousel change when you scroll the mouse wheel over it. I think it would be wise to prevent the whole page from scrolling while your mouse is over the carousel, but I haven't taken the time to do that here.
Fiddle https://jsfiddle.net/mikeferrari/z34m1wbo/
// select the carousel container
var myelement = document.getElementById("myCarousel");
// this function is called every time the mouse wheel is scrolled
function makeItSo() {
// this is where you tell it to go to the next slide
$('.carousel').carousel('next')
}
myelement.addEventListener('wheel', function(e) {
makeItSo();
});
// start your carousel on page load
$('.carousel').carousel({
interval: 2000
})

BxSlider—Click Slide for Next

Instead of using prev/next controls, I'd like to turn the slide itself into a next button. Pretty straightforward functionality, but I can't seem to figure it out.
This is what I have:
$(document).ready(function() {
$('.bxslider').bxSlider({
adaptiveHeight: true,
easing: 'cubic-bezier(0.600, 0.060, 0.500, 1)'
});
$('.bxslider').click(function() {
slider.goToNextSlide();
return false;
});
});

Firstly, create an instance of the slider like this
var slider = $('.bxslider').... and then attach the onClick to the same input.
Something like this should work.
var slider = $('.bxslider').bxSlider({
adaptiveHeight: true,
easing: 'cubic-bezier(0.600, 0.060, 0.500, 1)'
}).on('click', function(){
slider.goToNextSlide();
});

Cycle once and stop on the first slide

I am trying to make the bxslider cycle through three slides and then return to the first slide and stop the slideshow in that position. I've tried different bits of code but I can't find anything that specifically addresses this kind of action. Any help is appreciated.
$(document).ready(function(){
$('.bxslider').bxSlider({
auto: true,
autoControls: true,
pause: 5000,
slideMargin: 0
});
});

The simplest way I can think of would be to insert a second copy of the first slide at the end so you have three slides and then another copy of the first and you tell it not to auto-repeat.
$(document).ready(function() {
$('.bxslider').bxSlider({
auto: true,
autoControls: true,
pause: 5000,
infiniteLoop: false, // don't auto-repeat
slideMargin: 0
});
});
Beyond that, you could specify a callback and after the third slide finishes displaying, you could stop the auto-advance and then tell it to goto the first slide.
$(document).ready(function() {
var slider = $('.bxslider').bxSlider({
auto: true,
autoControls: true,
pause: 5000,
infiniteLoop: false,
slideMargin: 0,
onSlideNext: function($slideElement, oldIndex, newIndex) {
if (newIndex >= 3) {
slider.stopAuto();
slider.goToSlide(0);
}
}
});
});
If you only have three slides (a fact you haven't included that would have helped us), then perhaps you won't get an onSlideNext event when infiniteLoop is off. In that case, you could use the onSlideAfter method and trigger after showing the third slide.
$(document).ready(function() {
var slider = $('.bxslider').bxSlider({
auto: true,
autoControls: true,
pause: 5000,
infiniteLoop: false,
slideMargin: 0,
onSlideAfter: function($slideElement, oldIndex, newIndex) {
if (newIndex >= 2) {
slider.stopAuto();
setTimeout(function() {
slider.goToSlide(0);
}, 5000); // put whatever time here you want the 3rd slide to show
}
}
});
});

Did you try this using callback?
var slider = $('.bxslider').bxSlider(options); //your default options here.
$('.bxslider').bxSlider({
onSlideAfter: function($slideElement, oldIndex, newIndex){
//if slide number is 3
if(newIndex === 2){
slider.goToSlide(0);
slider.stopAuto();
}
});
What this code will do is, it will callback onSlideAfter function as soon as the slide is changed.. If the slide index is 3 then the code will stop autoplay after going to first slide..
Used callbacks and methods :
onSlideAfter (callback)
goToSlide (method)
Reference here : http://bxslider.com/options

bxSlider not working automatically

I want the bxSlider to automatically start the slideshow without the user clicking on it. This is my code (which isn't working):
slider = $('.slider1').bxSlider({
slideWidth: 1012,
slideHeight:200,
minSlides: 1,
slideMargin: 0,
controls: false,
auto: true,
autoStart: true
});
slider.startAuto();
What's wrong with this? What happens is that images do load, but it never autoscrolls, the user always have to choose one of the pager dots to manually scroll through. What's wrong with my code?

You should use
$(document).ready(function(e) { });
or
$(window).ready(function(e) { });
in between the code.
so the correct one should be,
$(document).ready(function(e) {
$('.slider1').bxSlider({
slideWidth: 1012,
slideHeight:200,
minSlides: 1,
slideMargin: 0,
controls: false,
auto: true,
});
});
hope this will help you...!

This Code worked for me!
var slider = $('#slider').bxSlider();
$('.bx-next, .bx-prev, .bx-pager a').click(function(){
// time to wait (in ms)
var wait = 1000;
setTimeout(function(){
slider.startAuto();
}, wait);
});
You can set wait on 0 if you don't want a delay. And because I used: pagerCustom: '#pager', I changed '.bx-pager' a into '#pager a'.

This was all , what was missing and i got it from bxslider official page
$(document).ready(function(){
$('.bxslider').bxSlider({
mode: 'fade',
auto: true,
autoControls: true,
pause: 2000
});
});

Try setting autoControls: true (from http://bxslider.com/examples/auto-show-start-stop-controls)

Okay! I got the same problem! And none of the solution worked above. But I found what was wrong!
1 - First Check and make sure you have auto:true in jQuery script like below:
$('.bxslider').bxSlider({
auto: true,
pause: 3000,
pager: true
});
2 - The main jQuery file that you are using, kindly update that jQuery file, you might be using old jQuery file! (#2 was the issue in case of mine)
Thanks!

This code is also working perfectly
jQuery(function(e){
jQuery('.bxslider').bxSlider({
mode: 'fade',
captions: true,
autoplay:true,
autoControls: true,
auto: true,
autoplaySpeed:1000
});
});

I suggest the following remedy. onSlideAfter is executed after each slide transition. Then this code will cause slider.startAuto() to be executed each time this happens, starting auto show.
var slider = $(".sliderBx ul").bxSlider({
auto: true,
pager: true,
controls: true,
onSlideAfter: function () {
slider.startAuto();
}
});

how to disable Jquery simplyScroll mouse hover?

I need disable only mouse hover for jquery simplyScroll plugin?
Client ask only click function ...
please any one help me?
thanks in advance... :)
(function($) {
$(function() {
$("#scroller").simplyScroll({
auto: false,
speed: 50
});
});
})(jQuery);

i'm not sure if i got your question right, but if you want to disable the "pause on mouseover" function
(function($) {
$(function() {
$("#scroller").simplyScroll({
auto: false,
speed: 50,
pauseOnHover : false // <--- just use the option
});
});
})(jQuery);
..should do the trick.
as seen in the manual http://logicbox.net/jquery/simplyscroll/