I'm trying to get a look like pinterest, where the elements (pics w/ captions) slide into each other. There are two distinct rows here, however, I need the pics with captions to slide into each other.
http://pureformenyc.com/inspiration/
Try the jQuery Masonry layout plugin.
Related
I want to create an carousel with different 8 items. Those 8 times contains different divs, paragraphs and images and user should see 4 items on one "slide" so, I have to create new divs to wrap that all.
Right now I am using Flexslider by WooCommerece:
http://flexslider.woothemes.com/basic-carousel.html
But sadly this Felixslider isn't working with divs.
My question now is, which slider is supporting divs, paragraphs and images?
Also, I have to create the divs with PHP. But, that I could do myself.
Regards
I think you can use this Demo
and you can create your own extension like this Demo
Looks like Owl carousel would work for you. Checkout the demo of owl carousel
I would like to make a carousel slider similar to what you see on the new design for Youtube.com and pages like this: https://plus.google.com/discover/w29saB
Any recommendations on how to build this, or Jquery plugins that facilitate this.
I've tried itemSlide() but I don't know how to get the CSS so that it renders inside the container DIV properly. Also Itemslide doesn't give the arrows to scroll to the next page.
Other carousel plugins I've looked at even with their responsive options, make you specify the number of items to fit on a page. I would like that to be determined by css.
Update I've gotten itemSlide() to render in the container div however I still need to be able to add the arrows so that it scrolls when clicked. I figure getting the buttons to overlay is a matter of the right CSS. Getting the scroll to work when clicked is likely something specific to the itemSlide api that I should be able to figure out once the arrows are overlaid properly. itemSlide() as carousel slider library: http://itemslide.github.io/
Why not try a DIV inside a DIV. Have the overlap as hidden in css. Arrows can be div buttons that move the inner div "X" number of pixels in a given direction to match the block sizes in the carousel stile div.
Once you get the arrows overlaid you can use the disable_clicktoslide option of the library so that clicking on slides doesn't move to them.
To make the arrows work, call the functions next() and previous() on the carousel object.
Also you can use the function getActiveIndex() to detect where the user is on the carousel.
Good luck!
I have a FlexSlider carousel setup similar to this example:
http://flexslider.woothemes.com/thumbnail-slider.html
These are two linked carousels, the thumbnail carousel at the bottom can be used to navigate through the top slides.
I can use the controlNav option to output pagination links, like the dots under the carousel on the FlexSlider homepage.
However, a pagination link will be output for each and every slide. Instead I'd like just the number of visible "rows" of thumbnails to be output.
Taking the example linked to above, say there's three rows of thumbnails which can be navigated through, the pagination links might look like this:
Is this possible with FlexSlider? I don't want a dot for each slide, but of each visible "pane" of thumbnails.
I have a three divs which slide in, they all have a z-order of 0, they can all slide in at different points and in different orders.
When then are all showing, how do I find out what order the divs are in, I want to be able to slide them back in with a delay on each.
Thanks
I guess your DIV's are slided in by a function of you or of jQuery. You can "override" this function. At this overriding you can put a mechanism that saves for example timestamp for the slided in DIV.
So you'll later be able to find out the order the div's have been shown in.
About overriding JavaScript-/jQuery-functions there are many good entries on Stackoverflow.
For example: Override jQuery functions
I'm currently taking a web development class and looking to go beyond the "scope" of the class. I managed to create a jquery slide show in a div, now id like to show case some other features in two other divs, stack them into a single div and and call them via a set of toggles. Any methods or roads that can be suggested?
By stacked I mean three divs, one on top of the other. One of these divs is a jquery slider. I'd like a toggle to show one and hide the other two. I'll try and post code after I make it home from work.
Not sure what you mean by "stack", but jQuery Accordion might be a simple solution to get what you're looking for.
It also has methods that you could call from other ~buttons~ to trigger to show/hide effect.
You could even make the three divs into a slide show that is triggered by clicking some navigation like forward and back arrows. Look into the Anything Slider.