My jquery code is like this
$(document).ready(function() {
$(".slideshow").css("overflow","hidden");
$("ul#slides").cycle({
fx: 'fade',
pause: 1,
prev: '#prev',
next: '#next'
});
And i want to know ,is there any slide change event in jquery for this...i mean i need to get the slide number when each slide changes
Thank you
Your question is about Cycle specifically, not general jQuery. The documentation on options for Cycle can be found here.
It looks like there is an event called onPrevNextEvent:
onPrevNextEvent: null,// callback fn for prev/next events: function(isNext, zeroBasedSlideIndex, slideElement)
The second parameter passed into a function you define for that event will be zeroBasedSlideIndex. That's your current slide number, with the first slide starting at 0.
So your code might look something like:
$(document).ready(function() {
$(".slideshow").css("overflow","hidden");
$("ul#slides").cycle({
fx: 'fade',
pause: 1,
prev: '#prev',
next: '#next',
onPrevNextEvent: function(isNext, slideNum) {
alert("This is slide "+ slideNum);
}
});
Related
I have several instances of the Slick Carousel gallery set up and working properly. However, I cannot successfully call the Methods as described in the documentation.
Whenever I try to execute a method after initialization is complete,the method did not perform. I'm trying to automatically goto the first slide after the slick is initiated.(the mothod "onInit " and "onReInit " is not perform.)
this is my code:
$("body #slick").slick({
slidesToShow: 3,
centerPadding: "20px",
draggable:false,
onInit:function(){
console.log("onInit");
$("body #slick").slick("slickGoTo",0);
},
onReInit:function(){
console.log("onReInit");
$("body #slick").slick("slickGoTo",0);
}
});
thanks for help me.
According to the release notes here:
All callback methods are now deprecated. They have been replaced with event triggers. I added a few helpful ones too. So onAfterChange is now:
$('.your-element').on('afterChange', function(){
// do stuff
});
So, in your case:
$("body #slick").on('init', function() {
console.log("onInit");
$("body #slick").slick("slickGoTo",0);
});
$("body #slick").on('reInit', function() {
console.log("onReInit");
$("body #slick").slick("slickGoTo",0);
});
$("body #slick").slick({
slidesToShow: 3,
centerPadding: "20px",
draggable:false
});
Please note that all event handlers should be declared before calling slick({...}).
I am using the slick slider to display images. At the moment i have it so you can click on the navigation and it changes the main image display.
I am trying to get it to set the currently selected navigation on a hover event or mouseover event.
This is my current code for the navigation and display:
$('.slider-for').slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
fade: true,
autoplay: true,
//trigger after the slide appears
// i is current slide index
afterChange: function (slickSlider, i) {
//remove all active class
$('.slider-nav .slick-slide').removeClass('slick-active');
//set active class for current slide
$('.slider-nav .slick-slide').eq(i).addClass('slick-active');
}
});
$('.slider-nav .slick-slide').eq(0).addClass('slick-active');
$('.slider-nav').slick({
slidesToShow: 4,
slidesToScroll: 1,
asNavFor: '.slider-for',
autoplay: true,
dots: true,
centerMode: true,
focusOnSelect: true,
vertical: true
});
and this is my fiddle
Is it possible to bind a mouseover event to slick?
Should be possible. Never used slick before but on the first view it looks like a hover function is not implemented. I've created a fast basic approach how you could solve this with slick provided methods. See the fiddle.
You should optimize getting the slick object, it's just a starting point for you.
Also you should break the autoplay when hovering and restart it, just try around with the slick given methods.
$('.slider-nav').on('mouseenter', '.slick-slide', function (e) {
var $currTarget = $(e.currentTarget),
index = $currTarget.data('slick-index'),
slickObj = $('.slider-for').slick('getSlick');
slickObj.slickGoTo(index);
});
Working fiddle
Using the above answer as a base, I was able to come up with this solution. This fixes the issue when quickly mousing over from navslide #1 to #3, and having the slider-for hangup on slide #2.
var slideTimer;
$('.slider-nav').on('mouseenter', '.slick-slide', function (e) {
var $currTarget = $(e.currentTarget);
$('.slider-nav .slick-slide').removeClass('slick-current');
$currTarget.addClass('slick-current');
slideTimer = setTimeout(function () {
var index = $('.slider-nav').find('.slick-current').data('slick-index');
var slickObj = $('.slider-for').slick('getSlick');
slickObj.slickGoTo(index);
}, 500);
}).on('mouseleave', '.slick-slide', function (e) {
clearTimeout(slideTimer);
});
this is my first post on stackoverflow, so please let me know if I've asked my question correctly, and if my terminology is incorrect at any point. Thank you.
I'm using jQuery and the Cycle plugin. I have about 18 images that rotate with no delay. You can view a working example of this here: (http://dev.ctsciencecenter.org/freeze-frame/).
I'm attempting to change the 'speed' value, eventually with a jQuery UI slider, but for now with a link and the .click function.
Here is the Cycle function:
$('#slideshow').cycle({
fx: 'none',
timeout: 1,
continuation: 1,
speed: 'fast'
});
I would like to change the 'speed' value to 'slow' when a link with the id #example is clicked.
I really appreciate the help, could you please also tell me the term for properties like 'speed' and 'fx', are these called 'Object Properties?".
Let me know if this is what you are looking for:
$(function () {
$('#slideshow').cycle({
fx: 'none',
timeout: 1,
continuation: 1,
speed: 'fast'
});
$('#example').click(function (e) {
e.preventDefault();
$('#slideshow').unbind();
$('#slideshow').cycle({
fx: 'none',
timeout: 1,
continuation: 1,
speed: 'slow'
});
});
});
I am struggling to customize jquery cycle plugin. What I want is when the slider reaches last slide it will stop sliding to first slide again.This is working fine.
But the problem is when I am on first slide and then click the third slide then it's not ending there rather it goes back to first slide.
My jquery code is here:
jQuery(document).ready(function($) {
$('.slider1 ul.horizontal').cycle({
fx: 'scrollHorz',
speed: 500,
pause: 1,
pauseOnPagerHover: true,
width: "100%",
easeOut: 'easeOutBack',
cleartypeNoBg: true,
pager: 'ul.pager',
autostop: 2,
autostopCount:3,
startingSlide: 0,
after: onAfter,
pagerAnchorBuilder: function(idx, slide) {
return '<li></li>';
}
});
function onAfter()
{
if ($('.slider_content').css('display') == 'block')
{
if ($('li#lastslide').css('display') == 'block') {
$('.slider1 ul.horizontal').cycle('pause');
$('.controlbutton').stop().fadeIn(500);
}
else
{
if($('.question_slide').css('right') != '0px')
{
$('.controlbutton').fadeOut(100);
}
}
}
}
});
I think there should be some pagination click event.I have checked the plugin options reference page but can't under stand how to tell the plugin that this is the last slide and don't go back to the first slide.
Any idea please. Thanks in advance.
I am facing a silly problem with bxSlider plugin. My slider only shows 4 slides with auto sliding mode. But when someone clicks on a particular nav link I am appending another slide relates to that link. But I wanted to remove that new slide when someone clicks on prev/next control and reload the default slider with 4 slides. But it's not working for that prev/next controls.
Here is the code:
//Default Slider
var slider= $('.bxslider').bxSlider({
displaySlideQty : 4,
moveSlideQty : 4,
maxSlides: 4,
auto: true,
autoStart: true,
preloadImages: 'visible',
mode: 'fade',
pager: false,
});
//If someone clicks any link on navigation
$('#how').click(function(e){
e.preventDefault();
if( $('ul.bxslider li.added').length > 0 ){
$('.bxslider').find('li.added').remove();
}
$('.bxslider').append('<li class="added"><a class="fancybox fancybox.iframe" href="http://www.youtube.com/embed/Jwjv7OLazVY?enablejsapi=1&wmode=opaque" title="Click to Watch The Vieo"><img src="img/video.jpg"/></a></li>');
slider.reloadSlider({
mode:'fade',
auto: false,
autoStart: false,
pager:false,
});
slider.goToSlide(4);
});
When the slide for #How tag is the current slide and then if I want to click any next/prev control I wanted to remove the slide 'li.added' and reload the default slider with 4 slides. That's I tried the following code
$('a.bx-next').click(function(e){
if( $('ul.bxslider li.added').length > 0 ){
$('.bxslider').find('li.added').remove();
slider.reloadSlider({
mode:'fade',
auto: true,
autoStart: true,
pager:false,
});
}
});
but nothing happens! Can anyone please help me on this? What wrong I'm doing? Here is the Live testing site for you convenience.
I found that you need to bind the next button click function every time once you call reloadSlider, as it re-bind the next-previous control so it will lose the event binding if you do it at page load. So please rebind the click event every time you reload.
var bindNext = function(){
$('a.bx-next').click(function(e){
if( $('ul.bxslider li.added').length > 0 ){
$('.bxslider').find('li.added').remove();
slider.reloadSlider({
mode:'fade',
auto: true,
autoStart: true,
pager:false,
});
}
});
}
and then when you call reloadSlider then call the bindNext() function after calling it.
$('#forSellers').click(function(e){
e.preventDefault();
if( $('ul.bxslider li.added').length > 0 ){
$('.bxslider').find('li.added').remove();
}
$('.bxslider').append('<li class="added"><img src="img/seller.jpg" /></li>');
slider.reloadSlider({
auto: false,
autoStart: false,
pager:false,
mode:'fade',
});
slider.goToSlide(4);
bindNext();
});
Its working at my side.