How to make a Content Slider like this structure - javascript

Is this structure reasonable to achieve?
By lining up li elements and hiding the content that exceed the parent div?
Sorry for my poor English, I hope my figure can make you understand what I' m trying to say...

Hey I'm looking for fast, lightweight javascript slider.
Owl-Carousel
A lightweight Javascript plugin. I'm using this for my project now
http://owlgraphic.com/owlcarousel/
jQuery lightSlider
I've never use this, but looks awesome with thumbnail.
http://sachinchoolur.github.io/lightslider/

Related

Jquery or javascript: dragging an image to a certain position to change pages

im making a one page layout of a website, i would like to ask if it is possible to use a draggable image to a certain position to change pages?
im not that good with jquery and js so please bear with me.
check this:
example
if this like you want... it's a parallax. so you can try to find a tutorial to do this.
best regards,

Adding thumbnails to basic jQuery slider

I have used the Basic jQuery slider which can be found at http://www.basic-slider.com/ and it works in my site. I am pretty new to jQuery but understand HTML and CSS pretty well. I was just wondering, is there a way to make it so rather than the numbers underneath the images, it comes up with thumbnails of the images above it?
My code is pretty much exactly the same as the code given but altered to my own website.
I'm bad at explaining things but I hope I've explained myself properly at hope somebody can help!
Thanks
You could just use an image tag and add the images between each anchor tag where the site you linked has 1,2,3.

Single Page Web Design w/ Dynamic Navbar

Quite frankly I don't even know how to describe what I'm attempting to do. "Dynamic Navbar" is the best I have come up with.
Basically, I've created a single page website with 4 "pages" (sections) using purely HTML and CSS (as well as jQuery for smoothScroll).
I want the highlighted link on the navbar (the current page) to change when users scroll between pages. I've seen this done before, such as on this site:
http://thinkpixellab.com/
I have little-to-no experience with JavaScript and jQuery and I'm really not sure where to start. If anyone could point me in the right direction I would greatly appreicate it!
What you're looking for is ScrollSpy. It's made for Mootools originally, I think: Scrollspy
Bootstrap have it as a plugin for their framework: Bootstrap Scrollspy
I found a standalone JQuery plugin for it, though not sure how good it is as I haven't used it myself: plugin
Obviously you could write something yourself, but with not much experience of JS/Jquery I reckon you're better off sticking to a plugin or something.

Looking for a simple fade javascript image rotator

I need a simple image rotator that rotates images by fading, centers vertically and is accepted by most if not all browsers. I however need to be able to customize the arrow images and place them anywhere i like. Anyone know of one?
If I try to visually show you what I need it would look like this.
< -- My back button [ image ] My next button -- >
I use jquery :) I've given plenty of rotators a shot already but they don't accept images of varying sizes or are not customizable.
If all you need is image rotation, why not do it yourself?
It's only a few lines of jQuery and infinitely customizable. :)
Example:
http://jsfiddle.net/jtbowden/UNZR5/1/
I generally like to stick to using this one: http://jquery.malsup.com/cycle/
It can be as simple or as complex as you need, and is highly extensible. They also provide heaps of examples for what can be done with it.
Example with next/previous buttons here: http://jquery.malsup.com/cycle/int2.html
Have you tried http://aviathemes.com/aviaslider/? It is customizable and is amazing.
Use jQuerytools scrollable by flowplayer. Very lightweight, flexible and they offer a CDN link to there js files so you don't have to load it from your server.
Scrollable http://flowplayer.org/tools/demos/scrollable/gallery.html
Make sure to try out all there available scrollable examples.
CDN links can be found at http://flowplayer.org/tools/download/index.html

Mini image browser (like on myfonts.com)

I want to make small image browser like the one used on Myfonts.com (link) in the sidebar under "More fonts like this".
I'm wondering if there is a jQuery plugin that could do that.
I know that this is some kind of carousel, but I couldn't find any with this cool resize function on scroll.
I would suggest you take the jCarousel plugin, as it has a very good base, and modify it to your liking. You could combine it with the jquery ui slider to somehow achieve the same effect as on Myfonts.com.
I did come across something similar although not exactly the same. It might help you figure out how the resizing effect is accomplished. See http://www.eogallery.com/ and http://jquery-ui.googlecode.com/svn/branches/labs/carousel/demo/index.html
As of today I couldn't find any out-of-the-box plugin that does what you are trying to do, but maybe if you build this, you'll post it to the jquery gallery and everyone will live happily ever after :-)

Categories

Resources