I'm using Flexslider for a project of gallery and I want to modify the navigation system.
On keypress/swipe/click on arrows, four images displayed disappear and are replaced by four new.
Is it possible to modify the behavior of the navigation to move images one by one ?
Thank you very much for your help !
Z.
You may want to use property move, which is defined as
//{NEW} Integer: Number of carousel items that should move on
animation. If 0, slider will move all visible items.
So, your code will look like this
$(window).load(function() {
$('.slidewidget1').flexslider({
animation: "slide",
animationLoop: true,
itemWidth: 210,
controlNav: false,
itemMargin: 0,
slideshow: false,
move: 1,
minItems = 4,
maxItems = 4
});
});
plus, of course, your customization of width, etc.
Documentation
Related
I have added a TimeLineMax to a scene that I am working on. The functionality is working great but I am having trouble with a few details.
I would like my scene to pin like this site http://www.google.com/inbox/#bundles . By this I want multiple pins within one scene so that a user can't scroll through my animations without viewing them.
Here is a demo site of my work so far : https://so-staging.herokuapp.com/users/sign_in#publisher-demo-container
You can see my progress if you scroll down. Three steps will pop up and then animate away. I also have adjusted the background position of #publisher-demo-steps based on scroll.
However this isn't the desired goal. I would like this:
1. Pin #publisher-demo
2. Fire step 1 animated background-position on scroll.
3. Fire step 2
4. Fire step 3
I would like each step to be pinned so that a user can't go to the next step until the animation is complete.
I know this is confusing and I have been staring at it way too long. Thanks for the help. Here is my scrollmagic and GSAP code.
var controller = new ScrollMagic();
var tween = new TimelineMax()
.add(TweenMax.to("#publisher-demo-steps", 0.5, {backgroundPosition : "50% 23%"}))
.add(TweenMax.to(".blue-circle", 1, {display: "block"}))
.add(TweenMax.to(".blue-circle", 1, {className: "+=animated zoomOut", display: "none", delay:3}))
.add(TweenMax.to("#publisher-demo-steps", 0.5, {backgroundPosition : "22% 52%"}))
.add(TweenMax.to(".red-circle", 1, {display: "block"}))
.add(TweenMax.to(".red-circle", 1, {className: "+=animated zoomOut", display: "none", delay:3}))
.add(TweenMax.to("#publisher-demo-steps", 0.5, {backgroundPosition : "76% 50%"}))
.add(TweenMax.to(".green-circle", 1, {display: "block"}))
.add(TweenMax.to(".green-circle", 1, {className: "+=animated zoomOut", display: "none", delay:3}));
var scene = new ScrollScene({triggerElement: "#publisher-demo", duration: 4000, triggerHook: -100})
.setPin("#publisher-demo")
.setTween(tween)
.addTo(controller);
If I understand you correctly you would like to trigger the animations to play unbound from scroll progress.
The way you do this is by not linking the scene that does the pin.
As soon as a scene has a duration it will link animation progress to scroll progress.
Then you just add a scene for each animation trigger point.
i.e. like this:
new ScrollScene({triggerElement: "#trigger-element", duration: 4000, triggerHook: 0})
.setPin("#publisher-demo")
.addTo(controller);
new ScrollScene({triggerElement: "#trigger-element", triggerHook: 0})
.setTween(new TimelineMax()
.to("#publisher-demo-steps", 0.5, {backgroundPosition : "50% 23%"})
.to(".blue-circle", 1, {display: "block"})
)
.addTo(controller);
new ScrollScene({triggerElement: "#trigger-element", triggerHook: 0, offset: 300)
.setTween(TweenMax.to(".blue-circle", 1, {className: "+=animated zoomOut", display: "none", delay:3}))
.addTo(controller);
General notes:
As you see I used a trigger element that is different from the pinned element. It should be positioned absolute and located at the same position as the pinned element. the reason I do this is, because the pinned element moves and would supply a wrong start position for the other scenes.
A triggerHook of -100 doesn't make any sense. The value can by definition only be between 0 and 1.
instead of TimelineMax().add(TweenMax.to()) you can use the shorthand TimelineMax().to() (see http://greensock.com/docs/#/HTML5/GSAP/TimelineMax/to/)
Note, that ScrollMagic 2 has been released for a while now. The syntax is very similar so you should consider upgrading.
I am using carousel.js to slide content (manufacturers image).
Currently it is sliding only one image after a few seconds.
I want to know if there is any property in the carousel.js that like I can specify number of images to slide.
The script used to slide:
new Carousel('carousel-wrapper-manuf', $$('#carousel-content-manuf .slide'), $$('a.carousel-control'),
{
duration: 0.2,
visibleSlides : 6,
circular: true,
wheel: true,
auto: true
}
);
I'm building a Flexslider which uses a thumbnail navigation. It's essentially identical to the Flexslider demo seen here http://flexslider.woothemes.com/thumbnail-slider.html. It all works fine, but if I try to use the StartAt property it breaks the directional nav on the thumbnails. It jumps to the wrong place and sometimes kills the directionNav links.
This is my code. There are 5 #carousel items shown on the page at once, and one #slider item, the same as on the Flexslider demo.
$('#carousel').flexslider({
animation: "slide",
controlNav: false,
animationLoop: false,
slideshow: false,
itemWidth: 230,
itemMargin: 40,
move: 5,
startAt: 2,
asNavFor: '#slider'
});
$('#slider').flexslider({
animation: "slide",
controlNav: false,
animationLoop: false,
slideshow: false,
startAt: 2,
sync: "#carousel"
});
If I run just the #carousel code which shows 5 items at once, I found that 'startAt' talks to one 'run of items' rather than one item. So startAt 0 will show items 1-5, startAt 1 will show items 6-10 and so on.
If there is just one item shown at a time (like on #slider) then the 'run' is 1 item. So startAt 0 is item 1, startAt 1 is item 2 and so on.
I think this is linked to the bug. When these are synced if I hit next on the directionNav of #carousel (when startAt of #carousel is 2), it jumps me to thumbnail items 16-20 (what would be run 3 if not synced). If I were to hit prev instead, it jumps me to items 6-10 (what would be run 1 if not synced).
Has anyone figured out a way around this bug?
Thanks
So i had this same issue, trying to do essentially the same thing.
I haven't found a solution but i have found the issue on github:
https://github.com/woothemes/FlexSlider/issues/277
The issue seems to be that when flexslider is loading, the sync method is not available. So when loading, sync is not possible. I tried calling sync from the start event on the slider, with no luck. This is an issue that needs to be fixed in flexslider itself, which requires a patch.
I'm sorry i couldn't be more helpful, but i hope the work around in the github issue is helpful to you.
Problem
I use the flexslider carousel to a number of images to show. What I want now is, when the browser has a certain width drop a break, which for example is incidental to 768px 2 images are shown. Currently you see an image at a certain width but half and wants to these points with javascript / jquery to give many pictures there must fully show.
So my question is, how I can make an if statement for when the browser width is for example 768px width, is must show two images...
$('.flexslider').flexslider({
animation: "slide",
animationLoop: true,
itemWidth: 320,
itemMargin: 0,
minItems: 2,
maxItems: 5,
start: function(slider){
$('body').removeClass('loading');
}
});
Check code on JSFiddle
You can use an if statement for widths like this:
if ($(window).width() < 960) {
alert('Less than 960');
}
else {
alert('More than 960');
}
... and to contain that, you might like to combine your document ready function with a window resize function.
$(document).ready(myfunction);
$(window).resize(myfunction);
function myfunction() {
// Pace the if/else here, do whatever
}
In terms of showing two images it think you should be able to be achieve that by setting slide widths and offsets in the flexslider function - or with css. here are the options i'm talking about:
itemWidth: 490, // or whatever is 1/2 of your width
itemMargin: 30, // experiment here!
minItems: 1, // or 2
Here's an edited version of your JS fiddle demo! http://jsfiddle.net/tM2a8/
I am currently building a site which utilises multiple flexsliders. The concept is that when the user clicks a specific button, it shows a flexslider with featured content relevant to the button pressed, which is all pretty simple stuff.
The problem i am having is at the moment, the flexsliders are firing on the click of a button, however whenever a user clicks on a different button, the slider is not reset.
I want to try and make the slider reset to slide 0 on each button click. I have tried using .stop() and some of the callback features within the plugin, but i have had no luck as of yet. Was wondering if anybody else had ever faced this before? (and won..)
the code in the footer.php is pretty standard issue at the moment:
$('.button').click(function() {
$('.flexslider').flexslider({
controlNav: true,
directionNav: false,
slideToStart: 0,
pauseOnHover: true,
});
});
I know it's been long since this question was posted, but it might help somebody.
I actually faced the same problem. After some poking around I managed to get it working using the following code:
// Catch the flexslider context
var slider = $(".flexslider").data("flexslider");
// Unset the animating flag so we can move back to the first slide quickly
slider.animating = false;
// Move to the first slide and stop the slideshow there
slider.flexAnimate(0, true, true);
If you want to return at the first slide, but don't want the animation to stop, just replace the last line with slider.flexAnimate(0);
I believe that the slider.stop() method doesn't unset the animating flag. In my opinion it should, because this flag is used in the flexAnimate() function to check whether to actually slide or not. If the flag is set to false, then the flexAnimate() function will suddenly return.
think the answer might lie in the start callback function. Try something like this (untested)
$('.button').click(function() {
$('.flexslider').flexslider({
controlNav: true,
directionNav: false,
slideToStart: 0,
pauseOnHover: true,
start: function(slider) {
if (slider.currentSlide != 0) {
slider.flexAnimate(0)//move the slider to the first slide (Unless the slider is also already on the first slide);
}
}
});
});
use the new api at line 1056 in flexslider like
' startAt: 0,
//Integer: The slide that the slider should start on. Array notation (0 = first slide)'