All Around content slider is a multi-purpose all-in-one slider solution for your website. It supports both images and video. It can be an easy and effective solution for your shop related website as you can display your products in an interesting and eye appealing way. All Around carousel is perfect for almost all type of websites and it can fit perfectly into all business areas. You can display your company services, personal portfolio, sport products, health services, real-estate properties, vacation/holiday offers, cooking recipes and much much more.
You can adjust the content slider the way you need it or you can choose one of our 6 prepared layouts. The All Around jQuery slider/carousel has tons of options and features that you can set-up. It ranges from auto-play option and vertical/horizontal alignment up to border colors and radius. The features of the All Around content slider / carousel are listed below.
In your <head> section include this:
<link href="fonts/ostrich_sans/stylesheet.css" rel="stylesheet" type="text/css" />
<link href='http://fonts.googleapis.com/css?family=Dosis:400,200,300,500,600,700,800' rel='stylesheet'
type='text/css'>
<link href="css/content_slider_style.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen" title="prettyPhoto main stylesheet"
charset="utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.content_slider.min.js" type="text/javascript"></script>
<script src="js/jquery.mousewheel.js" type="text/javascript"></script>
<script src="js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.animate-colors.js" type="text/javascript"></script>
<script src="js/additional_content.js" type="text/javascript"></script>
All you need to do is call:
<script type="text/javascript">
(function($){
$(document).ready(function() {
var image_array = new Array();
image_array = [
{image: 'content/1.png', link_url: 'content/1.png', link_rel: 'prettyPhoto'},
// image for the first layer, goes with the text from id="sw0"
{image: 'content/2.png', link_url: 'content/2.png', link_rel: 'prettyPhoto'},
// image for the second layer, goes with the text from id="sw1"
{image: 'content/3.png', link_url: 'some-page.html', link_rel: '', link_target: '_blank',
main_link: 'some-page.html', main_link_target: 1,
upper_text_label_show: 0, upper_text_label: '', upper_text_label_style: '',
lower_text_label_show: 1, lower_text_label: 'Amanda', lower_text_label_style: 'color: red;'}
// image for the third layer, goes with the text from id="sw2"
// if 'link_rel' is empty, zoom icon will open link instead of an image.
// 'main_link' is a link for a whole big circle, and it is
// available only if 'middle_click': 3 (see parameters list below).
// main_link_target: 0 = open link in the same window; 1 = in new tab
// upper_text_label_show, lower_text_label_show = 0 means there is no text label,
// 1 means there is a text label
// upper_text_label, lower_text_label = text, content
// upper_text_label_style, lower_text_label_style = CSS style, optional
];
$('#slider1').content_slider({ // bind plugin to div id="slider1"
map : image_array, // pointer to the image map
max_shown_items: 3, // number of visible circles
hv_switch: 0, // 0 = horizontal slider, 1 = vertical
active_item: 1, // layer that will be shown at start, 0=first, 1=second...
wrapper_text_max_height: 810, // height of widget, displayed in pixels
middle_click: 1, // when main circle is clicked:
// 1 = slider will go to the previous circle, 2 = to the next,
// 3 = open 'main_link', 0 = nowhere (no response)
border_radius: -1 // -1 = circle, 0 and other = radius
});
});
})(jQuery);
</script>
Elements need to be wrapped like this:
<div class="content_slider_wrapper" id="slider1">
<div class="circle_slider_text_wrapper" id="sw0" style="display: none;">
<!-- content for the first layer, id="sw0" -->
<div class="content_slider_text_block_wrap">
<!-- "content_slider_text_block_wrap" is a div class for custom content -->
<h3>Black Hoodie</h3><br /><br />
<span>Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet Lorem ipsum dolor sit ametLorem ipsum dolor sit amet
Lorem ipsum dolor sit amet Lorem ipsum dolor sit ametLorem ipsum dolor sit amet
Lorem ipsum dolor sit amet Lorem ipsum dolor sit ametLorem ipsum dolor sit amet
Lorem ipsum dolor sit amet</span><br /><br /><br />
<a href="#" class="button_regular">More Info</a><!-- button_regular -->
</div>
<div class="clear"></div>
</div>
<div class="circle_slider_text_wrapper" id="sw1" style="display: none;">
<!-- content for the second layer, id="sw1" -->
<div class="circle_slider_text">
<!-- "circle_slider_text" is a div class for two vertically separated text blocks-->
<h4>Second layer</h4>
<span>1. Lorem ipsum dolor sit amet. / consectetur adipisicing elit.<br>
2. Sed do eiusmod tempor. / labore et dolore magna aliqua.<br>
3. Quis nostrud. / exercitation ullamco.<br>
4. Laboris nisi ut aliquip ex.</span>
<div class="clear"></div>
</div>
<div class="circle_slider_text right"> <!-- second text block -->
<h4>Friendly robot features</h4>
<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</span>
<div class="clear"></div>
</div>
<div class="clear"></div>
</div>
<div class="circle_slider_text_wrapper" id="sw2" style="display: none;">
<!-- content for the third layer, id="sw2" -->
<div class="circle_slider_text">
<!-- "circle_slider_text" is a div class for two vertically separated text blocks-->
<h4>Third layer</h4>
<span>1. Lorem ipsum dolor sit amet. / consectetur adipisicing elit.<br>
2. Sed do eiusmod tempor. / labore et dolore magna aliqua.<br>
3. Quis nostrud. / exercitation ullamco.<br>
4. Laboris nisi ut aliquip ex.<br>
5. Quis nostrud exercitation ullamco laboris.</span>
<div class="clear"></div>
</div>
<div class="circle_slider_text right"> <!-- second text block -->
<h4>Friendly robot features</h4>
<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit.</span>
<div class="clear"></div>
</div>
<div class="clear"></div>
</div>
</div><script type="text/javascript">
(function($){
$(document).ready(function() {
var image_array = new Array();
image_array = [
{image: 'content/1.png', link_url: 'content/1.png', link_rel: 'prettyPhoto'},
// image for the first layer, goes with the text from id="sw0"
{image: 'content/2.png', link_url: 'content/2.png', link_rel: 'prettyPhoto'},
// image for the second layer, goes with the text from id="sw1"
{image: 'content/3.png', link_url: 'content/3.png', link_rel: 'prettyPhoto'}
// image for the third layer, goes with the text from id="sw2"
];
$('#slider2').content_slider({ // bind plugin to div id="slider2"
map : image_array, // pointer to the image map
max_shown_items: 3, // number of visible circles
hv_switch: 1, // 0 = horizontal slider, 1 = vertical
active_item: 1, // layer that will be shown at start, 0=first, 1=second...
middle_click: 1, // desired action when main circle is clicked
wrapper_text_max_height: 1000, // width of widget, displayed in pixels
border_radius: -1 // -1 = circle, 0 and other = radius
});
});
})(jQuery);
</script>
<div class="content_slider_wrapper_vertical" id="slider2">
<div class="circle_slider_text_wrapper" id="sw0" style="display: none;">
<!-- content for the first layer, id="sw0" -->
<div class="content_slider_text_block_wrap">
<!-- "content_slider_text_block_wrap" is a div class for custom content -->
<h3>Black Hoodie</h3><br /><br />
<span>Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet Lorem ipsum dolor sit ametLorem ipsum dolor sit amet
Lorem ipsum dolor sit amet Lorem ipsum dolor sit ametLorem ipsum dolor sit amet
Lorem ipsum dolor sit amet Lorem ipsum dolor sit ametLorem ipsum dolor sit amet
Lorem ipsum dolor sit amet</span><br /><br /><br />
<a href="#" class="button_regular">More Info</a><!-- button_regular -->
</div>
<div class="clear"></div>
</div>
<div class="circle_slider_text_wrapper" id="sw1" style="display: none;">
<!-- content for the second layer, id="sw1" -->
<div class="circle_slider_text">
<!-- "circle_slider_text" is a div class for two vertically separated text blocks-->
<h4>Second layer</h4>
<span>1. Lorem ipsum dolor sit amet. / consectetur adipisicing elit.<br>
2. Sed do eiusmod tempor. / labore et dolore magna aliqua.<br>
3. Quis nostrud. / exercitation ullamco.<br>
4. Laboris nisi ut aliquip ex.</span>
<div class="clear"></div>
</div>
<div class="circle_slider_text right"> <!-- second text block -->
<h4>Friendly robot features</h4>
<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</span>
<div class="clear"></div>
</div>
<div class="clear"></div>
</div>
<div class="circle_slider_text_wrapper" id="sw2" style="display: none;">
<div class="circle_slider_text_wrapper_v2">
<!-- content for the third layer, id="sw2" -->
<div class="circle_slider_text">
<!-- "circle_slider_text" is a div class for two vertically separated text blocks-->
<h4>Third layer</h4>
<span>1. Lorem ipsum dolor sit amet. / consectetur adipisicing elit.<br>
2. Sed do eiusmod tempor. / labore et dolore magna aliqua.<br>
3. Quis nostrud. / exercitation ullamco.<br>
4. Laboris nisi ut aliquip ex.<br>
5. Quis nostrud exercitation ullamco laboris.</span>
<div class="clear"></div>
</div>
<div class="circle_slider_text right"> <!-- second text block -->
<h4>Friendly robot features</h4>
<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit.</span>
<div class="clear"></div>
</div>
<div class="clear"></div>
</div>
</div>
</div>$('#slider1').content_slider({
name : value
});
List of available parameters:
| Name | Default | Description |
|---|---|---|
| map | Pointer to the image map, must be provided | |
| max_shown_items | 7 | The number of visible circles |
| active_item | 0 | The ID number of a picture that is going to be placed in the center position when plug-in is initialized |
| wrapper_text_max_height | 810 | This is the height of the slider in horizontal mode, and width in vertical mode, displayed in pixels |
| automatic_height_resize | 1 | 1 will automatically resize widget height if slide contains larger content, 0 will keep fixed value from 'wrapper_text_max_height' value |
| hv_switch | 0 | 0 means horizontal plugin variant, 1 means vertical plugin variant |
| middle_click | 2 | when main circle is clicked: 1 = slider will go to the previous layer/circle 2 = slider will go to the next 3 = open 'main_link' 0 = nowhere (no response) |
| bind_arrow_keys | 1 | For value 1, the slider will slide if you press left/right on keyboard. Set it to 0 if you want to disable this feature. |
| small_border | 5 | Thickness of the border in small circles |
| big_border | 8 | Thickness of the border in big circle |
| border_radius | -1 | -1 is full circle, any other (larger) value will set the border radius |
| radius_proportion | 1 | Keep radius proportion, so that small circles have proportionaly the same radius as the big circle. Set it to 0 if you want to disable this feature. |
| mode | 2 | Mode 1 doesn't enlarge the middle picture while it passes the center position, mode 2 enlarge the middle picture while it passes the center position |
| border_on_off | 1 | 0 means no border, 1 means border |
| allow_shadow | 1 | 1 = yes, 0 = no shadow around the circles |
| small_resolution_max_height | 0 | When you have a resolution smaller then 600 pixels, this will set the limitation of content height. Set it to 0 for no limit. |
| small_pic_width | 84 | Width (in pixels) of the small circles |
| small_pic_height | 84 | Height (in pixels) of the small circles |
| child_div_width | 104 | Width (in pixels) of the whole area around the small circle (including the very circle). If you change 'small_pic_width' value, change this too. |
| child_div_height | 104 | Height (in pixels) of the whole area around the small circle (including the very circle). If you change 'small_pic_height' value, change this too. |
| big_pic_width | 231 | Width (in pixels) of the big circle |
| big_pic_height | 231 | Height (in pixels) of the big circle |
| moving_speed | 70 | An amount of time, expressed in milliseconds, multiplied by a number of places pictures need to pass. Meaning, the closer the pictures are to the center the slower they will travel. Naturally, pictures that are further away will travel faster. |
| moving_speed_offset | 100 | A value, expressed in miliseconds, that is always added to sum. Starting speed. Set the larger value for slower circle traveling. |
| moving_easing | 'linear' | jQuery easing effect |
| arrow_speed | 300 | Speed of the arrows - opening/closing |
| arrow_easing | 'linear' | jQuery easing effect |
| hover_movement | 6 | How much (in pixels) will the circle enlarge or shrink on hover effect |
| hover_speed | 100 | Speed of hover effect |
| hover_easing | 'linear' | jQuery easing effect |
| prettyPhoto_speed | 200 | Speed of the red cross (prettyPhoto link for zooming) |
| prettyPhoto_easing | 'linear' | jQuery easing effect |
| prettyPhoto_width | 21 | Width of the prettyPhoto cross |
| prettyPhoto_start | 0.93 | Position of prettyPhoto cross - expressed in percentages (and divided by 100) of an circle - from 0.00 to 1.00 |
| prettyPhoto_movement | 45 | How much (in pixels) will the red cross move when you hover over the big circle |
| prettyPhoto_color | #1AB99B | Color of Zoom icon |
| prettyPhoto_img | (empty string) | If you want some specific icon instead a 'plus' icon, enter here a URL of that image (image should be 21 x 21 px) |
| auto_play | 0 | 1 means auto-play is ON, the slider will move circles automatically |
| auto_play_direction | 1 | 1 = slider will go to the right, 2 = to the left |
| auto_play_pause_time | 3000 | Interval of auto-play, pause between sliding, expressed in miliseconds (1000 miliseconds = 1 second) |
| preload_all_images | 0 | 1 will preload all images, even though they are not shown at the start, so browser will cache them and show it immediately when you slide to them. 0 means no preloading. |
| enable_mousewheel | 1 | 1 means mouse wheel will slide the slider when mouse pointer is above the slider. Set it to 0 if you want to disable this feature. |
| activate_border_div | 1 | 1 will use better (but slower) render method for border and resizing. If the slider is slow - set it to 0. |
| border_color | '#282828' | Border color displayed in HEX HTML value |
| arrow_color | '#282828' | Arrows color displayed in HEX HTML value |
| arrow_width | 28 | If you change arrow image, update this value |
| arrow_height | 57 | If you change arrow image, update this value |
| small_arrow_width | 20 | Small arrows will be used if you have disabled the borders with 'border_on_off' parameter. If you change arrow image, update this value (in pixels). |
| small_arrow_height | 20 | Small arrows will be used if you have disabled the borders with 'border_on_off' parameter. If you change arrow image, update this value (in pixels). |
| use_thin_arrows | 0 | Small arrows will be used if you set this option to 1, even border is enabled. |
| top_offset | 0 | Set the top position of the circles (in pixels). 0 means that it will automatically set the position to vertical center. |
| left_offset | 0 | This will push the circles to the right (in pixels) |
| plugin_url | (empty string) | URL path to the root folder of the plugin. By default it is a folder where are your HTML files. |
| responsive_by_available_space | 0 | 0 will do responsive by browser window, 1 will do responsive by available space around the slider (parent div, container div). |
| keep_on_top_middle_circle | 0 | If circles overlap each other, this option will keep main circle on the top (valid values for this option: 0=disabled, 1=enabled) |
| dinamically_set_class_id | 0 | Circle div elements will get classes that identify its ID (id from a 'map' array). Classes will be named as: all_around_circle_0, all_around_circle_1, all_around_circle_2, etc... Also img elements will get classes: all_around_img_0, all_around_img_1, all_around_img_2, etc... So, if you enable this option, you can modify style of specific circle via CSS: .all_around_circle_2 {...}. Valid values for this option: 0=disabled, 1=enabled. |
| dinamically_set_position_class | 0 | Circle div elements will get classes that identify its current visual position on the slider (from left to right). Classes will be named as: all_around_position_0, all_around_position_1, all_around_position_2, etc... So, if you enable this option, you can modify style of (for example) main (large) circle via CSS: .all_around_position_2 {...}. Valid values for this option: 0=disabled, 1=enabled. |
| hide_arrows | 0 | Hide the arrows (0=no, 1=yes) |
| hide_prettyPhoto | 0 | Hide the zoom icon (0=no, 1=yes) |
| hide_content | 0 | Hide the content (all textual content) (0=no, 1=yes) |
| content_margin_left | 0 | If the content is not centered very well, you can push it to left or to right by passing negative or positive value to this option. Number will be considered as a number of pixels. So, if you set a value to -5 it will move the content to left for 5 pixels. Positive value, for example 5, will move the content to right for 5 pixels. |
| circle_left_offset | 0 | If circles are not centered very well, you can push it to left or to right by passing negative or positive value to this option. Number will be considered as a number of pixels. So, if you set a value to -5 it will move circles to left for 5 pixels. Positive value, for example 5, will move circles to right for 5 pixels. |
| minus_width | 0 | If width of the slider is too large, set value to 10 for example, and width of the slider will be 10px smaller. |
| main_circle_position | 0 | 0 = Main circle is centered, 1 = left aligned, 2 = right aligned. |
| enable_scroll_with_touchmove_on_horizontal_version | 1 | On touch-screens, you can scroll the page by moving finger up and down over the circle. On horizontal version of the slider this option is active by default. 0 = Not active, 1 = Active. |
| enable_scroll_with_touchmove_on_vertical_version | 0 | On touch-screens, you can scroll the page by moving finger up and down over the circle. On vertical version of the slider this option is NOT active by default (because circles will be moved up and down). 0 = Not active, 1 = Active. |
| movement_coefficient | 1 | Coefficient for movement when you drag and move circles. Set it to lower value for smaller movement, for example set it to 0.5 |
$('#slider1').content_slider('name_of_function', optional_parameter);
List of available functions:
| Name | Parameter | Description |
|---|---|---|
| public_go_one_slide_left | (none) | Slider will go to the previous circle |
| public_go_one_slide_right | (none) | Slider will go to the next circle |
| public_go_n_slides_left | n | Slider will go to the left for 'n' circles |
| public_go_n_slides_right | n | Slider will go to the right for 'n' circles |
| start_auto_play | (none) | Slider will start auto-play mode |
| get_auto_play_status | (none) | Return 1 if auto-play is running, otherwise it returns 0 |
| get_number_of_current_slide | (none) | Return ID number of active slide |
| Event | Method |
|---|---|
| When user goes to previous slide | 'prev' |
| When user goes to next slide | 'next' |
| When slider open an slide | 'open' |
$('#slider1').on('prev', function(event) {
console.log('prev');
});
$('#slider1').on('next', function(event) {
console.log('next');
});
$('#slider1').on('open', function(event, id) {
console.log('open '+id+' slide');
});
Required: jQuery 1.7+
Required: jQuery Mousewheel (included)
Extra: Use jQuery Easing for additional easing options.