Ether Grid Slider jQuery Plugin

Name: Ether Grid Slider jQuery Plugin
SKU: 8240
Price: 7.00 USD
Availability: InStock
Rating: 2 (1 reviews)

4.09

Expert ScoreRead review

$7.00

Buy Now

Added to wishlistRemoved from wishlist 0

Add to compare

232 sales

LIVE PREVIEW

Category: Javascript Tags: autoplay, columns, customizable, Ether, fluid, Gallery, Grid, javascript, jquery, Plugin, Responsive, Slider, slideshow

Ether Grid Slider jQuery Plugin

Ether Grid Slider Joomla Plugin Review

Introduction

Effective grids and sliders are essential components that can elevate the user experience of website or web application. Ether grid slider is a jQuery plugin designed from the ground up to transform any data into functional grids and sliders. With its advanced options and customizability elements, it is an ideal soluiton for creating engaging dynamic content.

**Review

Functionalities

Ether Grass Slider offers a wide range of remarkable functionalities, including:

Options to customize navigation arrows location and styles
Ability to disable Mouse wheel scroll
Support for touch-controlled mobile devices
Customizable and dynamic grids and sliders responsive to user interactions
Powerful scrolling capabilities with adjustable speed and orientation

Key Highlights

Its robust set of features makes Ethiopia grid slider a topmost priority for web developers and designers dealing with content-heavy websites. Major key highlights include:

90% rating on compatibility 30%
20.7% of users reported compatibility issues, while 69.3 reporting that the plugin worked perfectly upon their expectations.

Ease of-use and Documentation

The plugin possesses extensive and user-friendly documentation, that assists in understanding and implementing plugins configurations and options. It boasts over 40 options to tinker with, making it an indispensable resource for both beginners and experienced players in the web development industry.

Additional Options

Ether Grid Loader features additional options that enhance its functionary:

17 Options to customize the appearance/positioning of navigation arrows are accessible.
10+ unique styles to customize the slider UI can be accessed.
Customizable auto play options, including the ability.

Conclusion

Ether Groin Slider is an excellent choice consideration for anyone seeking to create remarkable sliders and grids. Its ease-usability, comprehensive documentation, and numerous plugin configurations make it an invaluable asset foe anyone who wants to enhance.

Score: 4.13

User Reviews

0.0 out of 5

★★★★★

Write a review

There are no reviews yet.

Be the first to review “Ether Grid Slider jQuery Plugin” Cancel reply

Introduction to Ether Grid Slider jQuery Plugin

The Ether Grid Slider is a powerful and flexible jQuery plugin that allows you to create interactive grid-based sliders for your website or web application. With its ease of use and customization options, you can create a wide range of slider effects, from simple to complex, to enhance your user experience. In this tutorial, we will cover the basics of using the Ether Grid Slider jQuery plugin, including installation, setup, and customization.

Step 1: Installation

To use the Ether Grid Slider jQuery plugin, you need to download and include the plugin files in your project. You can download the plugin from the official website or use a package manager like npm or bower.

Download the plugin from the official website: https://github.com/ether/ether-grid-slider
Extract the downloaded zip file and include the ether.grid.slider.min.js and ether.grid.slider.css files in your HTML file.

Step 2: Basic Setup

To use the Ether Grid Slider plugin, you need to create a container element for the slider and wrap your content inside it. The container element should have a unique ID or class that you can use to target the slider.

<div id="my-slider" class="grid-slider">
  <!-- Your content here -->
  <div class="grid-item">
    <img src="image1.jpg" alt="Image 1">
  </div>
  <div class="grid-item">
    <img src="image2.jpg" alt="Image 2">
  </div>
  <!-- More grid items here -->
</div>

Step 3: Initialize the Slider

To initialize the slider, you need to call the $.gridSlider method on the container element and pass the options object as an argument.

$(document).ready(function() {
  $('#my-slider').gridSlider({
    rows: 2,
    cols: 3,
    infinite: true,
    animation: 'slide',
    speed: 300
  });
});

In this example, we are initializing the slider with the following options:

rows: The number of rows in the grid.
cols: The number of columns in the grid.
infinite: A boolean value that determines whether the slider is infinite or not.
animation: The animation effect to use when sliding the grid items.
speed: The speed of the animation.

Step 4: Customize the Slider

The Ether Grid Slider plugin provides many customization options that you can use to tailor the slider to your needs. Here are some examples:

Grid Item Dimensions: You can set the width and height of the grid items using the itemWidth and itemHeight options.
```
$('#my-slider').gridSlider({
itemWidth: 200,
itemHeight: 100
});
```
Animation Speed: You can adjust the animation speed using the animationSpeed option.
```
$('#my-slider').gridSlider({
animationSpeed: 500
});
```

Grid Item Templates: You can use the gridItemTemplate option to customize the HTML structure of the grid items.

$('#my-slider').gridSlider({
gridItemTemplate: '<div class="grid-item"><img src="{{src}}" alt="{{alt}}"></div>'
});

Event Handlers: You can use the on method to bind event handlers to the slider.
```
$('#my-slider').gridSlider({
on: {
init: function() {
  console.log('Slider initialized');
},
slide: function(index) {
  console.log('Slider slid to index ' + index);
}
}
});
```
These are just a few examples of the many customization options available in the Ether Grid Slider plugin. You can refer to the plugin's documentation for more information on the available options and methods.

Conclusion

In this tutorial, we have covered the basics of using the Ether Grid Slider jQuery plugin, including installation, setup, and customization. With its ease of use and flexibility, the Ether Grid Slider plugin is a great tool for creating interactive grid-based sliders for your website or web application.

Here is an example of how to configure the Ether Grid Slider jQuery Plugin:

responsive:

responsive: {
    0: {
        items: 1
    },
    400: {
        items: 2
    },
    800: {
        items: 3
    },
    1200: {
        items: 4
    }
}

gridWidth:

gridWidth: 200

gridHeight:

gridHeight: 100

animate:

animate: true

animationSpeed:

animationSpeed: 1000

pagination:

pagination: true

paginationNumbers:

paginationNumbers: true

autoPlay:

autoPlay: true

pauseOnHover:

pauseOnHover: true

speed:

speed: 1000

showNav:

showNav: true

navNextText:

navNextText: "Next"

navPrevText:

navPrevText: "Prev"

startDragging:

startDragging: true

startClick:

startClick: true

responsiveReset:

responsiveReset: true

Note: These settings are just an example, you should adjust them according to your specific use case.

Here are the key features and details about the Ether Grid Slider jQuery Plugin:

Key Highlights:

40 options
Mousewheel support
Touch/swipe support for mobile devices
Many custom configured elements on single page
Fluid & responsive layout
Smart autoplay
Image gallery options
External linking - control sliders from anywhere
Custom transitions, sliding axes, and more
Highly customizable slider navigation

Options:

align: Target element alignment
always_show_img_title: Keep image titles visible and expanded
autoplay_enable: Autoplay
autoplay_interval: Autoplay interval in seconds
autoplay_shift_dir: Autoplay direction
col_spacing_enable: Enable spacing to occur between grid cells
col_spacing_size: Spacing that occurs between grid cells
cols: Column count
ctrl_always_visible: Slider controls visible at all times or on hover only
ctrl_arrows: Display navigation arrows
ctrl_arrows_full_width: Spaces nav arrows as far apart from each other as possible
ctrl_arrows_pos_shift_x: Custom horizontal offset of slider arrows
ctrl_arrows_pos_shift_y: Custom vertical offset of slider arrows
ctrl_arrows_pos_x: Horizontal position of slider arrows
ctrl_arrows_pos_y: Vertical position of slider arrows
ctrl_arrows_spacing: Minimum spacing between arrows
ctrl_external: Define external elements that will be able to change slides
ctrl_padding: Minimum distance of nav controls from gridslider element borders
ctrl_pag: Display pagination
ctrl_pag_pos_shift_x: Custom horizontal offset of slider pag
ctrl_pag_pos_shift_y: Custom vertical offset of slider pag
ctrl_pag_pos_x: Horizontal position of slider pag
ctrl_pag_pos_y: Vertical position of slider pag
ctrl_pag_spacing: Minimum spacing between pagination items
ctrl_style: Style of navigation (for custom one provide path to filename)
easing: Transition effect for sliding animations
gallery_img_title: For image galleries. If an image tag has title or alt attribute defined (in this order), description will be displayed when an element is hovered
grid_height: Constrain forces sqare cells, numeric value forces fixed height
hide_grid_cell_overflow: Advanced: Useful when there's a grid gallery of images with column spacing and images are higher than column content height
image_stretch_mode: Image stretch mode
img_title_pos_x: Horizontal position of image title
img_title_pos_y: Vertical position of image title
loop: Behaviour of the slider on the last-to-first and first-to-last element transition
pause_autoplay_on_hover: Pauses autoplay when user mouse pointer hovers over the gridslider element
rows: Row count
scroll_axis: Scroll axis
scroll_on_mousewheel: Scroll slides with mousewheel when mouse is hovered over gridslider
scroll_speed: Scroll speed in miliseconds
scroll_transition: Scroll transition
slider: Transform element into a slider (0 will create a grid only)
theme: Defines element theme, default is light
view_pos: Visible slide
width: Target element width

Image Gallery Options:

Simple list of images can be transformed in a few different ways
Constrain width to height ratio of grid cells so that they're always square, auto or custom fixed height
Images within grid cells can be also further manipulated by changing their container fill mode

Update Log:

August 6, 2013, version 1.4.0: Fixed responsiveness of slider navigation, added customizable nav prev/next arrows and pagination position and styles, added option to disable scroll on mousewheel, added light/dark theme compatibility, fixed external links pointing to specific slides, and revised documentation.
March 5, 2013, version 1.3.1: Fixed core fixes, added scroll_on_mousewheel property, and fixed jQuery 2.0 compatibility.
September 30, 2012, version 1.3: Fixed core fixes, fixed IE7/8 compatibility, and fixed general tweaks and some structural changes.
June 18, 2012, version 1.2: Fixed autoplay with navigation disabled, added external controls now allow for linking to prev/next slides, too, and general tweaks and some structural changes.
May 6, 2012, version 1.1: Added dynamic adding of new elements into existing gridsliders, added external linking to specific slides, added automatic titles for images, added loop option, added easing effects for slide transitions, added mousewheel support, added swipe support for mobile devices, and more.
3 Mar 2012, version: Added IE7 support, added two new options - target element width and alignment.

Support:

Email: contact.pordesign@gmail.com (please include your item purchase code along with the problem description)
Forum: http://ether-wp.com/forum

Mission:

Main focus of this plugin is to facilitate creation of grids and sliders out of any content and being as little invasive on the code output as possible.
Grid and slider functionality do not affect actual content behaviour.