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.
Related
Once a slider has finished all slides how to stop the slider after the last slide. Disabling moving forward but enabling moving backward.
http://glide.jedrzejchalubek.com/docs.html
It's really simple, because it is buildin into plugin. You just need to set glide type to slider.
$('#Slider').glide({
type: 'slider'
});
I have created a parallax but it is flipping slides.
I want to add animate.css class but it's only working on the first slide. On the other slide it's not working. It is working when page is loaded, but when I click on third slide the animation is already finished.
So, to make it work properly, I created a JQuery function when the slide is active, then animate CSSclass is to be added but it's not working:
$(document).ready(function(){
if ( $('#section2').hasClass('active') ) {
$('#section2 .col-md-6').addClass('rotateInUpRight');
}
});
Add this class to the slide that has to be animated.
Not to a container containing all slides.
You have to wait at least 1 animation-frame after adding the new slide to the DOM before adding this class to the new slide.
(Or 1 animation-frame after you made it visible, in case of display:none)
If you don't know how to work with animation-frames you could use a timeout of 50ms, just to be sure.
I'm trying to create a simple slide animation with AngularJS.
I have a feedback tab that when someone click on it it will slide from right to left and will open, another click will do the animation again and will close it.
The thing is i'm not sure how to create the slide animation.
I read about that that ng-animation is obsolete and now i need to use class and it automatically hook on ng-hide and ng-show
I have 2 div elements:
<div class="feedback-close" data-ng-hide="feedback_open" data-ng-click="feedback_open = !feedback_open"></div>
<div class="feedback-open" data-ng-show="feedback_open" data-ng-click="feedback_open = !feedback_open"></div>
i need some code that will make the slide animation from close to open and from open to close.
can anyone help me out ?
a nice slide example will be in here : http://feedback-me.appspot.com/example_bootstrap.html
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.
I have a slide show component I've been working on that is a mash up of jcycle and jcarousel. It works rather well, yet there is one last feature I'd to add that I cannot figure out. Right now if you click on a thumbnail it will center it in the carousel as long as it's not the first 2 or last 2 thumbs. This works great and I like centering the active thumbnail of the slide show.
The problem I'm running into is if the user hits the play button on the slide show or the next and previous slide buttons, the slide show cycles, yet the active slide thumbnail does not center in the carousel. I've tried unsuccessfully to check if the thumbnail anchor has class, activeSlide, and if so to center it, yet cant seem to get it to work.
Here is a link to the demo page I've been working on.
http://brettjankord.com/standards/slideshows/jslideshow-test2.php
Any help is greatly appreciated!
Put the following at the end of your onBefore method
var carousel = $('#mycarousel').data('jcarousel');
var activeIdx = $('#mycarousel img[src="'+next.src+'"]').closest('a').data('index') -2;
if (carousel)
{
carousel.scroll(activeIdx);
}
Demo at http://jsfiddle.net/JupPn/1/