I have 6 images inside my slick carousel. They take full width space of the screen but they don't repeat infinitely. To explain it further I mean that I want to use only 6 images and if they skip to the left overtime then they will appear from the right once again and again (They will keep repeating)
Are you using bootstrap by any chance? because it has a built in carousel that can infinitely slide. Check out their code and see if you can imitate their logic.
https://getbootstrap.com/examples/carousel/
Edit**
after looking further into it, does this help?
$('.multiple-items').slick({
infinite: true,
});
referenced from: http://kenwheeler.github.io/slick/
I haven't used slick before, but I believe you can set its' infinite property to true. Let me know if that works!
in this fiddle the 'slidesToShow' is 6, so please make sure that your owl item is more than slidesToSwow count. So it will automatically working infinite loop option.
Please visit fiddle
Related
I have a problem, I am making a page with fullpage.js, I am launching animations with tweenLite every time I reach a section with Scrollmagic.
The problem is the following:
If I move in the normal order of the sections, one by one, the animations come out correctly, but when I jump, from the first section to the last one for example, the animations do not complement each other correctly everything gets decontrolled, I leave the sample of the page, so you can better understand what is happening.
Is there any optimal way to do this process, thanks in advance for the help.
http://pagina.gestionahora.co/
I am trying to make an animation that will fill a tube with liquid and then start moving the liquid inside. I am using an SVG with 3 main paths, the first one is liquid with short height, which then I morph to become the liquid with long height, then I want to "repeat" the morph between the other 2 paths to make it look like the liquid is moving, however when i move from one path to the other using morphSVG, I can't go back to the previous path, so my other morphSVG statement isn't executed.
Here's link to my code:
https://codepen.io/BrittanyR/pen/rJvOyX
As can be seen, I am able to move from one path to the other using:
TweenMax.to("#redSecondary", 2, {morphSVG: "#redPrimary", delay: 2})
But I can't then use this: TweenMax.to("#redPrimary", 2, {morphSVG: "#redSecondary"})
Any idea will be helpful.
Thanks.
It seems like it was just a logic issue in your code - your setTimeout() was alternating between animating #redPrimary and #redSecondary (targets), but you never changed what they were animating TO. So it worked the first time...and that's it. Every subsequent call was just duplicating the exact same movement (tweening to the current values...thus no motion).
I wonder if this is what you were looking for: https://codepen.io/GreenSock/pen/gvzMLG?editors=0010
Note: as a convenience, MorphSVGPlugin automatically records the original path data for the element so that if you ever want to animate back to it (like to("#redPrimary", 2, {morphSVG:"#redPrimary"}), it knows to grab that. It's all automatic :)
So if you want to repeatedly bounce between those morphs, a simple TimelineMax is probably the easiest way. Get rid of all that setTimeout() stuff and just do this:
var tl = new TimelineMax({repeat:-1, delay:2});
tl.to("#redPrimary", 2, {morphSVG:"#redSecondary", ease:Power1.easeInOut})
.to("#redPrimary", 2, {morphSVG:"#redPrimary", ease:Power1.easeInOut});
Does that help? I'm not entirely sure that I understood your goal properly with the animation, but hopefully this nudges you in the right direction.
Happy tweening!
How can i inline images? i am using bootstrap row, and per image have a class of "col-md-3".
the problem is, as you can see, the 5th image goes to the right, it should be on the left, underneath the IMPOSSIBRU image.
Thank you!
I think this happens because your images have different heights. If you are able to restrict height to a certain 'px' then this might help to resolve the problem.
When using cols to group a bunch of things, it's always good to try and keep layouts + sizes the same to prevent this kind of thing happening.
Ey. I've seen the other post about Lightbox gallery effect for Flex, but after having played around with it I cant seem to get it to work 100% (The image is as small as the thumb, and I cant make it bigger). And this also lacks some functionality I'd like to have.
So, one example would be, of course, this: http://lokeshdhakar.com/projects/lightbox2/
If you click any image on the image set you can swap between them with an arrow. This is what I'd like to have.
Also, it would be nice if it was possible to display the thumbnails for the other images in the same set under the bigger picture(when one image is already clicked).
I've tried to search for components like this, but I cant seem to find any other.
If any of you know of any nice components or snippets of code for this kind of effect then please let me know! =)
Kind regards,
Stian Berg Larsen
EDIT:
So I've searched around and tried a number of examples, but I cant seem to get any of them to work. There is always an error, and none of the examples are exactly what I want.
I simply need a way to show images like Lightbox. With a prev/next arrow and maybe a close button. Nothing more than that. How would I go about making this, or use an existing component?
Im using a TileGroup to hold all my thumbs (so that they will fill out the width of the Group with more images if there are room for it). If it's possible to generate this list of thumbnails dynamically too then that would be great, but basically what I need is to show images with a Lightbox style when I click them.
Thanks! =)
I ended up just making my own lightbox effect. :)
Created an Actionscript class (based on Group) and added image loading functionality, prev/next/close buttons and borders and such. Works like a charm :)
In Latex how can you make the background image to occupy the whole sheet on every page except a certain stripe on the inner side of each page? I can't figure it out.
I have a background image I'd like to be seen in whole on each page after printing/binding.
Matyi
There's some rather scary LaTeX hackery involving putting a picture environment under every page and using \includegraphics to put an image into that environment. You'll have to adjust the size of the image using the width option, and if you want even and odd pages you'll have to check the page number to know whether to shift the image right or left by changing \put(0,0) to \put(3,0) for example.
For page number testing try something on the order of
\ifodd\count0 ...stuff for odd-numbered pages ...
\else ... stuff for even-numbered pages ...
\fi
This isn't really a full answer but will be enough to get you started.
Honestly, I'd just add the white space in the image :)
Well, I was thinking of something like this.
Is this really so rare need to have? I myself need such a thing for the first time now but I don't feel it a so big oddity. It's strange for me that if you want a background to change over even and odd pages, just like normal text do, you need to feel betraying Latex logics. Or maybe I'm too fanatic of this challenge of mine and I want to feel the whole tex world change to fulfill my wishes. :)
Thank you for the answers!