I would like to create a slider but my javascript and jQuery knowledge is not that great.
I looked at Flexslider (http://flexslider.woothemes.com/) but I am not able to customize it for the following specs:
no colour gaps between thumbnails
thumbnail timeline scrolls left to right and vice versa
when you click on a thumbnail it replaces the parent (larger) image.
If you could help me understand the code that I need to write, I would be very grateful.
Try cycle 2 plugin. You can customize it as per your need.
http://jquery.malsup.com/cycle2/demo/caro-pager.php
Related
i was wondering how can i create image slider like YouTube channel. when there is many video on a channel YouTube put them in a slider and we have back and forth button to see other video which doesn't show on the page and when we click on this back or forth button which are on different side of screen image start to move to left or right. two properties are important to me. 1. image slide from left to right or vise versa and 2. i can click on those image and go to another page.i mean image become clickable. i search image slider in Google but all i'v got was those image slider which we put under the banner for showcase. i don't know if the real name of this method is image slider. please give me a post or URL tutorial or even a YouTube video about create this kind of stuff. tank you very much
Yes, it's called an image slider.
Where do you want to use it? If you want to create your own, this question might help you: How to build simple jQuery image slider with sliding or opacity effect?
Have a look at this page for a multi-image-at-once slider implementation: http://bxslider.com/examples/carousel-demystified
Have a look at this website for a showcase of the different types of sliders available: http://www.jssor.com/
I would appreciate little help on this.
I wanna add an image/text overlay hover on images of this slider below.
So when someone's hovering the image will appear a 50% transparent black block and the "details" image/text in the middle.
This is an example of hovering (the zoom and details buttons) : http://themes.derby-web-design-agency.co.uk/Lola-Html-Theme/Light/
This is the slider I wanna use : http://codepen.io/anon/pen/Alzhn
Thanks in advance !
No need to reinvent the wheel. Consider the following projects:
http://wowslider.com/jquery-slideshow-huge-demo.html
http://bxslider.com/examples/image-slideshow-captions
For overlays, you can also consider
http://buildinternet.com/project/mosaic/1.0/
Try any of the above links for implementation and be more specific with your question.
For example, I am having issue with X, I want to do Y and I have tried solving this using XYZ. Your JS fiddle is just a copy of your existing project with no indication of what you have tried to solve your problem.
As with any learning environment, I would take small steps first. In your use case, I would tackle the problem as follows:
Require on hover caption
Require slider
Then when step#1 is completed, you can build on top of that and so forth.
I want to create custom banner or download one.
The banner has following requirement,
I could add images and text in this banner.
On each slide you can add multiple images and text, for an example slide one has two images and text on sides, then slide two has three images and text on the sides.
IMPORTANT – if the images are small thumbnails the text should fill the blank areas or around the image. The banner should be responsive to the element inside (could be an div). If the image is big the text should go underneath the
image or on the side.
slides left or right
left and right navigation button, as well pagination
Example: http://www.bbc.co.uk - main banner at the top
I had a look on the internet i tried the following:
flexslider - very good, meet all the requirements apart from point 3. but dont know how to make it responsive.
orbit slider - good but flexslider it easier to style.
Note: this banner will not be used on mobile device.
Seems like you didn't get any answers because there's no such thing as a perfect finished solution. It's not difficult to change any of the mentioned sliders and make them responsive IF you know some css. I'd suggest that, depending on how many of these works you want to do, you give it a try. You can find good free tutorials online.
I found this one plugin though, worth a try: http://marktyrrell.com/labs/blueberry/
And some more: http://webdesignledger.com/resources/8-responsive-jquery-slider-plugins
I've been playing around with a gallery similar to that of the iPad's photos app, where you have thumbnails neatly stacked and upon clicking(touching) they fly out in a grid layout. If one gallery/stack is already open when you click another stack, the photos should pile up at their original position before the next set animates out.
I though something like Isotope would be helpful here, but I'm having a real hard time making it stop overwriting itself. Also, I can't quite figure out how to make it seem as if the thumbnails fly out from the "cover image".
I put a simplified version of what I've got so far on JSFiddle.
Any help is greatly appreciated. I feel like I'm in a little over my head here :)
My question is: how do i make it seem as if the thumbnails fly out from the "cover image"?
You could have an absolutely positioned DIV with a full-size image inside.
Initially, position the div and scale the image such that it perfectly overlaps with the thumbnail.
Then, animate the location and size of both to bring them to the center of the screen at the size you want.
I just need to display the images in the very center of the page. The images will be different widths but should still be centered. I have custom arrow pointers and I want the other images to be hidden while the other fades out and a new one in.
I've found jquery cycle and stuff but I couldn't center the slideshow to the center of the page for some strange reason.
Any advice?
What plugins can I alter (just replace images) to get what I want?
http://www.proglogic.com/learn/javascript/lesson10.php
not sure if you are still looking for this, as its been awhile since your post - but this is a very simple slideshow using javascript and a table. the image is displayed with "previous" and "next" links below, which can of course be changed to whatever you want. the only possible issue is that it uses html tables which are frowned upon (unless completely necessary). it is however, very easily center-able using css. good luck!
Checkout Anything Slider. That seems to be what you are looking for.