I am building a website with nivo slider image gallery. Its a briliant slider, but i need a slider counter like 1/6 (slide 1 of 6). I searched in the support page and google but all what i have found was the same question unanswered...
Use one of the nivo callback options.
$('#slider').nivoSlider({
afterChange: function(){
$('#counter').text( $('.controlNav .active').text() );
}
});
After each slide change it will take the text contents of the active nav control and use it to populate your counter. If you would like to provide a more specific context I could offer an explicit solution.
Related
I am successfully using FancyBox with Slider Revolution. Here is the code I have added to my slideshow custom Javascript box:
/* change revapi68 to whatever API name is being used for your slider */
var api = revapi68;
api.on(‘revolution.slide.onloaded’, function() {
jQuery(document).trigger(‘post-load’);
jQuery(this).on(‘click’, function() {api.revpause()});
jQuery(this).find(‘li’).each( function() {
var title = jQuery(this).find(‘div.Photography-Textblock’).text();
jQuery(this).find(‘div.slidelink a’).attr(‘title’, title);
});
});
This pulls the image’s caption from the media library and uses it as the caption for the image in FancyBox. The caption also ends up being a “tooltip” that shows when scrolling over the Slider Revolution image (before clicking to launch the FancyBox slideshow). I want to remove that tooltip from the Slider Revolution slide but maintain the caption in the FancyBox slide. I can remove the tooltip by eliminating the code, “var title = jQuery(this).find(‘div.Photography-Textblock’).text();” but this also eliminates the FancyBox captions. Is there a way to achieve what I want to do?
An example of a project URL with tooltips is https://donnallyarchitects.com/project/lake-union-floating-home-2/
An example of a project URL without tooltips (with eliminated code) is https://donnallyarchitects.com/project/marysville-house/
Try using data-fancybox-title to set title for fancybox only (using v2).
I got a problem with the Slick Slider.
I want to change the 'slidesToShow 'option on every Slide.
Each slider page represents a group and only the right elements should show up on that page.
Each slide got a data-group attribute, which i´m using to count the elements and pass it to 'slickSetOption'.
https://jsfiddle.net/xnnm645x/3/
$('.slider').on('beforeChange', function (event, slick, currentSlide, nextSlide) {
checkSlideToShow(nextSlide);
});
Why is there on the second page of the slider, still 4 elements instead of 3?
And if you scroll to the last slider page you can see how it change the width of the divs and suddenly becomes 3 slides. Is it possible to get rid of that transition effect?
Your code is not working because slick will inject 2 div in your .slider element for its functionality.
you can check it by logging in console
console.log($('.slider div')) // count will be 11 and it will break your logic.
You need to found the div with data attribute only.
$('.slider div *[data-group]') // count will be 9
Working example : https://jsfiddle.net/fydo8pt3/
I am using nivoSlider on wordpress and I want the background of my homepage to change based on the current slide image!
I have no experience in javascript nor jquery but im good in php / html5 / css3.
Thanks.
The WordPress nivo slider does not have the ability to edit callbacks on slider change (unless you edit the plugin, thus breaking compatibility with future versions). But the general jQuery plugin allows you to do just that. You would do something like this when setting up the slider:
$('#slider').nivoSlider({
// [snip]
afterChange: function(){
// Get the currently active image
var active_image = $(".nivo-controlNav .active");
// Change the class on your element and style that element with CSS
// E.g. by fetching some attribute with $(active_image).attr()
},
// [snip]
});
I have downloaded jcarousel slider but I want two rows to appear and on clicking on next or previous both rows should move simultaneously, i do not know the concepts of javascript and jquery so please tell me the steps to be taken.
Thanks in advance
You mean you need 2 sliders. if you click on 1st slider's next / prev arrow, than both carousal should be effected. is that so?
If yes, then you have to try carousal's inbuilt function for customization.
add 2 carousal slider in your code
hide carousal slider arrow for 2nd slider
now do custumization for your 1st slider arrows. i.e. trigger 2nd
slider whenever 1st slider is triggered. you can try to put your
code inside carousal function:
$('.jcarousel').on('jcarousel:scroll', function(event, carousel, target, animate) {
// "this" refers to the root element
// "carousel" is the jCarousel instance
// "target" is the target argument passed to the scroll method
// "animate" is the animate argument passed to the scroll method
// indicating whether jCarousel was requested to do an animation
});
you can find various customized function from here: http://sorgalla.com/jcarousel/docs/reference/events.html
What do you want to show in the second row?
Is it some info of the current image like description or the count e.g. 2 of 7 or one more set of images.
If it is info(description) you can create a div after your jCarousel container and change the content of the div on next and previous button click callback function.
Post some code to get a clear picture
I'm using Cycle Slider
with slide conunter. I'm having plroblems to implement a fadein controls on mouse over... they have a slider like that, but with no slide counter... I tryed to implement the counter on the fade control slider and the fade control on the slide conter slider, but no success... Any tips?
Here is the code of a slider with fade controls that I'm trying to use: http://jsfiddle.net/sLCQf/1/
. I cant put the slide counter in that...
Try using the pager option in jQuery cycle.
see
http://jsfiddle.net/nwe44/sLCQf/2/
for a demo of this in action based on your fiddle. Obviously you'll want to style it a bit better than my beautiful border.