jQuery Tutorials, Plugins and Tools

How To Get The X and Y Position of HTML Elements in JavaScript and jQuery

Editorial Team — Wed, 22 Mar 2023 08:02:12 +0000

When developing web applications, it may be necessary to get the X and Y position of HTML elements on the page for a variety of purposes, such as positioning other elements relative to the target element or triggering events based on the element’s location. In this article, we will explore how to get the X and Y position of HTML elements in JavaScript and jQuery.

The Freelance Designer Toolbox

Unlimited Downloads: 500,000+ Web Templates, Icon Sets, Themes & Design Assets All starting at only $16.50 per month

Getting the X and Y Position in JavaScript

To get the X and Y position of an HTML element in JavaScript, we can use the getBoundingClientRect() method. This method returns an object with properties that describe the position of the element relative to the viewport.

Here’s an example of how to get the X and Y position of an element with the ID “myElement” using JavaScript:

const element = document.getElementById('myElement');
const rect = element.getBoundingClientRect();
const x = rect.left + window.scrollX;
const y = rect.top + window.scrollY;

In this example, we first get a reference to the element using getElementById(). We then call the getBoundingClientRect() method on the element, which returns an object with properties such as left, top, right, and bottom. The left and top properties describe the X and Y position of the element relative to the viewport.

Note that the left and top properties returned by getBoundingClientRect() are relative to the top-left corner of the viewport, not the top-left corner of the document. To get the absolute position of the element, we need to add the current scroll position of the window to the left and top values using window.scrollX and window.scrollY, respectively.

Getting the X and Y Position in jQuery

In jQuery, we can use the offset() method to get the X and Y position of an HTML element. This method returns an object with properties that describe the position of the element relative to the document.

Here’s an example of how to get the X and Y position of an element with the ID “myElement” using jQuery:

const element = $('#myElement');
const x = element.offset().left;
const y = element.offset().top;

In this example, we first get a reference to the element using the jQuery selector $('#myElement'). We then call the offset() method on the element, which returns an object with properties such as left and top. The left and top properties describe the X and Y position of the element relative to the document.

Note that the offset() method returns the position of the element relative to the document, not the viewport. If you want to get the position of the element relative to the viewport, you can subtract the current scroll position of the window using $(window).scrollLeft() and $(window).scrollTop(), respectively. Here’s an example:

const element = $('#myElement');
const offset = element.offset();
const x = offset.left - $(window).scrollLeft();
const y = offset.top - $(window).scrollTop();

Like the previous example, we first get a reference to the element using the jQuery selector $('#myElement'), then call the offset() method on the element, which returns an object with properties such as left and top. The left and top properties describe the X and Y position of the element relative to the document.

The, to get the position of the element relative to the viewport, we subtract the current scroll position of the window using $(window).scrollLeft() and $(window).scrollTop(), respectively. This gives us the X and Y position of the element relative to the viewport.

Note that the scrollLeft() and scrollTop() methods return the number of pixels that the document is currently scrolled from the left and top edges, respectively. Subtracting these values from the offset of the element gives us its position relative to the viewport.

Top 50 jQuery Gallery & Image Sliders for 2020

Editorial Team — Wed, 26 Aug 2020 15:00:49 +0000

Since usually the best galleries are created in jQuery, we’ve mainly focused on jQuery type sliders, but there are a few simple CSS galleries as well. This collection has been organized into five main categories so you can easy switch to your preferred section. Before we start, we wanted to tell you that it’s up to you to go for a free or premium solution for your jQuery gallery or slider.

Your Web Designer Toolbox

Unlimited Downloads: 500,000+ Web Templates, Icon Sets, Themes & Design Assets
Starting at only $16.50/month!

We did find quite a few free quality image solutions, that you will enjoy. Of course, with premium resources – there were some galleries that simply blew us away.

Table of Contents

Just go through the collection and find the best image solution for your needs. If it’s a personal project, surely you will not want to spend any money. But on other hand, if it’s a freelance job, maybe it’s worth spending a little money to really leave an impact on your client and save lots of time at the same time!

I guess what I am suggesting is to always look at how much time it takes for you to modify, install, or setup a free solution. If you aren’t as skilled or it’s time consuming – definitely look into pre-made code and inexpensive but high-quality tools like these.

jQuery Image Slideshows

Below you will find all the best jQuery slideshows. Usually slideshows are used on top of the website to present the most important parts in the most fashionable way.

1. AviaSlider

AviaSlider is a very flexible and easy to use image slideshow plug-in built with jQuery. It has a set of really unique transitions that I have not seen anywhere else, as well as some basic transitions.

It comes with an image pre-loader so the slider starts working only when images are loaded and ready to be presented. No clumsy animations with half loaded images.

To see how it works live, here is a demo preview.

2. Jssorr (Free)

Jssor Slider is a touch swipe image slideshow with 360+ JavaScript slideshow effects. When you touch Jssor Slider, it will freeze the animation and swipe slides to the direction that your finger moves to.

There are more than 360 different effects, you can check all of them here. My own favourite slideshow effects are the simple fade and carousel slider.

3. S3Slider (Free)

S3Slider a jQuery Slideshow with three different features and displaying sides. You can easily adjust the size of the slider and delay the change speed. Oh, and it comes with a really good documentation, too.

4. Camera Slideshow (Free)

Camera slideshow is a jQuery plugin, that can also be used as a WordPress plugin.

It comes with 33 build-in themes, but you can be creative too, because slideshow has a CSS file included, where you can customize the parts you want.

You can easily implement HTML objects, videos, and captions. One downside is that this slideshow is based on a project called Diapo, that is no longer supported. But still, it has been tested on all major browsers.

Check the live demo here.

5. Sequence JS (Free)

Sequence JS is a JavaScript slideshow based on a CSS framework. It’s meant to be used for creating sliders, banners, presentations and other step-based applications.

If free pre-built themes aren’t enough for you, check out their own theme shop. You can also simply order your custom-made theme. But as I look at it, you really do get all you need in the free version, plus there are quite a bit free themes available.

6. jQuery Banner Rotator / Slideshow

This is a jQuery banner rotator plugin featuring multiple transitions. The thumbnails and buttons allow for easy navigation for your banners/ads. The banner rotator is also re-sizeable and configurable through the plugin parameters.

7. Slide JS (Free)

Slide JS is a jQuery plugin that is responsive, has touch support, easy setup, and CSS3 transitions. It’s great to be displayed as a starting page of your website, and it is free. It also has full documentation, check the live preview on their home page.

8. Slideshow 2 (Free)

Slideshow 2 is a JavaScript class for Mootools 1.2 to stream and animate the presentation of images on your website. Please visit their website for a full feature list.

9. JavaScript TinySlideshow (Free)

This dynamic JavaScript slideshow is a lightweight (5kb) and free image gallery / slideshow script.

You can easily set it to auto-display the images, set the scroll speed, thumbnail opacity or to disable thumbnail slider. I wanted to include it in this collection because it is so lightweight. Click here to download this slideshow and see a live preview.

jQuery Image Galleries

In this section you will find Image Galleries. They are best suitable for portfolios, but can also be used in blogs. So let’s dig in.

10. Galleria

Galleria is a JavaScript Image Gallery. It’s built so that it simplifies your process of creating a beautiful image gallery. You don’t have to be a programming expert to use it. Just a few lines of code, add some pictures, and you’re done.

Galleria has a lot of great tools, which you can use to create your own image gallery. Galleria, you can see in the screenshot, is the free version, which you can customize as you want.

However, if you want to get any of Galleria other designs, you will need to pay for them, find more on their store. These themes are in price range between $9 and $29.

11. Sideways

Sideways Image Gallery is a jQuery plugin with added CSS3 styling. The Gallery is responsive and features full-screen images with different modes and custom scrollbars. It is a modern and eye catching image gallery.

This one is the most suitable for photography portfolio showcasing, because it can really give the right credit to their work.

As if it wasn’t good enough, it’s also free to use. Check out the live preview here.

12. Visual Lightbox

VisualLightBox is a free wizard jQuery program that helps you easily generate web photo galleries. It is based on famous LightBox2 script. In a few clicks you can create breathtaking galleries without writing a single line of code.

On their website they offer a lot of templates, that can be used for variety of purposes. It is the most suitable for travel agencies, adventure blogs, and work portfolio websites.

13. TripTracker

The TripTracker slideshow is a lightweight JavaScript image viewer with an animated slideshow feature. It does exactly what it says that it does. There are no extra options, it is a simple photo viewer. Very suitable for articles.

Click here to try it out.

14. NoobSlide

NoobSlide has 8 different examples of how to view your images using MooTools. Unfortunately, there isn’t any documentation, but it is a very easy to use gallery and worth checking out.It can be used as a showcase on a travel blog or even a portfolio.

15. PrettyPhoto

Pretty Photo is a jQuery Lightbox clone. Pretty similar to original Lightbox with few added features and full documentation. It is easy to setup and very flexible.

This plugin supports videos, Ajax, and iframes. It can be used for single photos or galleries. Galleries can also have mixed content. It is very suitable for different types of blogs.

For a demo and download, visit them here.

16. Unite Gallery

Unite Gallery is a modern gallery that uses jQuery. It is modular designed, with customization in mind. You can also create your own theme with ease.

This gallery is fully responsive. It offers 9 different skins and is fully documented. You can download it for WordPress, Drupal, PrestaShop, OpenCart and Joomla.

This gallery is suitable for photography showcases or Restaurant menus. It is free to use, as it is released under the MIT license. All in all, it’s a great addition to the image-packed websites.

You can see it in action here.

17. Auto Generating Gallery

Auto Generating Gallery doesn’t actually take the pictures for you, but it’s pretty smart just the same. This gallery won’t even create the thumbnails for you. What it DOES, is build itself dynamically from your directory of images. So when you want to add new photos, you simply drop the new photo and thumbnail in the directory and you are done! Removing photos just means removing the photos from the image directory. This gallery use PHP for it’s web wizardry. You can find a complete tutorial and demo here.

18. HighSlide JS

Highslide JS is an open source JavaScript software, offering a Web 2.0 approach to pop-up windows. It streamlines the use of thumbnail images and HTML pop-ups on web pages. You can use it asa thumbnail viewer or scrolling HTML content holder.

A live preview of its functionality can be found here.

19. Flat-styled Polaroid gallery

Polaroid gallery is available as a jQuery plugin. It takes the vintage look of Polaroid pictures to the next level.

Strengths of Polaroid Gallery include that it is designed with responsive and flat design in mind. Polaroid Gallery also offers shuffle transition and content holders if you need it. The images can flip and show the back as well.

This gallery is a good choice for travelers or bloggers who want to show off their last adventure.

Make sure to see it in action here.

jQuery Image Sliders

This section is dedicated to all the best and most beautiful sliders, both premium and free. They do a similar job as the Slideshows, but can emphasize content holders.

20. Touch Enabled RoyalSlider

Royal Slider is a jQuery image gallery and more. This slider can be used as an image slider, slideshow, HTML content slider, gallery, banner rotator, video gallery carousel, or just as a presentation. Options are limitless. This full-featured slider is also available as a WordPress plugin.

It has built-in animated captions, supports touch for mobile devices, and is fully responsive. This is a must have jQuery image slider. Check out the live preview here.

21. LayerSlider

LayerSlider is a premium WordPress plugin for creating beautiful image galleries, content sliders, and amazing slideshows with unbelievable effects.

LayerSlider comes with 13 built-in skins. It has more than 200 2D and 3D slide transitions and 3 types of navigation. LayerSlider also offers support for mobile devices and multiple layouts.

You can add any content, from images, text, custom HTML, YouTube video, and Vimeo video to HTML5 self-hosted multimedia content.

By allowing you to build semantic markup with custom attributes that search engines can index easily, it is also SEO friendly.

See it for yourself here.

22. UnoSlider

UnoSlider is a image slider that comes as a WordPress and jQuery plugin. It has unlimited transition animations.

This image slider is fully responsive and is also compatible with older browsers. Layers are very well animated with lots of customization options. Setup and use are simple.

UnoSlider features more than 30 animation options, per-slide options and is easy to theme. This slider is also equipped with public API, image pre-loader, and has the ability to hold multiple sliders on one page. HTML content can be shown as well. Choose from 12 pre built themes and more than 40 transitions options.

You can see a demo of this amazing image slider here.

23. Master Slider

Master Slider is a high value and quality-designed image and content slider. It is available as a jQuery and WordPress plugin. And it also has a free version.

This slider has everything that you need to build eye catching image and content sliders. It’s fully responsive and can work on any screen or any device. You can choose from 6 different interactive transitions and 25 pre-built templates.

This slider offers touch swipe navigation, animated layers, thumbnails, and tabs. Master Slider is also equipped with smart preloading of images.

24. Wow Slider

Wow slider is actually a slider for non-coders. It offers a drag and drop menu, that you use to create an image slider for your website.

In the core Wow slider is a jQuery image slider, but it can also operate without jQuery. It can be as light as you want it to be.

The drag and drop creator can generate using an HTML page, or WordPress or Joomla plugin. You can choose from 25 different transitions and it’s free to use.

Main features are:

Fully responsive
Highly customisable
Touch swipe navigation
All browser support
SEO friendly

These are just a few main characteristics. For a full list and live demo check their website.

25. Slider Revolution

Slider Revolution is a responsive and full-width slider with must-see-effects and SEO friendliness built-in. See the heaps of custom transitions and animations for each object on the page! Customize this slider with their convenient drag & drop back-end to suit your needs.

This plugin features tons of unique transition effects, an image pre-loader, video embedding, auto-play that stops on user interaction and lots of easy to set up options to create your own effects. Slider Revolution can be purchased as a WordPress, Drupal, PrestaShop, Magento OpenCart and jQuery plugin.

Worried about coding skills? Slider Revolution has Video Support which is easy to follow. No advance coding skills required, easy as cooking bacon. Ah…what am I saying? Just check for yourself.

26. Accordion Slider

Accordion Slider is a fully responsive jQuery based slider. It’s available also as a WordPress plugin. There is almost nothing you can’t do with it.

Accordion Slider comes with animated layers and smooth animations. You don’t have to compromise with the design, as the slider has touch support for the best possible user experience.

Pagination on this slider is unique, because you can set the number of panels visible per page. The layout is fully customizable.

Because it has a lazy loading feature, the images can be loaded only when they are viewed. You can also set high-resolution images to be loaded only on high PPI screens, as it has support for Retina screens.

Some additional features are available for the WordPress plugin.

27. Fotorama image slider

Fotorama image slider is simple but at the same time very powerful. You can use it for jQuery or for WordPress and Ruby on Rails . To help you setp Fotorama, they also have a video tutorial.

It is a simple way to show your pictures or images, but powerful enough to blow you away. It’s free to use. Check it out here.

28. All in One Slider

All in One slider is a jQuery slider and comes with five different ways to help you create a beautiful Banner rotator, Thumbnails Banner, Banner with Playlist, Content Slider, and Carousel.

It’s an advanced slider, that allows you to create powerful slides with animated text and HTML tags. This is a powerful tool that provides you with everything you need in development of a website to show your products or images.

All in One slider is fully responsive and touch screen supporting image slider. All in One slider offers 16 different transitions and animated text. Supports all major browsers and is a award winning product.

See it for your self. Here is a live preview.

29. Blueberry Image Slider

Blueberry image slider is a jQuery plugin, that was developed specifically for responsive web design. Blueberry image slider is an open-source project, based on a 1140px grid system from cssgrid.net. It’s simple and at the same time an excellent free option.

I’m sure you will like it as much as I do. Check the live preview and download option here.

30. RhinoSlider

RhinoSlider is a jQuery slider that comes with the possibility of customising your version before downloading. This can significantly decrease time spent on setting it up. You can of course download the whole package, but I think the best way is to use the generator.

It is very flexible and offers a lot of options on callbacks and callbefores. You can set it on auto-play or make it stop on hover. Captions are also available and are customisable.

Check for yourselves on their website. It is a great free tool.

31. Slippry

Slippry image slider is a jQuery plugin that uses CSS3 transitions and HTML5 elements. It can be as simple or as complex as you want it to be.

Because the CSS and Sass files are included, you can let your imagination free and style it as you want it. Slippry does its job best at the top of the home page. With captions it can serve as good presentation of a company.

Dont believe us, check it out here for full documentation and a live demo.

32. Un Slider

Unslider is a very simple slider that is based on jQuery. It’s very small but powerful. You can change everything, so it works and feels like you want.

Unslider is really the simplest slider I have come across. You really don’t have to be an expert to use this one. Just add a few lines of code, put in images and you have a slick slider for your website or blog.

Their whole site is a one big demo for this slider.

33. Unleash 3

Unleash 3 is another jQuery accordion slider on our list. It’s one of the best there is. You have a lot of options and settings to choose from. You can add captions and controls with different styles or add any other content with multiple CSS3 animations.

Main properties are:

Fully responsive
Full screen mode
Ability to choose a slide when page is loaded
Step by step documentation
Touch support
Video support

34. MightySlider

Mighty Slider is everything you need to create an amazing one-directional slider. Mighty Slider can be used as a banner rotator, video gallery, presentation and basic slider. All of this is possible because of a very powerful API. Mighty Slider gives you total control over layout and design.

35. Fullscreen Slit slider

Fullscreen Slit Slider is a jQuery plugin and uses CCS3 animations. Slider can stretch across the whole viewport or be used as slider inside of other context.

Fullscreen Slit Slider is fully responsive and has some unique split screen transitions. With captions it is a great way of representing your cause to the visitors.

Check it out in action. I am sure you will be amazed of what this free slider can do.

jQuery Portfolio, News & Tour Sliders

This section is dedicated to sliders that are particularly designed to showcase portfolios, news, and tours.

36. jQuery Carousel Evolution

jQuery Carousel Evolution is an easy and low cost way to create an eye catching product or team presentation. Yes it’s a premium slider, but it delivers a great value for it’s money.

jQuery Carousel Evolution is a powerful slider that uses HTML markup. It offers 9 different styles for sliders. This slider also supports YouTube and Vimeo video implementation. All major browsers are also supported.

You can check the demo here.

37. Cube Portfolio – Responsive jQuery Grid Plugin

Cube Portfolio is a very cool jQuery plugin with tons of animations. It offers custom captions and plays well with your current HTML and CSS code.

Cube Portfolio provides 30+ options, that gives you complete layout and design control. Slider has fully responsive design and is fully customizable. It uses CSS3 animations and you can choose from 19 starter pack templates. Cube Portfolio is also equipped with a filtering system.

It is best used for vertical sliders, portfolio projects, team members presentation, photography showcasing, or other mosaic grids. Usage is limitless. Cube Portfolio is also available as a WordPress plugin.

Check live preview here.

38. Slideme

This jQuery plugin is great for the top of the website, to present your work or say more about you.

Slideme has got full documentation and a tutorial how to set up your slider, for every type of device individually. Design is fully responsive with CSS3 animations. It is easy to setup and provides a public API.

Slideme is free to use and definitely worth a look. Check out the demo here.

39. PgwSlider

Pgw slider is a jQuery slider,\ that is designed for showcasing your images. This slider is fully responsive. It is lightweight and all-browser compatible. Pgw slider is also SEO friendly.

This slider is very suitable for news or blogging websites as it can show your most recent post or articles.

For full features and a demo slider click here.

40. All Around Content Slider

All Around slider is a multi purpose jQuery slider. You can use it as a carousel or slider. It also supports video. All Around slider offers 6 pre built themes or layouts and ton of options.

Slider is equipped with a drag and move circles option and infinite loop. Besides that, it’s fully responsive with mobile support. Every single image can be magnified and can contain a description, too.

All Around slider is best used as a product showcase or team presentation.

Check live preview here.

41. Lens Slider

Lens Slider is an open-source project and so, fully customisable. Slider uses very simple HTML markup of an unordered list. Images are shown as you can see in the screenshot. No other option is available. Lens Slider is also available as a WordPress plugin and free to use.

The most suitable usage would be for products, services, or ateam presentation.

Check it out here.

42. Gridder

Gridder is an awesome slider for showcasing your work. Gridder kind of mimics Google image search. To view the larger picture you click on a thumbnail and it expands. This is a great way to show a large number of images at the same time.

Gridder is available as a jQuery or Ajax thumbnail previewer. It is an awesome free solution for your next portfolio project.

For jQuery live preview check here. If you want Ajax click here.

43. Barack Slideshow 0.3

Barack Slideshow is an elegant, lightweight slideshow written in JavaScript. This slideshow can operate with vertical, horizontal, and irregular lists. The images are preloaded with MooTool Assets. To keep your code clean, you should check the CSS code. This means changing some parts if needed.

Barack Slideshow can be used as a portfolio showcase, product list, or even for listing your clients.

Here you can find a demo and test different options.

44. jQZoom Evolution

JQ Zoom Evolution

JQZoom is a JavaScript image magnifier, built on top of the popular jQuery JavaScript framework. jQZoom is a great and really easy to use script to magnify parts of your image.

This image magnifier is the most suitable for online stores and restaurants menus.

Find the documentation and demo here.

45. Multimedia Portfolio 2

Multimedia Portfolio 2 is a jQuery plugin that can automatically detect the extension of each media file and apply the appropriate player. It supports images and videos. Multimedia Portfolio uses simple HTML markup and it’s easy to use.

This slider is best suitable for showcasing products, services, and even news.

Check out their demo.

46. jQuery Virtual Tour

jQuery Virtual tour is an extension of the simple panorama viewer. This jQuery virtual tour allows you to transform some panoramic views into a virtual tour! It’s a great plugin that is worth looking at.

You can find a demo and download options here.

47.jQuery Vertical News Slider

jQuery Vertical News slider is very useful for websites that want to show some news or marketing campaigns on their sites. It’s responsive and uses CSS3 animations. Vertical News slider also allows you to fully customise the style of the slider.

Check out the live preview here.

48. Multi Item Slider

This gallery is also a tutorial on how to create it on your own. Multi item jQuery gallery was inspired by Apple slider, that shows multiple products at once. It’s fully responsive with a flat design with a variety of effects.

Multi item jQuery gallery is very suitable for online stores for showcasing their products. It comes with simple navigation, as seen in the screenshot. The navigation is intuitive for changing between a variety of categories.

For a live preview click here.

CSS Based Galleries

We have come to our last section, where you will find the best pure CSS Based Galleries. They may not be as popular but are sure worth a try. See it for yourselves.

49. HoverBox Image Gallery

HoverBox Image Gallery is basically a super light-weight (8kb) roll-over photo gallery that uses nothing but CSS. For faster loading it only uses one image for thumbnail and roll-over preview. All major browsers are supported. HoverBox Image Gallery is free to use for your own projects.

It is best used as a photography showcasing for photographers, any type of portfolio and restaurant menus.

Live preview here.

50. CSS Image slider with 3-D transitions

CSS image slider is an experimental project that also includes a full tutorial. For animation purposes it uses CSS and CSS3 techniques with the addition of 3-D effects on transitions. Intended usage is strictly as an image slider.

CSS image slider can be used for product and service showcasing. In my opinion it could do well also as an image slider in a full width article.

Check out the live preview.

51. CSS3 Animated Image Gallery

CSS3 animated image gallery uses CSS3 and HTML5 to render effects. The images zoom in when you hover over them. This enables a more detailed look. If you are interested, you can take a look at the tutorial and create it yourself. Otherwise you can just download the source code.

CSS3 animated image gallery it’s suitable for photography showcases.

52. Filtronio CSS3 Portfolio

Filtronio CSS3 portfolio is a great pure CSS and HTML5 gallery for showcasing your portfolio or even your products.

It’s simple but at the same time a very powerful and professional portfolio gallery. You can choose from 3 different themes. Filtronio CSS3 portfolio also offers animated layers and a category filter. Gallery is clean coded and easy to customize.

Check out the live demo here.

53. Pure CSS3 Image Gallery

This is a simple CSS3 image gallery that creates the effect of a pop up window when you click on the image. It’s suitable for showcasing portfolios on the websites. If you are interested, you can also follow the tutorial to make it by yourself.

Check out the live preview.

54. CSS Lightbox Image Gallery

This image gallery is another pure CSS gallery. It zooms out on images when they’re clicked. You can download the source code, or if you feel like it, go trough the tutorial..

CSS Lightbox image Gallery should be used on a non-scrollable website. However this can be overridden with a single line of JavaScript, that is included at the end of the tutorial. The most suitable usage would be a portfolio showcase.

55. Slidea

And here is a gem of this collection, Slidea. Slidea is a multi purpose content slider. This slider plugin was build on the jQuery, VelocityJS and Animus animation framework. With Slidea there are no animation limitations–you can so much awesomeness with it!

I can try to describe how cool it is, but just check the demo and you’ll understand why I like it so much!

Conclusion

I have to say I really enjoyed researching these plugins. We found amazing sliders that will, hopefully, help you to work on your next project more efficiently. There’s something for every situation here.

There are so many amazing sliders and slideshows that it’s hard to decide what to pinpoint. But in my opinion you should definitely check out Gridder slider, because it’s really amazing what it can do, especially for free, so it’s a win-win situation.

And you definitely should not forget Slidea. Yes it’s a premium slider, but it carries so much value it’s well worth the investment!

If you enjoyed our article, share it with your friends, and tell us if we missed your favorite slider.

Which is your favorite gallery plugin? We would love to hear your experiences!

Editor’s note: this article was last updated August 26, 2020.

The Best jQuery Plugins & Effects That Are Still Useful in 2019

Brenda Stokes Barron — Thu, 07 Nov 2019 14:45:17 +0000

If you’re coding with JavaScript, jQuery should be one of the first things you install. The lightweight JavaScript library optimizes and simplifies core features like Ajax handling, animation, event handling, and HTML document transversal – in other words, it makes working with JavaScript a lot easier.

Many developers have released plugins built on the jQuery framework for free. These can add key features and effects to your website, including autocomplete, file upload, or image zooming.

Ready to install cool effects and awesome jQuery plugins? Here are some of the best libraries you’re sure to love.

Your Web Designer Toolbox

Unlimited Downloads: 500,000+ Web Templates, Icon Sets, Themes & Design Assets
Starting at only $16.50/month!

fancybox

This lightbox plugin can display various types of media in a beautiful darkened popup. Besides images and videos, it also accepts custom content like Google Maps and can resize to fit them. Plus, it’s easily extensible with a little CSS and JavaScript knowledge. It’s free to use in open source projects, or commercially with a license.

jQuery File Upload

If you need to add file upload functionality to your site, this little widget has everything. You can upload any type of file with unlimited file size, and even drop them right into the browser.

fullPage.js

Looking for a quick and easy way to create a one-page, scrolling, full-screen website? All the tutorials are here to help you get this library set up and working, with in-depth explanations for every option. Open source projects can use it for free.

Tiny Slider

This library may be called Tiny Slider, but it includes dozens of demos, each with its own unique functionality. Fixed widget, vertical, even lazy loading sliders; test out each demo until you find the one you want.

Select2

Is the default HTML select box not doing it for you? Select2 implements an easily customizable, extremely extensible dropdown select box including pages and pages of helpful documentation.

Ajax AutoComplete for jQuery

If you need to add an autocompleting text box to your website, this lightweight file is the way to go. It takes up practically no space, yet provides advanced autocomplete functionality.

Flotcharts

This is more than just a simple chart plugin. While it’s easy to use thanks to the API documentation, it also comes with advanced functionality like real-time plotting and beautiful aesthetics.

pickadate.js

Responsive and customizable, pickadate.js makes creating a date or time selection box as easy as installing this lightweight plugin. Check out the API documentation to customize it even further.

jQuery Zoom

Image zooming is no longer a hassle with this jQuery plugin. Install the files and assign it to an image, then hover or click to zoom in. It’s easy as that.

SortableJS

Sortable lists made easy. Drag and drop to reorder lists you define, with features like cloning, multi-list, or image grids included. For a simple concept, this is a pretty complex library.

jQuery Knob

Compatible with mouse, keyboard, and mobile controls, these draggable dials will work on almost any platform. There are all kinds of dials built in that turn and count in various ways.

iCheck

Light, accessible, and supported on most devices and browsers, iCheck is perfect if you need to implement checkboxes or radio buttons. It comes with 6 beautiful skins built in which you can easily customize with CSS.

DataTables

Tables are never easy to deal with, but DataTables makes it a total breeze. Just load it up and put in a single function, and you’ll instantly generate a table on your site. Then you can add pages, search, sorting, and more. Plus, it supports both themes and extensions.

Save Time with jQuery Plugins

With web development, there’s no reason to reinvent the wheel. These jQuery plugins and effects have already done all the work for you. All you need to do is paste some code in, and you’ll be able to enhance your site with shiny new features.

Most of these plugins are totally free to use. Implement them into your sites and extend them for your own designs, and shave off what could have been days of programming work.

Creative Typography Using CSS and Lettering.js

Editorial Team — Sun, 10 Jun 2018 15:04:03 +0000

Typography on websites has become even more popular on the Internet in recent years. In the past, this was ignored, but with the different screens nowadays, this is an essential topic that should be dealt with.

These days, with the options to use Web fonts like Google Fonts and Typekit, you can achieve cross-browser, stunning and high-resolution web texts without worrying the screen sizes.

Your Designer Toolbox
Unlimited Downloads: 500,000+ Web Templates, Icon Sets, Themes & Design Assets

However, with all these available technologies, there’s a key ingredient missing to typographers: Kerning.

Kerning is the process of adjusting the spacing between characters in a proportional font. Thanks to the power of CSS3 and jQuery, it’s now possible to structure a well-designed typography with complete control of the text and animation quickly and easily.

Resources You Will Need to Complete This Tutorial:

Opens Sans (Google Font)
Francois One (Google Font)
McLaren (Google Font)
Candal (Google Font)
Pacifico (Google Font)
Lobster (Google Font)
jQuery Library
Lettering.js
Cloud Background Images (You can choose from any source or create your own)
Time and Patience

What We Will Be Creating

Animated Mask Typography

The Markup

Before we begin, on our HTML file, we will add first the HTML5 doctype and series of links on our head section. This will include our link to the CSS file and Google fonts links followed by our jQuery library file and the Lettering.js plugin.





 Typography

Next, we will add our code to our body section. This will include a container class that has H1 and H2 tags on it. I’ll also add a vintage-line class for our vintage lines on each side of the H2 class.



Awaesome

 Text

The CSS

.container {width: 960px; margin: 0 auto;}

.demo{
color: transparent;
-webkit-font-smoothing: antialiased;
background: url(img/cloudy.png);
background-position: 0px 0px;
background-repeat: repeat-x;
	text-transform: uppercase;
font-size: 167px;
text-align: center;
font-family: 'McLaren';
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
letter-spacing: -8px;
padding-bottom: 40px;
margin-top: 30px;
animation: animatedBackground 20s linear infinite;
-ms-animation: animatedBackground 20s linear infinite;
-moz-animation: animatedBackground 20s linear infinite;
-webkit-animation: animatedBackground 20s linear infinite;
 
}
 

@keyframes animatedBackground {
from { background-position: 0 0; }
to { background-position: 100% 0; }
}
@-webkit-keyframes animatedBackground {
from { background-position: 0 0; }
to { background-position: 100% 0; }
}
@-ms-keyframes animatedBackground {
from { background-position: 0 0; }
to { background-position: 100% 0; }
}
@-moz-keyframes animatedBackground {
from { background-position: 0 0; }
to { background-position: 100% 0; }
}
 

 

h2.demo1 span {
position: relative;
-webkit-transition: all 0.3s ease-out;
font-size: 100px;
font-family: 'Francois One';
text-transform: uppercase;
top: -200px;
color: #1273B5;
text-shadow: 4px 4px 0px #56a8de;
}


h2.demo1 span:hover { top: -216px; }
h2.demo1 .char1 {
display: inline-blocks;
position: relative;
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
-o-transition:all 0.2s ease-out;
-ms-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;}
 
 
.vintage-line1{
width: 215px;

height:79px;
background: url('img/vintage-line.png')no-repeat;
display: block;
 
position: absolute;
right: 760px;
top: 410px;
}

.vintage-line2{
width: 215px;
height:79px;
background: url('img/vintage-line2.png')no-repeat;
display: block;
position: absolute;
right: 379px;
top: 410px;
 
}

The jQuery

For our jQuery code, we’ll add the following script block with the magical.lettering() method:

$(document).ready(function() {
$(".demo1").lettering();
});

Now, the text is easy to manipulate in your CSS using an ordinal .char# pattern. This plugin assumes the basic counting skills, but it’s a pretty fast and easy way to get control over each letter.

Folded Text Typography

The Markup

We will again add the HTML5 doctype and series of links on our head section. This will include our link to the CSS file and Google fonts links followed by our jQuery library file and the Lettering.js plugin.





 Typography

Next let’s add our HTML markup, which is a H1 tag wrap in a class container.


Typography

The CSS

Our CSS will contain all of our elements inside a 960px width container. Notice that I use the nth-child CSS selector. The :nth-child(n) selector matches every element that is the nth child, regardless of type, or its parent.

For this tutorial, we use it to select child elements whose index is odd or even (the index the first child is 1).

To learn more about nth-child selector click here. This will help easily help us to define styles from left and right side of the folded background to create an illusion of a shadow effect.

h1.demo2[class*="word"]{
margin: 0px 10px 0 0 ;
}
	
.demo2 [class*="char"]{
font-family: 'Open Sans';
color: #fff;
font-weight: normal;
margin-top: 60px;
font-size: 90px;
padding: 20px;
background: #1273B5;
display: inline-block;
}
 
 
.demo2 [class*="char"]:nth-child(odd){
-webkit-transform: skewY(-11deg);
moz-transform: skewY(-11deg);
-o-transform: skewY(-11deg);
-ms-transform: skewY(-11deg);
transform: skewY(-11deg);
}
 
 
.demo2 [class*="char"]:nth-child(even){
color: #00e8ca;
background: #346282;
-webkit-transform: skewY(11deg);
moz-transform: skewY(11deg);
-o-transform: skewY(11deg);
-ms-transform: skewY(11deg);
transform: skewY(11deg);
}

The jQuery

For our jQuery code, we’ll add the following script block with the magical .lettering() method but this time, we will select its child element using .children() method.

$(document).ready(function() {
 $(".demo2").lettering("words").children('span').lettering();
});

Simple Header Text Typography

The Markup




 Typography

Next, we will add our code to our body section. All of our elements will be wrapped with a container class. We’ll add a header tag to organize our H1 and H2 tags. Then, on the bottom, we will add our Typography text with an on-hover animation.

div class="container">

Blow your mind
With this design



Typography

The CSS

For the CSS, we will wrap all elements in a 960px width container. We will also play around with the positions of each character span and give it a nice smooth animation on the mouse-over.

.container{width:960px;margin:0 auto; height:900px;}
 
 h1#title{
font-size: 90px;
text-transform: uppercase;
border-bottom: 2px dashed #56a8de;
padding-bottom: 38px;
font-weight: normal;
font-family:'Candal';
text-shadow: 4px 4px 0px #56a8de;
color: #1273B5;
}
 
h1 .char2{margin-right: -6px;} 
h1 .char5{margin-right: -8px;}
h1 .char8{margin-right: -3px;}

 
#tagline{
font-size: 40px;
background:#00e8ca;
font-style: italic;
display: inline-block;
padding-right: 10px;
padding-left: 10px;
top: -142px;
position: relative;
color: #1273b5;
font-family: 'Pacifico';
} 
 
 
h1.typo {
font:80px "Lobster";
text-shadow:#56a8de 4px 4px 0;
position: relative;
margin-top: -215px;
color: #1273b5;
}
 
 
h1.typo span {
display:inline-block;
position:relative;
padding:10px;
-webkit-transition:all 0.2s ease-out;
}
 
h1.typo span:hover {
-moz-transform:scale(1.1);
-webkit-transform:scale(1.1);
}
 
h1.typo .char1 { font-size:120px; position:relative; top:10px; left:-10px; }
h1.typo .char2 { position:relative; top:-15px; left:-8px; }
h1.typo .char3 { position:relative; top:-20px; left:-6px; }
h1.typo .char4 { position:relative; top:-25px; left:-4px; }
h1.typo .char5 { position:relative; top:-30px; left:-2px; }
h1.typo .char6 { font-size:120px; }
h1.typo .char7 { position:relative; top:-15px; left:0px; }
h1.typo .char8 { position:relative; top:-20px; left:4px; }
h1.typo .char9 { position:relative; top:-25px; left:6px; }
h1.typo .char10 { position:relative; top:-30px; left:8px; }

The jQuery

We’ll add the following script block with our magical.lettering() method and select both the class typo and the ID title.

$(document).ready(function(){
$("#title").lettering();
$(".typo").lettering();

});

You can now easily manipulate your CSS using an ordinal .char# pattern.

Final Words

Congratulations! You’ve made it! You can imagine what a pain in the ass it is to have all those spans littering your markup and a nightmare to maintain. Good thing we have this great plugin – Lettering.js and, of course, with the power of CSS3 animation, our typography designs will never be boring again.

Create Smooth Sliding Boxes With CSS and jQuery

Editorial Team — Tue, 09 May 2017 14:16:43 +0000

Here we’re going to create some sliding boxes effects built with jQuery and some CSS. Throughout this tutorial I’ll explain every line of used code with details, Hope you will enjoy this understand it easily.

If you want to follow along with the source files, you can download them by clicking here (*.zip archive). You can also take a look at the demo here.

Your Designer Toolbox
Unlimited Downloads: 500,000+ Web Templates, Icon Sets, Themes & Design Assets

Step 1: Preparing our HTML, CSS & JS files

Create a root folder and choose a name for it, mine is SlidingBoxes.
In the root folder create a HTML file and name index.html, a css file and a js file.
Than create a folder and name it images (this folder will contain the images needed).

Now we are ready for step 2.

Step 2: Preparing the html file structure

First we need to include the files we created in the previous step, into the header part of our HTML.

Let’s begin with the CSS file :

<link rel="stylesheet" type="text/css" href="style.css" />

Now we’ll attach the latest version of jQuery from Google’s AJAX Libraries repository:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

And now the last thing is our JavaScript file :

<script type="text/javascript" src="script.js"></script>

Now our header should look this:

<strong>
</strong>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>

Now we will start with our body elements:

We’re going to create 6 div’s because we will apply 6 different animations.

<div id="top-left" class="wrap">
   <img src="img/back.jpg" />
   <img src="img/front.jpg" class="front" />
</div>
<div id="top-center" class="wrap">
   <img src="img/back.jpg" />
   <img src="img/front.jpg" class="front" />
</div>
<div id="bottom-center" class="wrap">
   <img src="img/back.jpg" />
   <img src="img/front.jpg" class="front" />
</div>
<div id="left" class="wrap">
   <img src="img/back.jpg" />
   <img src="img/front.jpg" class="front" />
</div>
<div id="right" class="wrap">
   <img src="img/back.jpg" />
   <img src="img/front.jpg" class="front" />
</div>
<div id="top-right" class="wrap">
   <img src="img/back.jpg" />
   <img src="img/front.jpg" class="front" />
</div>

Explanation:

I used 6 div’s with different id’s (each id refers to where the animation starts ) and with the same class (wrap class) so we can add some styles to each one with css. Each div contains 2 images : the front and back images. Here is the images I used :

Front.jpg and back.jpg.

Step 3: Let’s add some CSS !

Now head over to your css file, we will begin with wrap class :

.wrap
{
  float:left;
  position:relative;
  width:300px;
  height:150px;
  margin:20px;
  overflow:hidden;
}

To have our images positioned one next the other we have to use the float left technique. I used the a margin of 20px to have some space between our images, next I set a width of 300px and a height of 150px . Also you have to set the position of this element to relative and a hidden overflow so anything that goes below or higher than the height that we put will be hidden.

CSS for Images :

img
{
 top:0;
 left:0;
 position:absolute;
}

We set our images to absolute and their top and left positions to 0.

Step 4: the jQuery

We’re going to start with the jQuery’s main function:

$(document).ready(function(){
 // animation code will be written here
});

Now we are going to add the animation for the first div ( #top-left ) :

$(document).ready(function(){
$('#top-left').hover(function(){
$(this).children('.front').stop().animate({'top' : '150px', 'left' : '300px'}, 500);
 },function(){
$(this).children('.front').stop().animate({'top' : '0px', 'left' : '0px'}, 500);});
 });

Explanation:
When the top-left div is hovered ( in this case $(this) refers to #top-left ) we are going to seek for the front class situated in this div and we’re going to animate it ( We have to set the top to 150px and the left to 300px so our front image can move with a nice effect), the 500 refers to duration. And when the div is not hovered we’re going to set back the top and left positions to 0.

To obtain the other effects you have to change the left and top positions.

Here is all the effects I used :

$(document).ready(function(){
 $('#top-left').hover(function(){
 $(this).children('.front').stop().animate({'top' : '150px', 'left' : '300px'}, 500);
}, function(){$(this).children('.front').stop().animate({'top' : '0px', 'left' : '0px'}, 500);});
 $('#top-center').hover(function(){
 $(this).children('.front').stop().animate({'top' : '150px'}, 500);
 }, function(){$(this).children('.front').stop().animate({'top' : '0px', 'left' : '0px'}, 500);});
 $('#bottom-center').hover(function(){
 $(this).children('.front').stop().animate({'top' : '-150px'}, 500);
 }, function(){$(this).children('.front').stop().animate({'top' : '0px', 'left' : '0px'}, 500);});
 $('#left').hover(function(){
 $(this).children('.front').stop().animate({'left' : '300px'}, 500);
 }, function(){$(this).children('.front').stop().animate({'top' : '0px', 'left' : '0px'}, 500);});
 $('#right').hover(function(){
 $(this).children('.front').stop().animate({'left' : '-300px'}, 500);
 }, function(){$(this).children('.front').stop().animate({'top' : '0px', 'left' : '0px'}, 500);});
 $('#top-right').hover(function(){
 $(this).children('.front').stop().animate({'top' : '150px','left' : '-300px'}, 500);
 }, function(){$(this).children('.front').stop().animate({'top' : '0px', 'left' : '0px'}, 500);});
});

That’s it !

Thanks for following this tutorial. I hope you liked it and could follow it step by step. If you’ve done everything correctly, you should have ended up with something like this.

20 Free jQuery Navigation and Menu Plugins

Editorial Team — Mon, 27 Feb 2017 17:00:37 +0000

jQuery is one of the most powerful tools to enhance your navigation and make it stand out. With jQuery, you can bring together both the creative and usable. This article will cover 55 fresh and superb jQuery plugins that will make your menus look awesome.

With the importance of navigation in mind, let’s start our journey trough our selection and hopefully you will find the one that will suit your needs in your next project.

mb.verticalSlider

jquery.mb.verticalSlider lets you show a long list of elements managing pagination, it can work with elements already in the DOM of your page or load them via Ajax when needed, it also works with a mouse wheel.

Photo Rotator jQuery Plugin

Photo Rotator jQuery plugin is an easy to use jQuery plugin for a web developer to build a JavaScript gallery on their web application. The plugin can be driven by xml. Easy setup and only minimum programming knowledge is needed. Best to showcase your photography.

Slide Down Menu

This is actually a tutorial though you can download the source files. The idea is to make a box with a menu item that slides out, while a thumbnail pops up. We will also include a submenu box with further links for some of the menu items. The submenu will slide to the left or to the right depending on which menu item we are hovering.

Smart Cart 2 – jQuery Sopping Crt Pug-in

Smart Cart 2 is a flexible and feature rich jQuery plug-in for shopping cart. It makes the add-to-cart section of online shopping much easier and user friendly.
It is very easy to implement and only minimal HTML required. The selected items in the cart are accessible as an array of product/quantity pair delimited with ‘|’ on submit form or when checkout event is triggered. Smart Cart 2 have a simple and compact design with tabbed interface to save space.

Flyout Ribbon using jQuery and CSS3

Flyout Ribbon is a simple jQuery plugin for creating a highly customizable flyout ribbon. This plugin is perfect for providing users with a plethora of options in an unobtrusive manner. With one mouse click you can show or hide all developer defined options.This plugin is very light weight and easy to implement.

Easyrpc

iX Framework

iX Framework is a javascript GUI / Javascript Widget consisting of comprehensive components, such as : Grid, Chart, Tree, Window, Panel, Field, Validation, Combo and more.iX Framework is a comprehensive, powerful and affordable professional web framework that removes the boundary between web and desktop application.

Subway Map Visualization jQuery Plugin

This plugin renders unordered lists into a subway map similar in style to the London Underground map. It emphasizes a clean, aesthetic look with curves and proper placement of markers for stations and interchanges. Without any illustration tools, you can quickly go from HTML markup to a complete map visualization of information in a short amount of time. The rendering uses the HTML5 element and works with any browser that supports this element.

Sticky Section Headers

Given the appropriate mark-up structure this plugin keeps headers in place while scrolling, known from the iPhone table view.

Panoscoper

The Panoscoper plugin is made to take any object (including embedded video objects) and wrap them as though they were 360° virtual environments. It has extensive options and can be customized to suit most applications, but is still being heavily developed.

jCrumb

JCrumb is a jQuery plugin for instantly adding breadcrumbs to any webpage without the need to worry about sitemaps, or server side languages. Just add the plugin to every page you want breadcrumbs on, initialize, and you’re done. Can be also be styled with jQuery UI.

Image Hover Move

A simple and practical navigation or featured image jQuery plugin.

Dynamic Navigation Menu

Dynamic menu with scrolling color glide, appropriate for a blog or website which requires a clean modern style and personalization.

jQuery One Page Navigation Plugin

With this plugin you’ll make the page scroll smoothly when the navigation is clicked. It also automatically highlights the correct navigation section depending upon which section is scrolled to.

Demo

Multi-Level Accordion Menu

Supports infinite level of unordered lists, easy to implement, and has been tested in Internet Explorer 6+, Firefox, Safari, and Chrome.

Memu – A simple CSS / JavaScript / jQuery Menu

A small, solid jQuery plugin which is quite easy to use. It’s a menu which can be used with or without jQuery. What’s special about this script is the included plugin jstorage.js (which is some amazing work btw) to store the current item. So if you’re navigating around, the selected item will stay highlighted. This will spare you some server-side code. You can try this one by clicking on the menu item “File -> New”.

Dropp

Dropp is a jQuery plugin which replaces regular dropdown menus (

Notice that we use a semantic data-validate-length-range=”6″. This will be used by our validator jQuery plugin to limit the range of text entered on a specific field. To check on the list of semantics, you can use for this jQuery plugin, you can check here.

Now that we’re done with the login section, let’s move on the registration section. For the registration section, we’re going to wrap everything with a div that has an ID register and a class form-display and class hide. By default, this section will be hidden. And then, again, we will wrap each item with a class of item and use semantics for specific fields.


        Register

By this time, you can get similar look like the image below.

The CSS

For our CSS, let’s start adding the general styles. This will include the style for the body and class container.

body {
  background: url('../img/low_contrast_linen_2X.png');
  color: fff;
  font-family: 'Open Sans';
}
.container{width: 960px; margin: 0 auto;}

Now, let’s style our menu tabs.

.flat-design-form{
  background: #f58020;
  margin: 130px auto;
  width: 400px;
  height: auto;
  position: relative;
  font-family: 'Open Sans';
  -webkit-box-shadow: 1px 1px 2px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow:    1px 1px 2px 0px rgba(50, 50, 50, 0.75);
box-shadow:         1px 1px 2px 0px rgba(50, 50, 50, 0.75);

}
#login {
    padding-bottom: 20px;
}

#register {
    background: #0DA1FF;
    padding-bottom: 20px;
}

#login-tab {
    background: #f58020;
}

#register-tab {
    background: #0DA1FF;
}

span#login_icon {
    width: 16px;
    height: 16px;
    left: 8px;
    position: absolute;
    background: url(../img/login.png)no-repeat;
    display: block;
}

span#signup_icon {
    width: 16px;
    height: 16px;
    left: 110px;
    position: absolute;
    background: url(../img/sign-in.png)no-repeat;
    display: block;
}

.tabs {
  height: 40px;
  margin: 0;
  padding: 0;
  list-style-type: none;
  width: 100%;
  position: relative;
  display: block;
  margin-bottom: 6px;

}
.tabs li {
  display: block;
  float: left;
  margin: 0;
  padding: 0;
  list-style: none;
}
.tabs a {

  display: block;
  float: left;
  text-decoration: none;
  color: white;
  font-size: 16px;
  padding: 15px 30px 15px 30px;
   text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);

}

Next, let’s start styling our forms. This will include the text boxes with their specific type field.

.form-display {
  padding: 0 20px;
  position: relative;
}

.form-display h1 {
  font-size: 30px;
  padding: 10px 0 20px 0;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

form {
  padding-right: 20px !important;
}

form input[type=text],
form input[type=password],
form input[type=email],
form input[type=url]{
  width: 100%;
  outline: none;
  height: 40px;
  margin-bottom: 10px;
  padding-left: 15px;
  background: #fff;
  border: none;
  color: #545454;

   font-family: 'Open Sans';
  font-size: 13px;
}

.show {
  display: block;
}
.hide {
  display: none;
}

For our buttons, we’re going to give it a border on the bottom with a hexa color #1B78B2 to create a nice flat button. Then, we will set its hover and active state.

.button-login{
    display: block;
    background: #0DA1FF;
    padding: 10px 30px;
	font-size: 14px;
    text-align: center;
    border-radius: 5px;
	font-family: 'Open Sans';
	color: white;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  border: 0;
  border-bottom: 2px solid #1B78B2;
  cursor: pointer;
  -webkit-box-shadow: inset 0 -2px #1B78B2;
  box-shadow: inset 0 -2px #1B78B2;

  	-webkit-transition: all 0.6s ease;
	  -moz-transition: all 0.6s ease;
	  transition: all 0.6s ease;
}

.button-login:hover {
  background: #1B78B2;

}

.button-register{
    display: block;
    background: #f58020;
    padding: 10px 30px;
	font-size: 14px;
    text-align: center;
    border-radius: 5px;
	font-family: 'Open Sans';
	color: white;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  border: 0;
  border-bottom: 2px solid #c36518;
  cursor: pointer;
  -webkit-box-shadow: inset 0 -2px #c36518;
  box-shadow: inset 0 -2px #c36518;

  	-webkit-transition: all 0.6s ease;
	  -moz-transition: all 0.6s ease;
	  transition: all 0.6s ease;
}

.button-register:hover {
  background: #fb7100;

}

.button-register:active {
  background: #136899;
}

Afterwards, let’s set up styles for our placeholders. We will use selector and vendor prefixes to target the type of each browser.

::-webkit-input-placeholder {
    font-size: 13px;
    font-family: 'Open Sans';
    color: #545454;
}

:-moz-placeholder {
/* Firefox 18- */
    font-size: 13px;
    font-family: 'Open Sans';
    color: #545454;
}

::-moz-placeholder {
/* Firefox 19+ */
    font-size: 13px;
    font-family: 'Open Sans';
    color: #545454;
}

:-ms-input-placeholder {
    font-size: 13px;
    font-family: 'Open Sans';
    color: #545454;
}

Finally, to make our validation form more lively, we will set up codes for our validation error with CSS3 animation. We will set each item to position relative, style its alert message and push it to the right side of each text boxes. Notice that we use CSS3 transition property to make a smooth effect when showing the error messages.

.item {
    position: relative;
}

.item .alert {
    float: left;
    margin: 0 0 0 20px;
    padding: 3px 10px;
    color: #FFF;
    border-radius: 3px 4px 4px 3px;
    background-color: #ef3030;
    max-width: 170px;
    white-space: pre;
    position: absolute;
    left: -15px;
    opacity: 0;
    z-index: 1;
    transition: .15s ease-out;
}

.item .alert::after {
    content: '';
    display: block;
    height: 0;
    width: 0;
    border-color: transparent #ef3030 transparent transparent;
    border-style: solid;
    border-width: 11px 7px;
    position: absolute;
    top: 5px;
    left: -10px;
}

.item.bad .alert {
    left: 0;
    opacity: 1;
    top: 5px;
    left: 343px;
    font-size: 12px;
    padding: 10px;
}

The jQuery

For our jQuery code for menu tabs, we’re going to put on the code below. This will hide and show the login and registration section using the class show and class hide.

(function($) {
    // constants
    var SHOW_CLASS = 'show',
        HIDE_CLASS = 'hide',
        ACTIVE_CLASS = 'active';
    $('.tabs').on('click', 'li a', function(e) {
        e.preventDefault();
        var $tab = $(this),
            href = $tab.attr('href');
        $('.active').removeClass(ACTIVE_CLASS);
        $tab.addClass(ACTIVE_CLASS);
        $('.show').removeClass(SHOW_CLASS).addClass(HIDE_CLASS).hide();
        $(href).removeClass(HIDE_CLASS).addClass(SHOW_CLASS).hide().fadeIn(620);
    });
})(jQuery);

Next, let’s add the following code to enable the functionalities of our validator jQuery plugin.

      // initialize the validator function
      validator.message['date'] = 'not a real date';
      // validate a field on "blur" event, a 'select' on 'change' event & a '.reuired' classed multifield on 'keyup':
      $('form').on('blur', 'input[required], input.optional, select.required', validator.checkField).on('change', 'select.required', validator.checkField).on('keypress', 'input[required][pattern]', validator.keypress);
      $('.multi.required').on('keyup blur', 'input', function() {
          validator.checkField.apply($(this).siblings().last()[0]);
      });
      // bind the validation to the form submit event
      //$('#send').click('submit');//.prop('disabled', true);
      $('form').submit(function(e) {
          e.preventDefault();
          var submit = true;
          // evaluate the form using generic validaing
          if (!validator.checkAll($(this))) {
              submit = false;
          }
          if (submit) this.submit();
          return false;
      });

Conclusion

That’s it! You’re done! In this tutorial, we’ve created a flat webpage with a smooth animation and validation using CSS3 and validator jQuery plugin. This is not just the jQuery plugin you can use. There are a plenty of jQuery out there but, for me, I find this easy to use with a cool animation for alert messages.

50 Essential jQuery Tutorials & Resources

Editorial Team — Sun, 29 Jan 2017 03:35:15 +0000

From jQuery homepage – “jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.”

jQuery definitely is one of the biggest trends coming in up-to-date designs and the best of all, everything is done without countless code lines. Keeping in mind such aspects I created hopefully pretty complete collection of jQuery sites, tip and trick articles, video screencasts, tutorials, cheat sheets and lot’s more. Took a while to compile and research was really solid. Enjoy as always!

Your Designer Toolbox
Unlimited Downloads: 500,000+ Web Templates, Icon Sets, Themes & Design Assets

Getting Started

1.7 reasons why you really should learn jQuery

2. jQuery Crash Course

Introduction to Jquery, further reading and basics.

Huge Tutorial Series From Beginner To Intermediate User, Tips And Tricks

3. jQuery for Absolute Beginners: The Complete Series : Video Tutorials

Over the course of about a month, ThemeForest released fifteen video tutorials that teach you EXACTLY how to use the jQuery library. You’ll start by downloading the library and eventually work our way up to creating an AJAX style-switcher. Beautiful learning and resource!

4. 10 jQuery Tutorials for Designers by WebDesignerWall

This article contains 10 visual tutorials intended for web designers and newbies on how to apply Javascript effects with jQuery.

5.4 Jquery Easy Tips And Tricks Tutorial

6.jQuery Essentials Presentation at MinneWebCon (102 pages)

Very well written jquery essentials presentation. Really worth the time.

7.12 Useful and Handy jQuery Tips and Tricks

8.Improve your jQuery – 25 excellent tips

Great tips, even some intermediate users could now know few of these.

9.Build An Incredible Login Form With jQuery

In this tutorial, you’ll create a sliding panel, that slides in to reveal more content, using JQuery to animate the height of the panel.

Demo

10.Create a Photo Admin Site Using PHP and jQuery : ScreenCast

11.Building a jQuery-Powered Tag-Cloud

12.WordPress Sidebar Turned Apple-Flashy Using jQuery UI

This tutorial assumes that you have a wordpress engine running on a server that you have access to upload files, download files and browse to.

Demo

13.How to Load In and Animate Content with jQuery

Demo

14.Create a Slick Tabbed Content Area using CSS & jQuery

Demo

15.Styling Buttons and Toolbars with the jQuery UI CSS Framework

Coded real-world examples of themeable buttons and toolbars using the jQuery UI CSS framework, a system of classes developed for jQuery UI widgets that can easily be applied to any plugin, and even static content.

Demo

16.jQuery Slideshows With the Cycle Plugin

The jQuery Cycle plugin allows developers to quickly and easily create a slideshow out of anything contained within a given div element. However, this is more than just your grandmother’s slideshow fade plugin. The jQuery cycle plugin comes with a vast array of transition effects for you to use.

Demo

17. InnerFade with JQuery

InnerFade is a small plugin for the jQuery-JavaScript-Library. It’s designed to fade you any element inside a container in and out.

These elements could be anything you want, e.g. images, list-items, divs. Simply produce your own slideshow for your portfolio or advertisings.

Demo

18.Creating a Dynamic Poll with jQuery and PHP

Demo

19.Setting Equal Heights with jQuery

Demo

20.jQuery Tools: Scrollable

Scroll your HTML with eye candy

Demo

21.jQuery Tools: Tooltips

Demo

22.jQuery Tools: Overlay

Yet another, beautiful image displaying way – similar to popular Lightbox, but this one seems to be more elegant.

Demo

23.jQuery Tools: Expose

Expose is a JavaScript tool that exposes selected HTML elements on the page so that the surrounding elements will gradually fade out. Works like a charm if you want to stand out.

Demo

24.Create an amazing music player using mouse gestures & hotkeys in jQuery: Screencast

Demo

25.Create an Amazon Books Widget with jQuery and XML

Demo

26.Creating a “Filterable” Portfolio with jQuery

This tutorial will show you how to make portfolio “filtering by category” a little more interesting with just a little bit of jQuery.

Demo

27. jQuery Hover Sub Tag Cloud

Demo

28. How To Build Quick and Simple AJAX Forms with JSON Responses

Demo

29. Simple jQuery Spy Effect

jQuery Spy Effect scrolls the list in a beautiful way.

Demo

30. Slider Gallery Tutorial: Screencast

A tutorial explaining how to create a similar effect used to showcase the products on the Apple web site.

Demo

31. Semantic Blockquotes with jQuery

Blockquotes can really assist in making your text visually appealing. Jack Franklin gives us a great tutorial on how to create blockquotes using jQuery. Even beginners to jQuery will be able to learn how to make these blockquotes.

32. Jcrop – the jQuery Image Cropping Plugin

Demo

33. Horizontal Scrolling Menu made with CSS and jQuery

Demo

34. jQuery Sequential List Tutorial

This tutorial will show you how to use jQuery to add a sequent of CSS classes to create a graphical list. The second example will show you how to add a comment counter to a comment list using jQuery’s prepend feature.

Demo

35. How easy to create a slide tabbed box using jQuery

Demo

36. How to Mimic the iGoogle Interface

This tutorial will be showing you how to create a customizable interface with widgets. The finished product will be a sleek and unobtrusively coded iGoogle-like interface which has a ton of potential applications!

Demo

37. jGrowl

jGrowl is a jQuery plugin that raises unobtrusive messages within the browser, similar to the way that OS X’s Growl Framework works.

38. Creating accessible charts using canvas and jQuery

Demo

39. jQuery and Google Maps Tutorial

This tutorial will walk you through how to get started using jQuery inside the Google Maps environment.

Demo

40. How To Create An Amazing jQuery Style Switcher

his tutorial will be showing you how to create a style switcher using jQuery and PHP. The end result will be an unobtrusive & entirely degradable dynamic style switcher which will be quick and easy to implement.

Demo

41. How-To: Reddit-style Voting With PHP, MySQL And jQuery

This tutorial will show you how to create a voting system similar to Reddit with jQuery, PHP and MySQL.

Demo

42. Selecting and Styling External Links, PDFs, PPTs, and other links by file extension using jQuery

This tutorial will explain how to use jQuery to select and style PDFs, PPT, images, and external links all differently using jQuery and CSS.

43.Official Jquery Tutorial Directory

As first add is obvious, but on their official website you can find many tutorials related to mastering Your Jquery skills even in several different languages.

44.LearningJquery

Learning jQuery is a multi-author weblog providing jQuery tutorials, demos, and announcements. They have tutorials for all skill levels, and each entry is categorized by level of difficulty.

45.15 Days Of jQuery

Examples and tutorials to help you learn JQuery – it hasn’t been updated for a while, but still a lot of useful articles you’ll find there.

46.jQuery for Designers

Learn how easy it is to apply web interaction using jQuery – beautiful tutorials and website, if you still can’t find what you need, you can even request a tutorial.

47.Ultimate Jquery List

jQuery Ajax tutorials to jQuery UI examples, you’ve found the ultimate list of tutorials and plugins for jQuery! Everything from Ajax file uploaders to RSS feed plugins, all on one of the longest pages you’ll ever scroll.

48. Bassistance

This blog is about programming (with focus on web applications and JavaScript), music and other stuff the author happens to write about. It’s also the home of several jQuery plugins.

49. Remi Sharp’s Blog

Site with several good tips and articles related to jquery, also the same man behind useful tutorial site – jQueryForDesigners I showcased above.

Online jQuery Cheat Sheets

50.VisualJquery 1.2.6

An online cheat sheet and visual reference to Jquery, where you can find Jquery functions well explained, updated to jQuery 1.2.6. version. While playing with Jquery, this website seems to be a very useful place to visit.

51.jQuery 1.2 cheatsheet wallpaper

The size of wallpaper is 1280×960, two color variations.

52.jQuery 1.2 Cheat Sheet (*pdf file)

53. ColorCharge Jquery CheatSheet

54. UsejQuery

I got great addition to the list from mustardamus – UsejQuery website is inspirational website showcasing all jQuery based sites and regularly updating. Also there’s blog ThisBlog.UsejQuery with several jQuery tutorials You should check out.

55. jQuery User Interface

I don’t know how I missed this one too, but now here it is, many effects you’ll find here already been premade for you with great support.

jQuery UI is an open source library of interface components — interactions, full-featured widgets, and animation effects — based on the stellar jQuery javascript library . Each component is built according to jQuery’s event-driven architecture (find something, manipulate it) and is themeable, making it easy for developers of any skill level to integrate and extend into their own code.

Well, good luck in your learning process and feel free to add another great tutorials, links, tips, tricks and related sites.

http://usejquery.com/

How to Customize the Design of Your jQuery Slider

Editorial Team — Tue, 03 Jan 2017 13:57:05 +0000

jQuery is the most popular JavaScript framework used for sliders. A lot of jQuery sliders can be categorized based on the techniques used for sliding. The following are some common and trending techniques used by developers.

Layered Sliders – This is the latest addition to sliders with parallax effect.
Fade In/Out Sliders – These types of sliders do not have controls. Content just fades away one by one.
Banner Rotators – These sliders rotate in a circular path.

There are many other types of techniques as well. Each type of slider is suited for a different purpose and location on your website. Hence the designer has to carefully choose sliders for different locations.

Your Web Designer Toolbox

Unlimited Downloads: 500,000+ Web Templates, Icon Sets, Themes & Design Assets
Starting at only $16.50/month!

Even on our personal sites we create sliders with large dimensions to show products, sliders for displaying our project portfolio and small sliders to display featured or popular posts on a blog. So there is every chance that we might include more than one slider in a website. In the next section I’ll explain why multiple sliders can be a real pain for a designer or developer.

Source Files Download

Disadvantages of Using Multiple jQuery Sliders

As I mentioned earlier, different sliders provides different effects and different layouts. Web designers will be prompted to include the slider with best effects for different locations. There are many drawbacks to using multiple different sliders on a single web page.

Each slider will have a set of script and CSS files. Increasing the number of scripts and CSS files will slow your site loading time, which will affect SEO.
Different sliders may require different versions of jQuery. Hence jQuery files will be duplicated.
It’s possible to have conflicts in codes with other sliders.

Considering the above points, it’s better to use one slider throughout your website. It’s possible to create different designs and features using the same slider. All you have to do is pick a flexible slider and have some knowledge of jQuery and CSS to customize it. I’ll be using Rhino Slider throughout this tutorial since it is one of the most flexible sliders available.

Introduction to Rhino Slider

Rhino Slider is a jQuery Slider dual licensed under the MIT or GPL Version 2 licenses. You can download and get more information here. Following image shows the default view of Rhino Slider.

I have explained the Rhino Slider components and how it can be used in my tutorial How to Create a Multi-Step Form Using RhinoSlider. You can use it to get a better understanding about how it works. In this tutorial I’ll be explaining how to create different layouts and different functionality with a single slider.

Designing Custom Navigation for the Slider

Navigation is one important part of a slider. Even though sliders can be created to slide automatically in specified intervals, its preferable to provide controls for the user to go through them at their own speed. Generally Next and Previous buttons are provided in most sliders. Rhino Slider, which I am using for this tutorial, contains a numbered navigation similar to pagination.

We can create different designs for navigation pretty quickly and make the slider look completely different. I’ll show you how to change the basic styles of navigation. So lets get started.

Identifying Control Buttons

There are 3 navigation buttons in Rhino Slider for Previous Slide, Next Slide and Pagination. These components are provided with specific CSS classes so that we can identify them easily.

Previous Slide – rhino-prev
Next Slide – rhino-next
Pagination – rhino-bullets

Now, have a quick look at the image below to get an idea about how we are going to change the design.

Step 1 – Designing Prev/Next Controls

As you can see, prev and next buttons are given different images to the original one with black background. Also, positioning of the controls has been changed to show them in the middle instead of bottom. So let’s discuss the necessary changes to main CSS file.

.rhino-btn {
	background:url(../img/rhinoslider-sprite.png) 0 0 no-repeat;
	z-index:10;
	display:block;
	text-indent:-999%;
	-webkit-user-select:none;
	-moz-user-select:none;
	user-select:none;

        /* Modified Styles */
	width:30px;
	height:25px;
}

.rhino-prev, .rhino-next {/* Modified Styles */ bottom:150px; }

.rhino-prev {
         /* Modified Styles */
	 background: url("../img/prev-arrow.png") no-repeat scroll 13px 10px #000000;
         padding: 10px 5px;
         left : -45px;
}

.rhino-next {
        /* Modified Styles */
	background: url("../img/next-arrow.png") no-repeat scroll 15px 10px #000000;
        padding: 10px 5px;
        right:-45px;
}

.rhino-prev:hover { /* Modified Styles */}

.rhino-next:hover { /* Modified Styles */}
.rhino-bullets:before, .rhino-bullets:after {
	position:absolute;
	display:block;
	left:-16px;
	content:' ';
	width:16px;
	height:26px;
	/* Removed Style */
        /* background:url(../img/rhinoslider-sprite.png) -224px 0 no-repeat; */
}
.rhino-bullets {
	position: absolute;
	bottom: -3px;
	margin:0 0 0 -50px;
	z-index: 10;
	background: #fff;
	padding:0;
        /* Modified Styles */
        left: 45%;
}
.rhino-bullets li {
	float:left;
	display:inline;
	/* Modified Styles */
	padding:10px;
	background :#000;
	/*margin:0 2px;*/
}
.rhino-bullets li a.rhino-bullet {
	display: block;
	width: 16px;
	cursor: pointer;
	background: white;
	font-size: 10px;
	text-align: center;
	padding: 6px 0 5px 0;
	color: #333;
	text-decoration:none;
	-webkit-user-select:none;
	-moz-user-select:none;
	user-select:none;
        /* Modified Styles */
	background:url("../img/pagination.png") repeat scroll 0 0 #0C1C28;
        height: 3px;
}

.rhino-bullets li a.rhino-bullet:hover, .rhino-bullets li a.rhino-bullet:focus {
	color:#999;
	/* Removed Style */
        /* background:#eee; */
}

.rhino-bullets li a.rhino-bullet.rhino-active-bullet {
	color:#fff;
	/* Removed Style */
        /* background:#5cd4e8;  */
        /* Modified Style */
	background-position:0px -14px;
}

Once you apply these styles, the slider will change its look to the design provided in the image. I have mentioned the styles which have been changed to achieve the new design. Now you can see how easy it is to create new designs.

Designing Preview Images for Slider

In the previous section, I explained how to use navigation controls and customize the layout. In this section we’ll try a bit of more advanced code to show preview images of the slider in place of navigation numbers. We will be using a combination of CSS and jQuery for this section.

So we have to remove the circular image used for pagination and increase the dimensions of navigation bullets to show the preview image. Let’s take a look at the CSS code first. All the changes from the original CSS file can be found in code comments.

.rhino-bullets {
	position: absolute;
	bottom: -3px;
	z-index: 10;
	background: #fff;
	padding:0;
        /* Modified Styles */
        bottom: -70px;

        /* Removed Styles
           left: 45%;
	   margin: 0 0 0 -50px;
        */

}

.rhino-bullets li {
	float:left;
	display:inline;
	/* Modified Styles */
	padding:1px;
	background :#000;
	/*margin:0 2px;*/
}
.rhino-bullets li a.rhino-bullet {
	display: block;
	cursor: pointer;
	background: white;
	font-size: 10px;
	text-align: center;
	padding: 6px 0 5px 0;
	color: #333;
	text-decoration:none;
	-webkit-user-select:none;
	-moz-user-select:none;
	user-select:none;

        /* Modified Styles 	*/
        height: 55px;
        width: 102px;
        padding: 0;
        border:5px solid #eee;

        /*  Removed Styles
		background:url("../img/pagination.png") repeat scroll 0 0 #0C1C28;
         */

}
img{
max-width:100%;
}

Once you apply the above CSS code the preview will look like the following.

Let’s play with some jQuery code to generate the preview images in place of numbers in bullets.

$('#slider li').each(function(){
	var image_src = $(this).find("img").attr("src");
	var panel_id = $(this).attr("id");

	$('.rhino-bullets li').find("#"+panel_id+"-bullet").html("<img src='"+image_src+"' />");
});

First we traverse through all the li elements inside slider using jQuery each function.
You may have noted that li elements for slider images have the ID as rhino-item0,rhino-item1 etc., and the respective pagination bullet as rhino-item0-bullet, rhino-item1-bullet.
So we get the image src using the src attribute and get the ID of li elements above the image.
Then we find the respective bullet not using the ID and assign the image to the preview section.

Now you will be able to see the preview images as shown in the screen below.

You can see how easy it is to change the designs and functions. Previewing images like this is not the most optimized way since it scales images. But its very useful in certain situations.

Slider with Vertical Tabs

Lets see how we can convert the default slider into a slider with tabbed navigation on the left side. You can take a look at the final output of this section using the following screen.

The following is the necessary changes you need to make to the default CSS file in order to customize the design.

.rhino-bullets {
    background: none repeat scroll 0 0 #FFFFFF;
    left: -136px;
    margin: 0 0 0 -50px;
    padding: 0;
    position: absolute;
    z-index: 10;

    /* Removed Styles
    bottom: -3px; */

    /* Added Styles */
    top: -3px;
    border:1px solid #A7A5A5;

}

.rhino-bullets:before, .rhino-bullets:after {
    position:absolute;
    display:block;
    left:-16px;
    content:' ';
    width:16px;
    height:26px;

    /* Removed Styles
    background:url(../img/rhinoslider-sprite.png) -224px 0 no-repeat;
    */
}
.rhino-bullets li {
    margin: 0 2px;

    /* Modified Styles */
    display: block;
    border-bottom: 1px solid #eee;

    /* Removed Styles
    float: left;*/
}

.rhino-bullets li a.rhino-bullet {
    -moz-user-select: none;
    background: none repeat scroll 0 0 white;
    color: #333333;
    cursor: pointer;
    display: block;
    font-size: 10px;

    text-align: center;
    text-decoration: none;

    /* Modified Styles */
    height: 50px;
    padding: 5px;
    width: 170px;

}
.rhino-bullets li img{
    width:75px;
    height: 50px;
    float: left;
}

.rhino-bullets li p{
    font-family: helvetica;
    font-size: 12px;
    font-weight: bold;
}

Apart from the thumbnail images we can also add a short title or caption in front of the header. You have to define the captions in a JavaScript array as shown in the code below.

var info = ["Image Tagging","Rhino Slider","Tweet Book","Reward Tweet","Sliding Menu"];

                $('#slider li').each(function(index){
                    var image_src = $(this).find("img").attr("src");
                    var panel_id = $(this).attr("id");

                $('.rhino-bullets li').find("#"+panel_id+"-bullet").html("<img src='"+image_src+"' /><p>"+info[index]+"</p>");
});

I have added the caption using the JavaScript array while traversing through pagination bullets.

How to Use the Designs in Single Page

In the previous 3 sections I showed you how to create different designs and functionality using the same slider. We changed the main CSS file of the Rhino Slider, but when we use more than one slider inside a single page we cannot change style the way we just did. So we have to find alternative methods to specify different styles for same classes and elements.

First we have to provide different IDs for slider containers as shown below and initialize the Rhino Slider separately.

<ul id="slider1" class="slider">
                <li><img src="img/slider/1.jpg" /></li>
                <li><img src="img/slider/2.jpg" /></li>
                <li><img src="img/slider/3.jpg" /></li>
                <li><img src="img/slider/4.jpg" /></li>
                <li><img src="img/slider/5.jpg" /></li>
            </ul>

            <ul id="slider2" class="slider">

                <li><img src="img/slider/4.jpg" /></li>
                <li><img src="img/slider/5.jpg" /></li>
                <li><img src="img/slider/1.jpg" /></li>
                <li><img src="img/slider/2.jpg" /></li>
                <li><img src="img/slider/3.jpg" /></li>
            </ul>

Then we have to assign a unique class to the bullet navigation list of each slider container. The following jQuery code will add the class to the navigation bullets.

$('#slider1').parent().addClass("slider1");
$('#slider2').parent().addClass("slider2");

Each design will have its own styles for each class. So prefix all the modified styles with the class relative to the slider. Consider the following example.

.slider1 .rhino-bullets {
	position: absolute;
	bottom: -3px;
	z-index: 10;
	background: #fff;
	padding:0;
        /* Modified Styles */
        bottom: -70px;

        /* Removed Styles
           left: 45%;
	   margin: 0 0 0 -50px;
        */
}
.slider2 .rhino-bullets {
	position: absolute;
	bottom: -3px;
	margin:0 0 0 -50px;
	z-index: 10;
	background: #fff;
	padding:0;
        /* Modified Styles */
        left: 45%;
}

In the above example 2 sliders have different styles for the rhino-bullets class. So prefix it with your slider class. Follow the same process for every other styles which is not common to all sliders.

So we have created a few slider designs and learned how to customize a slider. It’s time for you to create your own customized design for the slider. All are welcome to share links or images to your customized version of Rhino Slider.

jQuery Tutorials, Plugins and Tools

How To Get The X and Y Position of HTML Elements in JavaScript and jQuery

The Freelance Designer Toolbox

Getting the X and Y Position in JavaScript

Getting the X and Y Position in jQuery

Top 50 jQuery Gallery & Image Sliders for 2020

Your Web Designer Toolbox

jQuery Image Slideshows

1. AviaSlider

2. Jssorr (Free)

3. S3Slider (Free)

4. Camera Slideshow (Free)

5. Sequence JS (Free)

6. jQuery Banner Rotator / Slideshow

7. Slide JS (Free)

8. Slideshow 2 (Free)

9. JavaScript TinySlideshow (Free)

jQuery Image Galleries

10. Galleria

11. Sideways

12. Visual Lightbox

13. TripTracker

14. NoobSlide

15. PrettyPhoto

16. Unite Gallery

17. Auto Generating Gallery

18. HighSlide JS

19. Flat-styled Polaroid gallery

jQuery Image Sliders

20. Touch Enabled RoyalSlider

21. LayerSlider

22. UnoSlider

23. Master Slider

24. Wow Slider

25. Slider Revolution

26. Accordion Slider

27. Fotorama image slider

28. All in One Slider

29. Blueberry Image Slider

30. RhinoSlider

31. Slippry

32. Un Slider

33. Unleash 3

34. MightySlider

35. Fullscreen Slit slider

jQuery Portfolio, News & Tour Sliders

36. jQuery Carousel Evolution

37. Cube Portfolio – Responsive jQuery Grid Plugin

38. Slideme

39. PgwSlider

40. All Around Content Slider

41. Lens Slider

42. Gridder

43. Barack Slideshow 0.3

44. jQZoom Evolution

45. Multimedia Portfolio 2

46. jQuery Virtual Tour

47.jQuery Vertical News Slider

48. Multi Item Slider

CSS Based Galleries

49. HoverBox Image Gallery

50. CSS Image slider with 3-D transitions

51. CSS3 Animated Image Gallery

52. Filtronio CSS3 Portfolio

53. Pure CSS3 Image Gallery

54. CSS Lightbox Image Gallery

55. Slidea

Conclusion

The Best jQuery Plugins & Effects That Are Still Useful in 2019

Your Web Designer Toolbox

Save Time with jQuery Plugins

Creative Typography Using CSS and Lettering.js

Your Designer Toolbox Unlimited Downloads: 500,000+ Web Templates, Icon Sets, Themes & Design Assets

Resources You Will Need to Complete This Tutorial:

What We Will Be Creating

Animated Mask Typography

The Markup

Awaesome

Text

The CSS

Your Designer Toolbox
Unlimited Downloads: 500,000+ Web Templates, Icon Sets, Themes & Design Assets

Your Designer Toolbox
Unlimited Downloads: 500,000+ Web Templates, Icon Sets, Themes & Design Assets

Your Designer Toolbox
Unlimited Downloads: 500,000+ Web Templates, Icon Sets, Themes & Design Assets