Does anyone know why the left ( prev ) and right ( next ) arrow are not showing in the products slider here and why they do not slide when you click them?
Right I’ve got the arrows up but howdo I get it to scroll? css? Javascrpt?
What am I missing to get it to scroll across?
Many thanks if you can help
Hi,
You can use either CSS or JavaScript to implement a slider.
Both have advantages and disadvantages , although I personally would opt for JS.
If you need any help, then make a slimed down example page (with just the slider on it) and I’ll show you how.
Great thanks!!!
Is this ok?
http://www.organicwebdesigns.co.uk/hmw-demo/?page_id=1907
Can’t wait to see how it goes
Hi there,
[QUOTE=hantaah;5412578]Is this ok?
http://www.organicwebdesigns.co.uk/hmw-demo/?page_id=1907[/quote]
Yeah, not bad.
However, you posted this:
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en-US"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en-US"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en-US"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en-US"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<title>
Slider </title>
<link rel="icon" type="image/png" href="http://www.organicwebdesigns.co.uk/hmw-demo/wp-content/uploads/2013/04/tree_favico1.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--[if lte IE 9]>
<script src="https://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="alternate" type="application/rss+xml" title="Health Means Wealth Feed" href="http://www.organicwebdesigns.co.uk/hmw-demo/feed/">
<link href='//fonts.googleapis.com/css?family=Abel:200,300,400,600,700,200italic,300italic,400italic,600italic,700italic&subset=latin,cyrillic' rel='stylesheet' type='text/css'><link href='//fonts.googleapis.com/css?family=Abel:200,300,400,600,700,200italic,300italic,400italic,600italic,700italic&subset=latin,cyrillic' rel='stylesheet' type='text/css'><link href='//fonts.googleapis.com/css?family=Oregano:200,300,400,600,700,200italic,300italic,400italic,600italic,700italic&subset=latin,cyrillic' rel='stylesheet' type='text/css'>
<link rel="alternate" type="application/rss+xml" title="Health Means Wealth Feed" href="http://www.organicwebdesigns.co.uk/hmw-demo/feed/">
<link rel="stylesheet" href="http://www.organicwebdesigns.co.uk/hmw-demo/wp-content/plugins/LayerSlider/css/layerslider.css?ver=4.5.1">
<link rel="stylesheet" href="http://www.organicwebdesigns.co.uk/hmw-demo/wp-content/plugins/sidebar-login/assets/css/sidebar-login.css?ver=2.5.2">
<link rel="stylesheet" href="http://www.organicwebdesigns.co.uk/hmw-demo/wp-content/plugins/siteorigin-panels/css/front.css?ver=1.1.1">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Oregano:400,400italic|Hammersmith+One:400">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto+Condensed%3A300%2C400%2C700&subset=latin&ver=3.5.1">
<link rel="stylesheet" href="http://www.organicwebdesigns.co.uk/hmw-demo/wp-content/plugins/woocommerce/assets/css/woocommerce.css?ver=3.5.1">
<link rel="stylesheet" href="http://www.organicwebdesigns.co.uk/hmw-demo/wp-content/themes/maestro/assets/css/foundation.min.css">
<link rel="stylesheet" href="http://www.organicwebdesigns.co.uk/hmw-demo/wp-content/themes/maestro/assets/css/app.css">
<link rel="stylesheet" href="http://www.organicwebdesigns.co.uk/hmw-demo/wp-content/themes/maestro/assets/css/jquery.isotope.css">
<link rel="stylesheet" href="http://www.organicwebdesigns.co.uk/hmw-demo/wp-content/themes/maestro/assets/css/flexslider.css">
<link rel="stylesheet" href="http://www.organicwebdesigns.co.uk/hmw-demo/wp-content/themes/maestro/assets/css/responsive.css">
<link rel="stylesheet" href="http://www.organicwebdesigns.co.uk/hmw-demo/wp-content/themes/maestro/assets/css/prettyPhoto.css">
<link rel="stylesheet" href="http://www.organicwebdesigns.co.uk/hmw-demo/wp-content/themes/maestro/css/options.css">
<script type='text/javascript' src='http://www.organicwebdesigns.co.uk/hmw-demo/wp-includes/js/jquery/jquery.js?ver=1.8.3'></script>
<script type='text/javascript' src='http://www.organicwebdesigns.co.uk/hmw-demo/wp-content/plugins/LayerSlider/js/layerslider.kreaturamedia.jquery.js?ver=4.5.1'></script>
<script type='text/javascript' src='http://www.organicwebdesigns.co.uk/hmw-demo/wp-content/plugins/LayerSlider/js/jquery-easing-1.3.js?ver=1.3.0'></script>
<script type='text/javascript' src='http://www.organicwebdesigns.co.uk/hmw-demo/wp-content/plugins/LayerSlider/js/jquerytransit.js?ver=0.9.9'></script>
<script type='text/javascript' src='http://www.organicwebdesigns.co.uk/hmw-demo/wp-content/plugins/LayerSlider/js/layerslider.transitions.js?ver=4.5.1'></script>
<script type='text/javascript' src='http://www.organicwebdesigns.co.uk/hmw-demo/wp-content/plugins/sidebar-login/assets/js/blockui.min.js?ver=2.57'></script>
<script type='text/javascript'>
/* <![CDATA[ */
var sidebar_login_params = {"ajax_url":"http:\\/\\/www.organicwebdesigns.co.uk\\/hmw-demo\\/wp-admin\\/admin-ajax.php","login_nonce":"8e12c9bffc","force_ssl_login":"0","force_ssl_admin":"0","is_ssl":"0","i18n_username_required":"Please enter your username","i18n_password_required":"Please enter your password","error_class":"sidebar_login_error"};
/* ]]> */
</script>
<script type='text/javascript' src='http://www.organicwebdesigns.co.uk/hmw-demo/wp-content/plugins/sidebar-login/assets/js/sidebar-login.min.js?ver=2.5.2'></script>
<script type='text/javascript' src='http://www.organicwebdesigns.co.uk/hmw-demo/wp-content/themes/maestro/assets/js/retina.js'></script>
<link rel='canonical' href='http://www.organicwebdesigns.co.uk/hmw-demo/?page_id=1907' />
<script type="text/javascript">
jQuery(document).ready(function () {
var menu_speed = 'slow';
var animation_effect = 'slide_down';
jQuery("nav#top-menu > ul > li > ul").hide();
var windowWidth = jQuery(window).width();
jQuery(window).resize(function() {
//jQuery("nav#top-menu > ul > li > ul").hide();
windowWidth = jQuery(window).width();
//alert(windowWidth);
}).resize();
jQuery("nav#top-menu > ul > li").hover(function () {
if (animation_effect == 'fade_in')
jQuery('ul', this).stop(true, true).fadeIn(menu_speed);
if (animation_effect == 'slide_down')
jQuery('ul', this).stop(true, true).slideDown(menu_speed);
}, function () {
if (animation_effect == 'fade_in')
jQuery('ul', this).stop(true, true).fadeOut(menu_speed);
if (animation_effect == 'slide_down')
jQuery('ul', this).stop(true, true).slideUp(menu_speed);
});
jQuery('nav#top-menu > ul > li').mouseleave(function() {
jQuery("nav#top-menu > ul > li > ul").hide();
});
jQuery(".menu-item-wrap").hover(function () {
if(jQuery(this).parent("li").hasClass("current-menu-item"))
jQuery(this).parent("li").addClass("was_active");
else
jQuery(this).parent("li").addClass("current-menu-item");
jQuery("img.active-icon", this).css("display", "inline");
jQuery("img.normal-icon", this).css("display", "none");
}, function () {
if(!jQuery(this).parent("li").hasClass("was_active"))
jQuery(this).parent("li").removeClass("current-menu-item");
jQuery("img.active-icon", this).css("display", "none");
jQuery("img.normal-icon", this).css("display", "inline");
});
});
</script>
<style type='text/css' media='screen'>
h1{ font-family:"Oregano", arial, sans-serif;}
h2{ font-family:"Oregano", arial, sans-serif;}
h3{ font-family:"Oregano", arial, sans-serif;}
#top-menu .link-text { font-family: 'oregano', sans-serif; font-weight: 600; font-size: 18px; }
h4{ font-family:"Hammersmith One", arial, sans-serif;}
h5{ font-family:"Hammersmith One", arial, sans-serif;}
h6{ font-family:"Hammersmith One", arial, sans-serif;}
blockquote{ font-family:"Hammersmith One", arial, sans-serif;}
p{ font-family:"Hammersmith One", arial, sans-serif;}
li{ font-family:"Hammersmith One", arial, sans-serif;}
</style>
<!-- fonts delivered by Wordpress Google Fonts, a plugin by Adrian3.com -->
<!-- WooCommerce Version -->
<meta name="generator" content="WooCommerce 2.0.8" />
<script type="text/javascript" src="https://d1xnn692s7u6t6.cloudfront.net/widget.js"></script>
<script type="text/javascript">(function k(){window.$SendToKindle&&window.$SendToKindle.Widget?$SendToKindle.Widget.init({}):setTimeout(k,500);})();</script>
</head>
<body class="page page-id-1907 page-template page-template-page-custom-php siteorigin-panels ?page_id=1907 wpb-js-composer js-comp-ver-3.5.5 vc_responsive" >
<div id="change_wrap_div" class=" ">
<section id="header" >
<div class="row">
<div class="twelve columns">
<div id="logo"> <a href="http://www.organicwebdesigns.co.uk/hmw-demo/"><img src="http://www.organicwebdesigns.co.uk/hmw-demo/wp-content/uploads/2013/04/HealthisWealth_opt04.2-420x105.png" alt="Health Means Wealth"></a>
</div>
<a href="#" class="top-menu-button"></a>
<nav id="top-menu" class="fake"><ul id="menu-primary-nav" class="menu"><li id='primary-nav-1808'><span class="menu-item-wrap no_icon"><a href="http://www.organicwebdesigns.co.uk/hmw-demo/?page_id=62" style=""><span class="link-text">Home</span></a></span><div class='under'></div></li>
<li class="has-submenu" id='primary-nav-1819'><span class="menu-item-wrap no_icon"><a href="http://www.organicwebdesigns.co.uk/hmw-demo/?page_id=863" style=""><span class="link-text">Contacts</span></a></span><ul style="width: 1000px; display: none;">
<li class="has-submenu">
<div class="menu-item-wrap" style="padding:9px 10px 8px 20px;">
<div class="mega-text"><div class="wpb_row vc_row-fluid ">
<div class="vc_span8 wpb_column column_container">
<div class="wpb_wrapper">
<div class="wpb_gmaps_widget wpb_content_element">
<div class="wpb_wrapper"><div class="wpb_map_wraper"><iframe width="100%" height="200" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.ru/?ll=55.674487,37.762756&spn=0.662101,2.113495&t=m&z=10&t=m&z=14&output=embed"></iframe></div>
</div>
</div>
<div class="wpb_text_column wpb_content_element ">
<div class="wpb_wrapper">
<h3><em>OUR CONTACT INFO</em></h3>
<hr />
<p><strong>Address:</strong> <span style="color: #808080;"> PO BOX 2870, Purley, Surrey,</span> <strong> Country</strong>: UK <strong> Telephone</strong>:<span style="color: #808080;"> 020 8660 2792 ( Surrey Office );</span> <strong>or</strong>: <span style="color: #808080;">01283 226197 ( Derbyshire office );</span> <strong>or</strong>: <span style="color: #808080;">07808 275444 ( Mobile, general & order enquiries );</span> <strong>or</strong>: <span style="color: #808080;">07897 799691 ( Mobile, sisters only );</span> <strong>Email:</strong><span style="text-decoration: underline; color: #50b4e6;"><span style="text-decoration: underline;"> [email]enquiries@healthmeanswealth.co.uk[/email]</span></span></p>
<h3></h3>
</div>
</div>
</div>
</div>
<div class="vc_span4 wpb_column column_container">
<div class="wpb_wrapper">
<div class="wpb_text_column wpb_content_element ">
<div class="wpb_wrapper">
<h3><em>Health Means Wealth</em></h3>
<hr />
<ul class="styled-list">
<li>
<h5><span style="text-decoration: underline; color: #808080;"><span style="text-decoration: underline;"><span style="color: #808080; text-decoration: underline;">The Original Sunnah Remedy Site</span></span></span></h5>
</li>
<li>
<h5><span style="text-decoration: underline; color: #808080;"><span style="text-decoration: underline;"><span style="color: #808080; text-decoration: underline;">Online store for natural medicine</span></span></span></h5>
</li>
<li>
<h5><span style="text-decoration: underline; color: #808080;"><span style="text-decoration: underline;"><span style="color: #808080; text-decoration: underline;">Authentic sources for knowledge</span></span></span></h5>
</li>
<li>
<h5><span style="text-decoration: underline; color: #808080;"><span style="text-decoration: underline;"><span style="color: #808080; text-decoration: underline;">Courses and events available</span></span></span></h5>
</li>
</ul>
</div>
</div>
<div class="wpb_text_column wpb_content_element ">
<div class="wpb_wrapper">
<h3><em>A FEW WORDS ABOUT US</em></h3>
<hr />
<p><span style="color: #808080;">Lorem ipsum dolor sit amet, noluisse forensibus eu sea, mea mutat movet appareat et, at quo vero dissentiunt definitiones. Labore facilisis eam ei. An mea homero offendit, mea mucius appellantur id. Dicat tation nominati ea vix, vis ne appetere salutatus.</span></p>
</div>
</div>
</div>
</div>
</div>
</div></div></li>
</ul><div class='under'></div></li>
<li class="has-submenu" id='primary-nav-1809'><span class="menu-item-wrap no_icon"><a href="http://www.organicwebdesigns.co.uk/hmw-demo/?page_id=1791" style=""><span class="link-text">Articles</span></a></span><ul style="width: px; display: none;">
<li class="has-submenu">
<div class="menu-item-wrap" style="padding:9px 10px 8px 20px;">
<div class="mega-text"><p>Allah Is The Curer</p>
<p>The Quran</p>
<p>Blackseed</p>
<p>Costus</p>
<p>Cupping ( Hijamah )</p>
<p>Dates</p>
<p>Ghee</p>
<p>Hennah</p>
<p>Honey</p>
<p>Katam</p>
<p>Kohl Ihmid</p>
<p>Misk</p>
<p>Miswak</p>
<p> </p>
</div></div></li>
</ul><div class='under'></div></li>
<li id='primary-nav-1810'><span class="menu-item-wrap no_icon"><a href="http://www.organicwebdesigns.co.uk/hmw-demo/?page_id=15" style=""><span class="link-text">Blog page</span></a></span><div class='under'></div></li>
<li id='primary-nav-1811'><span class="menu-item-wrap no_icon"><a href="http://www.organicwebdesigns.co.uk/hmw-demo/?page_id=518" style=""><span class="link-text">Shop</span></a></span><div class='under'></div></li>
<li id='primary-nav-1805'><span class="menu-item-wrap no_icon"><a href="http://www.organicwebdesigns.co.uk/hmw-demo/?page_id=1804" style=""><span class="link-text">Newsletter</span></a></span><div class='under'></div></li>
</ul></nav>
<form role="search" method="get" id="searchform" class="form-search" action="http://www.organicwebdesigns.co.uk/hmw-demo/">
<label class="hide" for="s">Search for:</label>
<input type="text" value="" name="s" id="s" class="s-field" placeholder="Enter request...">
<input type="submit" id="searchsubmit" value=" " class="s-submit">
</form>
</div>
<div class="twelve columns">
<div class="head-bott">
<div class="soc-head-icons">
<a href="http://www.facebook.com/permalink.php?id=244035225714055&story_fbid=160582304107252" class="fb" title="Facebook">Facebook</a><a href="https://accounts.google.com/" class="gp" title="Google +">Google +</a><a href="https://twitter.com/HealthmnsWealth" class="tw" title="Twitter">Twitter</a><a href="http://dribble.com" class="dr" title="Dribble">Dribble</a><a href="http://linkedin.com" class="li" title="LinkedIN">LinkedIN</a> </div>
</div>
</div>
</div>
</section>
<section id="layout">
<div class="row">
<div class="twelve columns">
<div id="et-product-slider">
<div class="et-carousel-wrapper">
<ul class="clearfix" style="width: 1764px; left: 0px;">
<li class="et-product">
<a href="#"><img width="220" height="9999" alt="Product 1" src="http://www.organicwebdesigns.co.uk/hmw-demo/wp-content/uploads/2013/04/product-1.png"></a></p>
<h3><a href="#">Product 1</a></h3>
<div class="et-price-button">
<span class="et-price-sale"><span class="amount"><span class="lighter">£</span>10</span></span>
</div>
</li>
<li class="et-product">
<a href="#"><img width="220" height="9999" alt="product 2" src="http://www.organicwebdesigns.co.uk/hmw-demo/wp-content/uploads/2013/04/product-1.png"></a></p>
<h3><a href="#">Product 2</a></h3>
<div class="et-price-button">
<span class="et-price-sale"><span class="amount"><span class="lighter">£</span>29</span></span>
</div>
</li>
<li class="et-product">
<a href="http://organicwebdesigns.co.uk"><img width="220" height="9999" alt="Product 3" src="http://www.organicwebdesigns.co.uk/hmw-demo/wp-content/uploads/2013/04/product-1.png"></a></p>
<h3><a href="http://organicwebdesigns.co.uk">Product 3</a></h3>
<div class="et-price-button">
<span class="et-price-sale"><span class="amount"><span class="lighter">£</span>19</span></span>
</div>
</li>
<li class="et-product">
<a href="http://organicwebdesigns.co.uk"><img width="220" height="9999" alt="Product 4" src="http://www.organicwebdesigns.co.uk/hmw-demo/wp-content/uploads/2013/04/product-1.png"></a></p>
<h3><a href="http://organicwebdesigns.co.uk/">Product 4</a></h3>
<div class="et-price-button">
<span class="et-price-sale"><span class="amount"><span class="lighter">£</span>39</span></span>
</div>
</li>
<li class="et-product">
<a href="http://organicwebdesigns.co.uk"><img width="220" height="9999" alt="Product 5" src="http://www.organicwebdesigns.co.uk/hmw-demo/wp-content/uploads/2013/04/product-1.png"></a></p>
<h3><a href="http://organicwebdesigns.co.uk">Product 6</a></h3>
<div class="et-price-button">
<span class="et-price-sale"><span class="amount"><span class="lighter">£</span>29</span></span>
</div>
</li>
<li class="et-product">
<a href="http://organicwebdesigns.co.uk"><img width="220" height="9999" alt="Product 7" src="http://www.organicwebdesigns.co.uk/hmw-demo/wp-content/uploads/2013/04/product-1.png"></a></p>
<h3><a href="http://organicwebdesigns.co.uk">Product 7</a></h3>
<div class="et-price-button">
<span class="et-price-sale"><span class="amount"><span class="lighter">£</span>39</span></span>
</div>
</li>
</ul></div>
<p> <!-- .et-carousel-wrapper --></p>
<div class="et-slider-arrows"><a href="#" class="et-arrow-prev"><span>Previous</span></a><a href="#" class="et-arrow-next"><span>Next</span></a></div>
</div>
</div>
</div>
</section>
<section id="footer">
<div class="row">
<div class="four columns">
<section id="crum-text-widget-2" class="widget widget_crum-text-widget"><div class="title"><h3>Time & Date</h3></div>tba</section> </div>
<div class="four columns">
<section id="wp_sidebarlogin-2" class="widget widget_wp_sidebarlogin"><div class="title"><h3>Login</h3></div>
<form name="loginform" id="loginform" action="http://www.organicwebdesigns.co.uk/hmw-demo/wp-login.php" method="post">
<p class="login-username">
<label for="user_login">Username</label>
<input type="text" name="log" id="user_login" class="input" value="" size="20" />
</p>
<p class="login-password">
<label for="user_pass">Password</label>
<input type="password" name="pwd" id="user_pass" class="input" value="" size="20" />
</p>
<p class="login-remember"><label><input name="rememberme" type="checkbox" id="rememberme" value="forever" checked="checked" /> Remember Me</label></p>
<p class="login-submit">
<input type="submit" name="wp-submit" id="wp-submit" class="button-primary" value="Login →" />
<input type="hidden" name="redirect_to" value="http://www.organicwebdesigns.co.uk/hmw-demo/?page_id=1907" />
</p>
</form><ul class="pagenav sidebar_login_links"><li class="lost_password-link"><a href="http://www.organicwebdesigns.co.uk/hmw-demo/?page_id=1797">Lost Password</a></li></ul></section> </div>
<div class="four columns">
<section class="widget">
<div class="follow-widget">
<a href="http://organicwebdesigns.co.uk/hmw-demo/wp-content/themes/maestro/feed.rss" class="rss">
<img class="icon" src="http://www.organicwebdesigns.co.uk/hmw-demo/wp-content/themes/maestro/assets/img/share/rss.png" alt="ico">
<span class="number">Subscribe</span>
<span class="text">To RSS Feed</span>
</a>
<a href="http://www.facebook.com" class="fb">
<img class="icon" src="http://www.organicwebdesigns.co.uk/hmw-demo/wp-content/themes/maestro/assets/img/share/fb.png" alt="ico">
<span class="number">0</span>
<span class="text">fans</span>
</a>
<a href="http://www.youtube.com" class="yt">
<img class="icon" src="http://www.organicwebdesigns.co.uk/hmw-demo/wp-content/themes/maestro/assets/img/share/youtube.png" alt="ico">
<span class="number">0</span>
<span class="text">followers</span>
</a>
<a href="http://vimeo.com" class="vi">
<img class="icon" src="http://www.organicwebdesigns.co.uk/hmw-demo/wp-content/themes/maestro/assets/img/share/vimeo.png" alt="ico">
<span class="number">0</span>
<span class="text">subscribers</span>
</a>
<a href="http://www.dribble.com" class="dr">
<img class="icon" src="http://www.organicwebdesigns.co.uk/hmw-demo/wp-content/themes/maestro/assets/img/share/dribble.png" alt="ico">
<span class="number">0</span>
<span class="text">followers</span>
</a>
</div>
</section>
</div>
</div>
</section><section id="sub-footer">
<div class="row">
<div class="six mobile-two columns copyr">
© Health Means Wealth 2013 </div>
<div class="six mobile-two columns">
</div>
</div>
</section>
<a href="#" id="linkTop" class="backtotop"></a>
</div>
$.fn.et_carousel_slider = function( options ) {
var settings = $.extend( {
slide : 'li', // slide class
arrows : '.et-slider-arrows', // arrows container class
prev_arrow : '.et-arrow-prev', // left arrow class
next_arrow : '.et-arrow-next', // right arrow class
scroll_speed : 500, // fade effect speed
use_arrows : true, // use arrows?
manual_arrows : '' // html code for custom arrows
}, options );
return this.each( function() {
var $et_slider = $(this),
$et_slider_wrapper = $et_slider.find( 'ul' ),
$et_slide = $et_slider.find( settings.slide ),
et_slides_number = $et_slide.length,
et_scroll_speed = settings.scroll_speed,
et_active_slide = 1,
et_slider_total_width = $et_slide.innerWidth() * et_slides_number,
modifier = 3,
container_width = $('#container').width(),
et_is_animated = false;
$et_slider_wrapper.width( et_slider_total_width );
if ( settings.use_arrows && et_slides_number > 1 ) {
if ( settings.manual_arrows == '' )
$et_slider.append( '<div class="et-slider-arrows"><a class="et-arrow-prev" href="#">' + settings.previous_text + '</a><a class="et-arrow-next" href="#">' + settings.next_text + '</a></div>' );
else
$et_slider.append( settings.manual_arrows );
// show slider arrows on mobile devices only, if we have less than 4 slides
if ( et_slides_number < 4 ) $et_slider.addClass( 'et_only_mobile_arrows' );
$et_slider_arrows = $( settings.arrows );
$et_slider_prev = $et_slider.find( settings.prev_arrow );
$et_slider_next = $et_slider.find( settings.next_arrow );
$et_slider_next.click( function(){
if ( et_is_animated ) return false;
et_slider_move_to( 'next' );
return false;
} );
$et_slider_prev.click( function(){
if ( et_is_animated ) return false;
et_slider_move_to( 'previous' );
return false;
} );<link rel="stylesheet" href="http://www.organicwebdesigns.co.uk/hmw-demo/wp-content/plugins/crumina_slider/css/crumina_slider.css?ver=3.6.2">
<link rel="stylesheet" href="http://www.organicwebdesigns.co.uk/hmw-demo/wp-content/themes/maestro/css/crumina_menu.css?ver=3.5.1">
<link rel="stylesheet" href="http://www.organicwebdesigns.co.uk/hmw-demo/wp-content/plugins/js_composer/assets/css/js_composer_front.css?ver=3.5.5">
<script type='text/javascript' src='http://www.organicwebdesigns.co.uk/hmw-demo/wp-content/plugins/woocommerce/assets/js/frontend/add-to-cart.min.js?ver=2.0.8'></script>
<script type='text/javascript'>
/* <![CDATA[ */
var woocommerce_params = {"countries":"{\\"AF\\":[],\\"AT\\":[],\\"BE\\":[],\\"BI\\":[],\\"CZ\\":[],\\"DE\\":[],\\"DK\\":[],\\"FI\\":[],\\"FR\\":[],\\"HU\\":[],\\"IS\\":[],\\"IL\\":[],\\"KR\\":[],\\"NL\\":[],\\"NO\\":[],\\"PL\\":[],\\"PT\\":[],\\"SG\\":[],\\"SK\\":[],\\"SI\\":[],\\"LK\\":[],\\"SE\\":[],\\"VN\\":[],\\"AU\\":{\\"ACT\\":\\"Australian Capital Territory\\",\\"NSW\\":\\"New South Wales\\",\\"NT\\":\\"Northern Territory\\",\\"QLD\\":\\"Queensland\\",\\"SA\\":\\"South Australia\\",\\"TAS\\":\\"Tasmania\\",\\"VIC\\":\\"Victoria\\",\\"WA\\":\\"Western Australia\\"},\\"BR\\":{\\"AC\\":\\"Acre\\",\\"AL\\":\\"Alagoas\\",\\"AP\\":\\"Amap\\u00e1\\",\\"AM\\":\\"Amazonas\\",\\"BH\\":\\"Bahia\\",\\"CE\\":\\"Cear\\u00e1\\",\\"DF\\":\\"Distrito Federal\\",\\"ES\\":\\"Esp\\u00edrito Santo\\",\\"GO\\":\\"Goi\\u00e1s\\",\\"MA\\":\\"Maranh\\u00e3o\\",\\"MT\\":\\"Mato Grosso\\",\\"MS\\":\\"Mato Grosso do Sul\\",\\"MG\\":\\"Minas Gerais\\",\\"PA\\":\\"Par\\u00e1\\",\\"PB\\":\\"Para\\u00edba\\",\\"PR\\":\\"Paran\\u00e1\\",\\"PE\\":\\"Pernambuco\\",\\"PI\\":\\"Piau\\u00ed\\",\\"RJ\\":\\"Rio de Janeiro\\",\\"RN\\":\\"Rio Grande do Norte\\",\\"RS\\":\\"Rio Grande do Sul\\",\\"RO\\":\\"Rond\\u00f4nia\\",\\"RR\\":\\"Roraima\\",\\"SC\\":\\"Santa Catarina\\",\\"SP\\":\\"S\\u00e3o Paulo\\",\\"SE\\":\\"Sergipe\\",\\"TO\\":\\"Tocantins\\"},\\"CA\\":{\\"AB\\":\\"Alberta\\",\\"BC\\":\\"British Columbia\\",\\"MB\\":\\"Manitoba\\",\\"NB\\":\\"New Brunswick\\",\\"NF\\":\\"Newfoundland\\",\\"NT\\":\\"Northwest Territories\\",\\"NS\\":\\"Nova Scotia\\",\\"NU\\":\\"Nunavut\\",\\"ON\\":\\"Ontario\\",\\"PE\\":\\"Prince Edward Island\\",\\"QC\\":\\"Quebec\\",\\"SK\\":\\"Saskatchewan\\",\\"YT\\":\\"Yukon Territory\\"},\\"CN\\":{\\"CN1\\":\\"Yunnan \\\\\\/ \\u4e91\\u5357\\",\\"CN2\\":\\"Beijing \\\\\\/ \\u5317\\u4eac\\",\\"CN3\\":\\"Tianjin \\\\\\/ \\u5929\\u6d25\\",\\"CN4\\":\\"Hebei \\\\\\/ \\u6cb3\\u5317\\",\\"CN5\\":\\"Shanxi \\\\\\/ \\u5c71\\u897f\\",\\"CN6\\":\\"Inner Mongolia \\\\\\/ \\u5167\\u8499\\u53e4\\",\\"CN7\\":\\"Liaoning \\\\\\/ \\u8fbd\\u5b81\\",\\"CN8\\":\\"Jilin \\\\\\/ \\u5409\\u6797\\",\\"CN9\\":\\"Heilongjiang \\\\\\/ \\u9ed1\\u9f99\\u6c5f\\",\\"CN10\\":\\"Shanghai \\\\\\/ \\u4e0a\\u6d77\\",\\"CN11\\":\\"Jiangsu \\\\\\/ \\u6c5f\\u82cf\\",\\"CN12\\":\\"Zhejiang \\\\\\/ \\u6d59\\u6c5f\\",\\"CN13\\":\\"Anhui \\\\\\/ \\u5b89\\u5fbd\\",\\"CN14\\":\\"Fujian \\\\\\/ \\u798f\\u5efa\\",\\"CN15\\":\\"Jiangxi \\\\\\/ \\u6c5f\\u897f\\",\\"CN16\\":\\"Shandong \\\\\\/ \\u5c71\\u4e1c\\",\\"CN17\\":\\"Henan \\\\\\/ \\u6cb3\\u5357\\",\\"CN18\\":\\"Hubei \\\\\\/ \\u6e56\\u5317\\",\\"CN19\\":\\"Hunan \\\\\\/ \\u6e56\\u5357\\",\\"CN20\\":\\"Guangdong \\\\\\/ \\u5e7f\\u4e1c\\",\\"CN21\\":\\"Guangxi Zhuang \\\\\\/ \\u5e7f\\u897f\\u58ee\\u65cf\\",\\"CN22\\":\\"Hainan \\\\\\/ \\u6d77\\u5357\\",\\"CN23\\":\\"Chongqing \\\\\\/ \\u91cd\\u5e86\\",\\"CN24\\":\\"Sichuan \\\\\\/ \\u56db\\u5ddd\\",\\"CN25\\":\\"Guizhou \\\\\\/ \\u8d35\\u5dde\\",\\"CN26\\":\\"Shaanxi \\\\\\/ \\u9655\\u897f\\",\\"CN27\\":\\"Gansu \\\\\\/ \\u7518\\u8083\\",\\"CN28\\":\\"Qinghai \\\\\\/ \\u9752\\u6d77\\",\\"CN29\\":\\"Ningxia Hui \\\\\\/ \\u5b81\\u590f\\",\\"CN30\\":\\"Macau \\\\\\/ \\u6fb3\\u95e8\\",\\"CN31\\":\\"Tibet \\\\\\/ \\u897f\\u85cf\\",\\"CN32\\":\\"Xinjiang \\\\\\/ \\u65b0\\u7586\\"},\\"HK\\":{\\"HONG KONG\\":\\"Hong Kong Island\\",\\"KOWLOON\\":\\"Kowloon\\",\\"NEW TERRITORIES\\":\\"New Territories\\"},\\"IN\\":{\\"AP\\":\\"Andra Pradesh\\",\\"AR\\":\\"Arunachal Pradesh\\",\\"AS\\":\\"Assam\\",\\"BR\\":\\"Bihar\\",\\"CT\\":\\"Chhattisgarh\\",\\"GA\\":\\"Goa\\",\\"GJ\\":\\"Gujarat\\",\\"HR\\":\\"Haryana\\",\\"HP\\":\\"Himachal Pradesh\\",\\"JK\\":\\"Jammu and Kashmir\\",\\"JH\\":\\"Jharkhand\\",\\"KA\\":\\"Karnataka\\",\\"KL\\":\\"Kerala\\",\\"MP\\":\\"Madhya Pradesh\\",\\"MH\\":\\"Maharashtra\\",\\"MN\\":\\"Manipur\\",\\"ML\\":\\"Meghalaya\\",\\"MZ\\":\\"Mizoram\\",\\"NL\\":\\"Nagaland\\",\\"OR\\":\\"Orissa\\",\\"PB\\":\\"Punjab\\",\\"RJ\\":\\"Rajasthan\\",\\"SK\\":\\"Sikkim\\",\\"TN\\":\\"Tamil Nadu\\",\\"TR\\":\\"Tripura\\",\\"UT\\":\\"Uttaranchal\\",\\"UP\\":\\"Uttar Pradesh\\",\\"WB\\":\\"West Bengal\\",\\"AN\\":\\"Andaman and Nicobar Islands\\",\\"CH\\":\\"Chandigarh\\",\\"DN\\":\\"Dadar and Nagar Haveli\\",\\"DD\\":\\"Daman and Diu\\",\\"DL\\":\\"Delhi\\",\\"LD\\":\\"Lakshadeep\\",\\"PY\\":\\"Pondicherry (Puducherry)\\"},\\"ID\\":{\\"AC\\":\\"Daerah Istimewa Aceh\\",\\"SU\\":\\"Sumatera Utara\\",\\"SB\\":\\"Sumatera Barat\\",\\"RI\\":\\"Riau\\",\\"KR\\":\\"Kepulauan Riau\\",\\"JA\\":\\"Jambi\\",\\"SS\\":\\"Sumatera Selatan\\",\\"BB\\":\\"Bangka Belitung\\",\\"BE\\":\\"Bengkulu\\",\\"LA\\":\\"Lampung\\",\\"JK\\":\\"DKI Jakarta\\",\\"JB\\":\\"Jawa Barat\\",\\"BT\\":\\"Banten\\",\\"JT\\":\\"Jawa Tengah\\",\\"JI\\":\\"Jawa Timur\\",\\"YO\\":\\"Daerah Istimewa Yogyakarta\\",\\"BA\\":\\"Bali\\",\\"NB\\":\\"Nusa Tenggara Barat\\",\\"NT\\":\\"Nusa Tenggara Timur\\",\\"KB\\":\\"Kalimantan Barat\\",\\"KT\\":\\"Kalimantan Tengah\\",\\"KI\\":\\"Kalimantan Timur\\",\\"KS\\":\\"Kalimantan Selatan\\",\\"KU\\":\\"Kalimantan Utara\\",\\"SA\\":\\"Sulawesi Utara\\",\\"ST\\":\\"Sulawesi Tengah\\",\\"SG\\":\\"Sulawesi Tenggara\\",\\"SR\\":\\"Sulawesi Barat\\",\\"SN\\":\\"Sulawesi Selatan\\",\\"GO\\":\\"Gorontalo\\",\\"MA\\":\\"Maluku\\",\\"MU\\":\\"Maluku Utara\\",\\"PA\\":\\"Papua\\",\\"PB\\":\\"Papua Barat\\"},\\"MY\\":{\\"JHR\\":\\"Johor\\",\\"KDH\\":\\"Kedah\\",\\"KTN\\":\\"Kelantan\\",\\"MLK\\":\\"Melaka\\",\\"NSN\\":\\"Negeri Sembilan\\",\\"PHG\\":\\"Pahang\\",\\"PRK\\":\\"Perak\\",\\"PLS\\":\\"Perlis\\",\\"PNG\\":\\"Pulau Pinang\\",\\"SBH\\":\\"Sabah\\",\\"SWK\\":\\"Sarawak\\",\\"SGR\\":\\"Selangor\\",\\"TRG\\":\\"Terengganu\\",\\"KUL\\":\\"W.P. Kuala Lumpur\\",\\"LBN\\":\\"W.P. Labuan\\",\\"PJY\\":\\"W.P. Putrajaya\\"},\\"NZ\\":{\\"NL\\":\\"Northland\\",\\"AK\\":\\"Auckland\\",\\"WA\\":\\"Waikato\\",\\"BP\\":\\"Bay of Plenty\\",\\"TK\\":\\"Taranaki\\",\\"HB\\":\\"Hawke\\u2019s Bay\\",\\"MW\\":\\"Manawatu-Wanganui\\",\\"WE\\":\\"Wellington\\",\\"NS\\":\\"Nelson\\",\\"MB\\":\\"Marlborough\\",\\"TM\\":\\"Tasman\\",\\"WC\\":\\"West Coast\\",\\"CT\\":\\"Canterbury\\",\\"OT\\":\\"Otago\\",\\"SL\\":\\"Southland\\"},\\"ZA\\":{\\"EC\\":\\"Eastern Cape\\",\\"FS\\":\\"Free State\\",\\"GP\\":\\"Gauteng\\",\\"KZN\\":\\"KwaZulu-Natal\\",\\"LP\\":\\"Limpopo\\",\\"MP\\":\\"Mpumalanga\\",\\"NC\\":\\"Northern Cape\\",\\"NW\\":\\"North West\\",\\"WC\\":\\"Western Cape\\"},\\"TH\\":{\\"TH-37\\":\\"Amnat Charoen (\\u0e2d\\u0e33\\u0e19\\u0e32\\u0e08\\u0e40\\u0e08\\u0e23\\u0e34\\u0e0d)\\",\\"TH-15\\":\\"Ang Thong (\\u0e2d\\u0e48\\u0e32\\u0e07\\u0e17\\u0e2d\\u0e07)\\",\\"TH-14\\":\\"Ayutthaya (\\u0e1e\\u0e23\\u0e30\\u0e19\\u0e04\\u0e23\\u0e28\\u0e23\\u0e35\\u0e2d\\u0e22\\u0e38\\u0e18\\u0e22\\u0e32)\\",\\"TH-10\\":\\"Bangkok (\\u0e01\\u0e23\\u0e38\\u0e07\\u0e40\\u0e17\\u0e1e\\u0e21\\u0e2b\\u0e32\\u0e19\\u0e04\\u0e23)\\",\\"TH-38\\":\\"Bueng Kan (\\u0e1a\\u0e36\\u0e07\\u0e01\\u0e32\\u0e2c)\\",\\"TH-31\\":\\"Buri Ram (\\u0e1a\\u0e38\\u0e23\\u0e35\\u0e23\\u0e31\\u0e21\\u0e22\\u0e4c)\\",\\"TH-24\\":\\"Chachoengsao (\\u0e09\\u0e30\\u0e40\\u0e0a\\u0e34\\u0e07\\u0e40\\u0e17\\u0e23\\u0e32)\\",\\"TH-18\\":\\"Chai Nat (\\u0e0a\\u0e31\\u0e22\\u0e19\\u0e32\\u0e17)\\",\\"TH-36\\":\\"Chaiyaphum (\\u0e0a\\u0e31\\u0e22\\u0e20\\u0e39\\u0e21\\u0e34)\\",\\"TH-22\\":\\"Chanthaburi (\\u0e08\\u0e31\\u0e19\\u0e17\\u0e1a\\u0e38\\u0e23\\u0e35)\\",\\"TH-50\\":\\"Chiang Mai (\\u0e40\\u0e0a\\u0e35\\u0e22\\u0e07\\u0e43\\u0e2b\\u0e21\\u0e48)\\",\\"TH-57\\":\\"Chiang Rai (\\u0e40\\u0e0a\\u0e35\\u0e22\\u0e07\\u0e23\\u0e32\\u0e22)\\",\\"TH-20\\":\\"Chonburi (\\u0e0a\\u0e25\\u0e1a\\u0e38\\u0e23\\u0e35)\\",\\"TH-86\\":\\"Chumphon (\\u0e0a\\u0e38\\u0e21\\u0e1e\\u0e23)\\",\\"TH-46\\":\\"Kalasin (\\u0e01\\u0e32\\u0e2c\\u0e2a\\u0e34\\u0e19\\u0e18\\u0e38\\u0e4c)\\",\\"TH-62\\":\\"Kamphaeng Phet (\\u0e01\\u0e33\\u0e41\\u0e1e\\u0e07\\u0e40\\u0e1e\\u0e0a\\u0e23)\\",\\"TH-71\\":\\"Kanchanaburi (\\u0e01\\u0e32\\u0e0d\\u0e08\\u0e19\\u0e1a\\u0e38\\u0e23\\u0e35)\\",\\"TH-40\\":\\"Khon Kaen (\\u0e02\\u0e2d\\u0e19\\u0e41\\u0e01\\u0e48\\u0e19)\\",\\"TH-81\\":\\"Krabi (\\u0e01\\u0e23\\u0e30\\u0e1a\\u0e35\\u0e48)\\",\\"TH-52\\":\\"Lampang (\\u0e25\\u0e33\\u0e1b\\u0e32\\u0e07)\\",\\"TH-51\\":\\"Lamphun (\\u0e25\\u0e33\\u0e1e\\u0e39\\u0e19)\\",\\"TH-42\\":\\"Loei (\\u0e40\\u0e25\\u0e22)\\",\\"TH-16\\":\\"Lopburi (\\u0e25\\u0e1e\\u0e1a\\u0e38\\u0e23\\u0e35)\\",\\"TH-58\\":\\"Mae Hong Son (\\u0e41\\u0e21\\u0e48\\u0e2e\\u0e48\\u0e2d\\u0e07\\u0e2a\\u0e2d\\u0e19)\\",\\"TH-44\\":\\"Maha Sarakham (\\u0e21\\u0e2b\\u0e32\\u0e2a\\u0e32\\u0e23\\u0e04\\u0e32\\u0e21)\\",\\"TH-49\\":\\"Mukdahan (\\u0e21\\u0e38\\u0e01\\u0e14\\u0e32\\u0e2b\\u0e32\\u0e23)\\",\\"TH-26\\":\\"Nakhon Nayok (\\u0e19\\u0e04\\u0e23\\u0e19\\u0e32\\u0e22\\u0e01)\\",\\"TH-73\\":\\"Nakhon Pathom (\\u0e19\\u0e04\\u0e23\\u0e1b\\u0e10\\u0e21)\\",\\"TH-48\\":\\"Nakhon Phanom (\\u0e19\\u0e04\\u0e23\\u0e1e\\u0e19\\u0e21)\\",\\"TH-30\\":\\"Nakhon Ratchasima (\\u0e19\\u0e04\\u0e23\\u0e23\\u0e32\\u0e0a\\u0e2a\\u0e35\\u0e21\\u0e32)\\",\\"TH-60\\":\\"Nakhon Sawan (\\u0e19\\u0e04\\u0e23\\u0e2a\\u0e27\\u0e23\\u0e23\\u0e04\\u0e4c)\\",\\"TH-80\\":\\"Nakhon Si Thammarat (\\u0e19\\u0e04\\u0e23\\u0e28\\u0e23\\u0e35\\u0e18\\u0e23\\u0e23\\u0e21\\u0e23\\u0e32\\u0e0a)\\",\\"TH-55\\":\\"Nan (\\u0e19\\u0e48\\u0e32\\u0e19)\\",\\"TH-96\\":\\"Narathiwat (\\u0e19\\u0e23\\u0e32\\u0e18\\u0e34\\u0e27\\u0e32\\u0e2a)\\",\\"TH-39\\":\\"Nong Bua Lam Phu (\\u0e2b\\u0e19\\u0e2d\\u0e07\\u0e1a\\u0e31\\u0e27\\u0e25\\u0e33\\u0e20\\u0e39)\\",\\"TH-43\\":\\"Nong Khai (\\u0e2b\\u0e19\\u0e2d\\u0e07\\u0e04\\u0e32\\u0e22)\\",\\"TH-12\\":\\"Nonthaburi (\\u0e19\\u0e19\\u0e17\\u0e1a\\u0e38\\u0e23\\u0e35)\\",\\"TH-13\\":\\"Pathum Thani (\\u0e1b\\u0e17\\u0e38\\u0e21\\u0e18\\u0e32\\u0e19\\u0e35)\\",\\"TH-94\\":\\"Pattani (\\u0e1b\\u0e31\\u0e15\\u0e15\\u0e32\\u0e19\\u0e35)\\",\\"TH-82\\":\\"Phang Nga (\\u0e1e\\u0e31\\u0e07\\u0e07\\u0e32)\\",\\"TH-93\\":\\"Phatthalung (\\u0e1e\\u0e31\\u0e17\\u0e25\\u0e38\\u0e07)\\",\\"TH-56\\":\\"Phayao (\\u0e1e\\u0e30\\u0e40\\u0e22\\u0e32)\\",\\"TH-67\\":\\"Phetchabun (\\u0e40\\u0e1e\\u0e0a\\u0e23\\u0e1a\\u0e39\\u0e23\\u0e13\\u0e4c)\\",\\"TH-76\\":\\"Phetchaburi (\\u0e40\\u0e1e\\u0e0a\\u0e23\\u0e1a\\u0e38\\u0e23\\u0e35)\\",\\"TH-66\\":\\"Phichit (\\u0e1e\\u0e34\\u0e08\\u0e34\\u0e15\\u0e23)\\",\\"TH-65\\":\\"Phitsanulok (\\u0e1e\\u0e34\\u0e29\\u0e13\\u0e38\\u0e42\\u0e25\\u0e01)\\",\\"TH-54\\":\\"Phrae (\\u0e41\\u0e1e\\u0e23\\u0e48)\\",\\"TH-83\\":\\"Phuket (\\u0e20\\u0e39\\u0e40\\u0e01\\u0e47\\u0e15)\\",\\"TH-25\\":\\"Prachin Buri (\\u0e1b\\u0e23\\u0e32\\u0e08\\u0e35\\u0e19\\u0e1a\\u0e38\\u0e23\\u0e35)\\",\\"TH-77\\":\\"Prachuap Khiri Khan (\\u0e1b\\u0e23\\u0e30\\u0e08\\u0e27\\u0e1a\\u0e04\\u0e35\\u0e23\\u0e35\\u0e02\\u0e31\\u0e19\\u0e18\\u0e4c)\\",\\"TH-85\\":\\"Ranong (\\u0e23\\u0e30\\u0e19\\u0e2d\\u0e07)\\",\\"TH-70\\":\\"Ratchaburi (\\u0e23\\u0e32\\u0e0a\\u0e1a\\u0e38\\u0e23\\u0e35)\\",\\"TH-21\\":\\"Rayong (\\u0e23\\u0e30\\u0e22\\u0e2d\\u0e07)\\",\\"TH-45\\":\\"Roi Et (\\u0e23\\u0e49\\u0e2d\\u0e22\\u0e40\\u0e2d\\u0e47\\u0e14)\\",\\"TH-27\\":\\"Sa Kaeo (\\u0e2a\\u0e23\\u0e30\\u0e41\\u0e01\\u0e49\\u0e27)\\",\\"TH-47\\":\\"Sakon Nakhon (\\u0e2a\\u0e01\\u0e25\\u0e19\\u0e04\\u0e23)\\",\\"TH-11\\":\\"Samut Prakan (\\u0e2a\\u0e21\\u0e38\\u0e17\\u0e23\\u0e1b\\u0e23\\u0e32\\u0e01\\u0e32\\u0e23)\\",\\"TH-74\\":\\"Samut Sakhon (\\u0e2a\\u0e21\\u0e38\\u0e17\\u0e23\\u0e2a\\u0e32\\u0e04\\u0e23)\\",\\"TH-75\\":\\"Samut Songkhram (\\u0e2a\\u0e21\\u0e38\\u0e17\\u0e23\\u0e2a\\u0e07\\u0e04\\u0e23\\u0e32\\u0e21)\\",\\"TH-19\\":\\"Saraburi (\\u0e2a\\u0e23\\u0e30\\u0e1a\\u0e38\\u0e23\\u0e35)\\",\\"TH-91\\":\\"Satun (\\u0e2a\\u0e15\\u0e39\\u0e25)\\",\\"TH-17\\":\\"Sing Buri (\\u0e2a\\u0e34\\u0e07\\u0e2b\\u0e4c\\u0e1a\\u0e38\\u0e23\\u0e35)\\",\\"TH-33\\":\\"Sisaket (\\u0e28\\u0e23\\u0e35\\u0e2a\\u0e30\\u0e40\\u0e01\\u0e29)\\",\\"TH-90\\":\\"Songkhla (\\u0e2a\\u0e07\\u0e02\\u0e25\\u0e32)\\",\\"TH-64\\":\\"Sukhothai (\\u0e2a\\u0e38\\u0e42\\u0e02\\u0e17\\u0e31\\u0e22)\\",\\"TH-72\\":\\"Suphan Buri (\\u0e2a\\u0e38\\u0e1e\\u0e23\\u0e23\\u0e13\\u0e1a\\u0e38\\u0e23\\u0e35)\\",\\"TH-84\\":\\"Surat Thani (\\u0e2a\\u0e38\\u0e23\\u0e32\\u0e29\\u0e0e\\u0e23\\u0e4c\\u0e18\\u0e32\\u0e19\\u0e35)\\",\\"TH-32\\":\\"Surin (\\u0e2a\\u0e38\\u0e23\\u0e34\\u0e19\\u0e17\\u0e23\\u0e4c)\\",\\"TH-63\\":\\"Tak (\\u0e15\\u0e32\\u0e01)\\",\\"TH-92\\":\\"Trang (\\u0e15\\u0e23\\u0e31\\u0e07)\\",\\"TH-23\\":\\"Trat (\\u0e15\\u0e23\\u0e32\\u0e14)\\",\\"TH-34\\":\\"Ubon Ratchathani (\\u0e2d\\u0e38\\u0e1a\\u0e25\\u0e23\\u0e32\\u0e0a\\u0e18\\u0e32\\u0e19\\u0e35)\\",\\"TH-41\\":\\"Udon Thani (\\u0e2d\\u0e38\\u0e14\\u0e23\\u0e18\\u0e32\\u0e19\\u0e35)\\",\\"TH-61\\":\\"Uthai Thani (\\u0e2d\\u0e38\\u0e17\\u0e31\\u0e22\\u0e18\\u0e32\\u0e19\\u0e35)\\",\\"TH-53\\":\\"Uttaradit (\\u0e2d\\u0e38\\u0e15\\u0e23\\u0e14\\u0e34\\u0e15\\u0e16\\u0e4c)\\",\\"TH-95\\":\\"Yala (\\u0e22\\u0e30\\u0e25\\u0e32)\\",\\"TH-35\\":\\"Yasothon (\\u0e22\\u0e42\\u0e2a\\u0e18\\u0e23)\\"},\\"US\\":{\\"AL\\":\\"Alabama\\",\\"AK\\":\\"Alaska\\",\\"AZ\\":\\"Arizona\\",\\"AR\\":\\"Arkansas\\",\\"CA\\":\\"California\\",\\"CO\\":\\"Colorado\\",\\"CT\\":\\"Connecticut\\",\\"DE\\":\\"Delaware\\",\\"DC\\":\\"District Of Columbia\\",\\"FL\\":\\"Florida\\",\\"GA\\":\\"Georgia\\",\\"HI\\":\\"Hawaii\\",\\"ID\\":\\"Idaho\\",\\"IL\\":\\"Illinois\\",\\"IN\\":\\"Indiana\\",\\"IA\\":\\"Iowa\\",\\"KS\\":\\"Kansas\\",\\"KY\\":\\"Kentucky\\",\\"LA\\":\\"Louisiana\\",\\"ME\\":\\"Maine\\",\\"MD\\":\\"Maryland\\",\\"MA\\":\\"Massachusetts\\",\\"MI\\":\\"Michigan\\",\\"MN\\":\\"Minnesota\\",\\"MS\\":\\"Mississippi\\",\\"MO\\":\\"Missouri\\",\\"MT\\":\\"Montana\\",\\"NE\\":\\"Nebraska\\",\\"NV\\":\\"Nevada\\",\\"NH\\":\\"New Hampshire\\",\\"NJ\\":\\"New Jersey\\",\\"NM\\":\\"New Mexico\\",\\"NY\\":\\"New York\\",\\"NC\\":\\"North Carolina\\",\\"ND\\":\\"North Dakota\\",\\"OH\\":\\"Ohio\\",\\"OK\\":\\"Oklahoma\\",\\"OR\\":\\"Oregon\\",\\"PA\\":\\"Pennsylvania\\",\\"RI\\":\\"Rhode Island\\",\\"SC\\":\\"South Carolina\\",\\"SD\\":\\"South Dakota\\",\\"TN\\":\\"Tennessee\\",\\"TX\\":\\"Texas\\",\\"UT\\":\\"Utah\\",\\"VT\\":\\"Vermont\\",\\"VA\\":\\"Virginia\\",\\"WA\\":\\"Washington\\",\\"WV\\":\\"West Virginia\\",\\"WI\\":\\"Wisconsin\\",\\"WY\\":\\"Wyoming\\",\\"AA\\":\\"Armed Forces (AA)\\",\\"AE\\":\\"Armed Forces (AE)\\",\\"AP\\":\\"Armed Forces (AP)\\",\\"AS\\":\\"American Samoa\\",\\"GU\\":\\"Guam\\",\\"MP\\":\\"Northern Mariana Islands\\",\\"PR\\":\\"Puerto Rico\\",\\"UM\\":\\"US Minor Outlying Islands\\",\\"VI\\":\\"US Virgin Islands\\"}}","plugin_url":"http:\\/\\/www.organicwebdesigns.co.uk\\/hmw-demo\\/wp-content\\/plugins\\/woocommerce","ajax_url":"\\/hmw-demo\\/wp-admin\\/admin-ajax.php","ajax_loader_url":"http:\\/\\/www.organicwebdesigns.co.uk\\/hmw-demo\\/wp-content\\/plugins\\/woocommerce\\/assets\\/images\\/ajax-loader@2x.gif","i18n_select_state_text":"Select an option\\u2026","i18n_required_rating_text":"Please select a rating","i18n_no_matching_variations_text":"Sorry, no products matched your selection. Please choose a different combination.","i18n_required_text":"required","i18n_view_cart":"View Cart \\u2192","review_rating_required":"yes","update_order_review_nonce":"e67e7cf016","apply_coupon_nonce":"de6a2b5f65","option_guest_checkout":"yes","checkout_url":"\\/hmw-demo\\/wp-admin\\/admin-ajax.php?action=woocommerce-checkout","is_checkout":"0","update_shipping_method_nonce":"f3dda7520a","add_to_cart_nonce":"0c58a6ed24","cart_url":"http:\\/\\/www.organicwebdesigns.co.uk\\/hmw-demo\\/?page_id=1794","cart_redirect_after_add":"no"};
/* ]]> */
</script>
<script type='text/javascript' src='http://www.organicwebdesigns.co.uk/hmw-demo/wp-content/plugins/woocommerce/assets/js/frontend/woocommerce.min.js?ver=2.0.8'></script>
<script type='text/javascript' src='http://www.organicwebdesigns.co.uk/hmw-demo/wp-content/plugins/woocommerce/assets/js/jquery-cookie/jquery.cookie.min.js?ver=1.3.1'></script>
<script type='text/javascript' src='http://www.organicwebdesigns.co.uk/hmw-demo/wp-content/plugins/woocommerce/assets/js/frontend/cart-fragments.min.js?ver=2.0.8'></script>
<script type='text/javascript' src='http://www.organicwebdesigns.co.uk/hmw-demo/wp-content/plugins/woocommerce/assets/js/jquery-placeholder/jquery.placeholder.min.js?ver=2.0.8'></script>
<script type='text/javascript' src='http://www.organicwebdesigns.co.uk/hmw-demo/wp-content/themes/maestro/assets/js/foundation.min.js'></script>
<script type='text/javascript' src='http://www.organicwebdesigns.co.uk/hmw-demo/wp-content/themes/maestro/assets/js/app.js'></script>
<script type='text/javascript' src='http://www.organicwebdesigns.co.uk/hmw-demo/wp-content/themes/maestro/assets/js/gmap3.min.js'></script>
<script type='text/javascript' src='http://www.organicwebdesigns.co.uk/hmw-demo/wp-includes/js/jquery/jquery.color.min.js?ver=2.1.0'></script>
<script type='text/javascript' src='http://www.organicwebdesigns.co.uk/hmw-demo/wp-content/plugins/js_composer/assets/flexslider/jquery.flexslider-min.js?ver=3.5.5'></script>
<script type='text/javascript' src='http://www.organicwebdesigns.co.uk/hmw-demo/wp-content/plugins/js_composer/assets/js/prettyphoto/js/jquery.prettyPhoto.js?ver=3.5.5'></script>
<script type='text/javascript' src='http://www.organicwebdesigns.co.uk/hmw-demo/wp-content/plugins/crumina_slider/js/crumina_slider_content.js?ver=3.6.2'></script>
<script type='text/javascript' src='http://www.organicwebdesigns.co.uk/hmw-demo/wp-content/plugins/js_composer/assets/js_composer_front.js?ver=3.5.5'></script>
</body>
</html>
But all I really needed was this:
<!DOCTYPE html>
<html class="no-js" lang="en-US">
<head>
<meta charset="utf-8">
<title>Slider</title>
<link rel="stylesheet" href="http://www.organicwebdesigns.co.uk/hmw-demo/wp-content/themes/maestro/assets/css/foundation.min.css">
<link rel="stylesheet" href="http://www.organicwebdesigns.co.uk/hmw-demo/wp-content/themes/maestro/assets/css/app.css">
<link rel="stylesheet" href="http://www.organicwebdesigns.co.uk/hmw-demo/wp-content/themes/maestro/assets/css/flexslider.css">
<link rel="stylesheet" href="http://www.organicwebdesigns.co.uk/hmw-demo/wp-content/themes/maestro/css/options.css">
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
</head>
<body>
<div id="change_wrap_div">
<section id="layout">
<div class="row">
<div class="twelve columns">
<div id="et-product-slider">
<div class="et-carousel-wrapper">
<ul class="clearfix" style="width: 3000px; left: 0px;">
<li class="et-product">
<a href="#">
<img width="220" height="9999" alt="Product 1" src="http://www.organicwebdesigns.co.uk/hmw-demo/wp-content/uploads/2013/04/product-1.png">
</a>
<h3><a href="#">Product 1</a></h3>
<div class="et-price-button">
<span class="et-price-sale">
<span class="amount"><span class="lighter">£</span>10</span>
</span>
</div>
</li>
<li class="et-product">
<a href="#">
<img width="220" height="9999" alt="product 2" src="http://www.organicwebdesigns.co.uk/hmw-demo/wp-content/uploads/2013/04/product-1.png">
</a>
<h3><a href="#">Product 2</a></h3>
<div class="et-price-button">
<span class="et-price-sale">
<span class="amount"><span class="lighter">£</span>29</span>
</span>
</div>
</li>
</ul>
</div>
<div class="et-slider-arrows">
<a href="#" class="et-arrow-prev"><span>Previous</span></a>
<a href="#" class="et-arrow-next"><span>Next</span></a>
</div>
</div>
</div>
</div>
</section>
</div>
</body>
</html>
Please don’t take this the wrong way, what you did was a big help already (and more than a lot of people are willing to do). I just wanted to point this out for future reference 
Anyway, I thought it might be fun to write this using JavaScript, a opposed to use a plugin.
Here’s my first idea. What do you think?
It’s coded very badly, so please don’t use this on your page yet, I just wanted to make sure we were moving in the right direction.
Yes that’s exactly!!! Mine doesn’t work as good as yours though, it jumps up when you press the button and the right arrow moves but the left doesn’t.
Ok, I’ll refine my script tomorrow and post some more then.
Off to bed now, as it’s late.
Thanks I really appreciate it,
Much fun
would you recomment putting the js at the end of the poage or in an external file?
If you put it at the end of the page, it will have two advantages:
-
any elements that your JS references will exist in the DOM, thus the call to
$(document).ready(function(){ ... });will not normally be needed. -
It will give the page the appearance of loading faster.
I’m just playing around with your slider now. I’ll post back when I’ve got everything working.
ahh I see
ok looking forward
many thanks
So, I finished the slider.
You can find it here.
I had to alter the CSS of .et-carousel-wrapper and ul.clearfix a tiny bit. You can see my changes in the header of the document.
Apart from that I corrected a couple of bugs (the page doesn’t jump on scroll and you cannot scroll past the final image, no matter how hard you try).
The code is also considerably more robust than what I posted in my previous demo.
You should just be able to drop it into your page and have it work.
Here’s the code, just to be complete:
<!DOCTYPE html>
<html class="no-js" lang="en-US">
<head>
<meta charset="utf-8">
<title>Slider Demo</title>
<link rel="stylesheet" href="http://www.organicwebdesigns.co.uk/hmw-demo/wp-content/themes/maestro/assets/css/foundation.min.css">
<link rel="stylesheet" href="http://www.organicwebdesigns.co.uk/hmw-demo/wp-content/themes/maestro/assets/css/app.css">
<link rel="stylesheet" href="http://www.organicwebdesigns.co.uk/hmw-demo/wp-content/themes/maestro/assets/css/flexslider.css">
<link rel="stylesheet" href="http://www.organicwebdesigns.co.uk/hmw-demo/wp-content/themes/maestro/css/options.css">
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<style>
.et-carousel-wrapper{
margin:50px auto;
padding:26px 22px;
width: 944px;
}
ul.clearfix{
width: 2832px;
left: 0px;
}
</style>
</head>
<body>
<div id="change_wrap_div">
<section id="layout">
<div class="row">
<div class="twelve columns">
<div id="et-product-slider">
<div class="et-carousel-wrapper">
<ul class="clearfix">
<li class="et-product">
<a href="#">
<img width="220" height="9999" alt="Product 1" src="http://www.organicwebdesigns.co.uk/hmw-demo/wp-content/uploads/2013/04/product-1.png">
</a>
<h3><a href="#">Product 1</a></h3>
<div class="et-price-button">
<span class="et-price-sale">
<span class="amount"><span class="lighter">£</span>10</span>
</span>
</div>
</li>
<li class="et-product">
<a href="#">
<img width="220" height="9999" alt="product 2" src="http://www.organicwebdesigns.co.uk/hmw-demo/wp-content/uploads/2013/04/product-1.png">
</a>
<h3><a href="#">Product 2</a></h3>
<div class="et-price-button">
<span class="et-price-sale">
<span class="amount"><span class="lighter">£</span>29</span>
</span>
</div>
</li>
<li class="et-product">
<a href="#">
<img width="220" height="9999" alt="product 2" src="http://www.organicwebdesigns.co.uk/hmw-demo/wp-content/uploads/2013/04/product-1.png">
</a>
<h3><a href="#">Product 3</a></h3>
<div class="et-price-button">
<span class="et-price-sale">
<span class="amount"><span class="lighter">£</span>29</span>
</span>
</div>
</li>
<li class="et-product">
<a href="#">
<img width="220" height="9999" alt="product 2" src="http://www.organicwebdesigns.co.uk/hmw-demo/wp-content/uploads/2013/04/product-1.png">
</a>
<h3><a href="#">Product 4</a></h3>
<div class="et-price-button">
<span class="et-price-sale">
<span class="amount"><span class="lighter">£</span>29</span>
</span>
</div>
</li>
<li class="et-product">
<a href="#">
<img width="220" height="9999" alt="product 2" src="http://www.organicwebdesigns.co.uk/hmw-demo/wp-content/uploads/2013/04/product-1.png">
</a>
<h3><a href="#">Product 5</a></h3>
<div class="et-price-button">
<span class="et-price-sale">
<span class="amount"><span class="lighter">£</span>29</span>
</span>
</div>
</li>
<li class="et-product">
<a href="#">
<img width="220" height="9999" alt="product 2" src="http://www.organicwebdesigns.co.uk/hmw-demo/wp-content/uploads/2013/04/product-1.png">
</a>
<h3><a href="#">Product 6</a></h3>
<div class="et-price-button">
<span class="et-price-sale">
<span class="amount"><span class="lighter">£</span>29</span>
</span>
</div>
</li>
<li class="et-product">
<a href="#">
<img width="220" height="9999" alt="product 2" src="http://www.organicwebdesigns.co.uk/hmw-demo/wp-content/uploads/2013/04/product-1.png">
</a>
<h3><a href="#">Product 7</a></h3>
<div class="et-price-button">
<span class="et-price-sale">
<span class="amount"><span class="lighter">£</span>29</span>
</span>
</div>
</li>
<li class="et-product">
<a href="#">
<img width="220" height="9999" alt="product 2" src="http://www.organicwebdesigns.co.uk/hmw-demo/wp-content/uploads/2013/04/product-1.png">
</a>
<h3><a href="#">Product 8</a></h3>
<div class="et-price-button">
<span class="et-price-sale">
<span class="amount"><span class="lighter">£</span>29</span>
</span>
</div>
</li>
<li class="et-product">
<a href="#">
<img width="220" height="9999" alt="product 2" src="http://www.organicwebdesigns.co.uk/hmw-demo/wp-content/uploads/2013/04/product-1.png">
</a>
<h3><a href="#">Product 9</a></h3>
<div class="et-price-button">
<span class="et-price-sale">
<span class="amount"><span class="lighter">£</span>29</span>
</span>
</div>
</li>
<li class="et-product">
<a href="#">
<img width="220" height="9999" alt="product 2" src="http://www.organicwebdesigns.co.uk/hmw-demo/wp-content/uploads/2013/04/product-1.png">
</a>
<h3><a href="#">Product 10</a></h3>
<div class="et-price-button">
<span class="et-price-sale">
<span class="amount"><span class="lighter">£</span>29</span>
</span>
</div>
</li>
<li class="et-product">
<a href="#">
<img width="220" height="9999" alt="product 2" src="http://www.organicwebdesigns.co.uk/hmw-demo/wp-content/uploads/2013/04/product-1.png">
</a>
<h3><a href="#">Product 11</a></h3>
<div class="et-price-button">
<span class="et-price-sale">
<span class="amount"><span class="lighter">£</span>29</span>
</span>
</div>
</li>
<li class="et-product">
<a href="#">
<img width="220" height="9999" alt="product 2" src="http://www.organicwebdesigns.co.uk/hmw-demo/wp-content/uploads/2013/04/product-1.png">
</a>
<h3><a href="#">Product 12</a></h3>
<div class="et-price-button">
<span class="et-price-sale">
<span class="amount"><span class="lighter">£</span>29</span>
</span>
</div>
</li>
</ul>
</div>
<div class="et-slider-arrows">
<a href="#" class="et-arrow-prev"><span>Previous</span></a>
<a href="#" class="et-arrow-next"><span>Next</span></a>
</div>
</div>
</div>
</div>
</section>
</div>
<script>
var Slider = {
thumbsContainer: $(".clearfix"),
thumbWidth: $(".clearfix").find("li").outerWidth(),
currentPos: 0,
updateCurrentPosition: function(){
this.currentPos = Math.abs(parseInt(this.thumbsContainer.css('left')));
},
scrollLeft: function(){
if (this.currentPos < this.thumbsContainer.width() - (4 * this.thumbWidth)){
this.thumbsContainer.filter(':not(:animated)').animate({left: '-=' + this.thumbWidth}, function(){
Slider.updateCurrentPosition();
});
}
},
scrollRight: function(){
if (this.currentPos > 0){
this.thumbsContainer.filter(':not(:animated)').animate({left: '+=' + this.thumbWidth}, function(){
Slider.updateCurrentPosition();
});
}
},
init: function(){
$(".et-arrow-prev").on("click", function(e){
e.preventDefault();
Slider.scrollLeft();
});
$(".et-arrow-next").on("click", function(e){
e.preventDefault();
Slider.scrollRight();
});
}
}
Slider.init();
</script>
</body>
</html>
I hope that helps you.
BTW: I was just looking at your homepage. Are you a graphic designer (or do you possess graphic design skills)?
Wow, it’s great!!! Pardon me for my ignorance, I come across the bugs thing alot what does it actually mean when something has bugs? I tried this on my page and I can’t scroll it at all how do I get over this? http://organicwebdesigns.co.uk/hmw-demo
I’m impressed if this is all hand written and very appreciative that someone will take the time to show me how to do it.
wrt to my home page I’m just starting out and trying out my first few projects. I try with graphics where I can and am self taught but can do basic graphic stuff otherwise it’s purchsed. I just started a course for jscript and am overwheled a little so I’ve decided to try and do things practically, I feel I learn better that way. Jumping into learning code gets me wondering what it’s all for. I guess like learning Algebra. What’s th point in knowing the value of x when you don’t even know what x is representing?
A bug is an error in a computer program that produces an incorrect or unexpected result.
For example, in my previous version, if you scrolled slowly, you couldn’t scroll past the final image, however, if you hit the scroll button really quickly, the animations would build up and you could make the slider scroll out of sight.
This is unexpected/undesired behaviour and thus a bug.
To start with, you need to make the adjustments to your CSS I alluded to in my previous post:
.et-carousel-wrapper{
margin:50px auto;
padding:26px 22px;
width: 944px;
}
ul.clearfix{
width: 2832px;
left: 0px;
}
Hopefully it should work after that
I love jQuery, but I don’t like the fact that people sometimes throw plugin after plugin at a problem, when really they only need a very small subset of the plugin’s functionality.
That’s why, I try and write these things myself. It’s also a great way of learning.
Shame. I need to find a friendly graphic designer to make me a trident as my forum avatar
Good on you. Everyone has got to start somewhere and some degree of JS understanding is an invaluable skill for developpers today.
Yes, it’sa shame, i would have done it for free!
About the plug ins I was looking for some today then went againt it in the search of code.
wrt the css I placed this in my css
.et-carousel-wrapper {
margin:50px auto;
padding:26px 22px;
width: 944px;
}
and
ul.clearfix {
width: 2832px;
left: 0px;
}
but it’s like that. Something wrong with my css or something? What do you think?
Daw!
I think so. I just used Chrome’s DevTools to inspect the slider on your demo page and I cannot see any width on ul.clearfix.
If all else fails try adding them inline, just for testing purposes.
Strange!!! I have it inline and stranger things are happening
The product images about half way down the page are creating a scrollbar horizontally for me, so only part of your site is responsive
Hi,
So, the main problem is that I was targeting classes in my original JS and they are being used elsewhere on the page, which causes the script to break.
This is easily remedied using ids instead.
- Give the div element with the class of “et-carousel-wrapper” an id of “slider-outer”.
- Give the <ul> element with a class of “clearfix” an id of “slider-inner”>
- Change the JS, like so:
javascript var Slider = { thumbsContainer: $(".clearfix"), thumbWidth: $(".clearfix").find("li").outerWidth(), currentPos: 0,
becomes:
javascript var Slider = { thumbsContainer: $("#slider-inner"), thumbWidth: $("#slider-inner").find("li").outerWidth(), currentPos: 0,
- Apply the following CSS:
css #slider-inner{width: 2832px; left: 0px; padding-top:26px;} #slider-outer{overflow:hidden} .et-carousel-wrapper{padding:0px !important}
Here’s a demo of it working.
Unfortunately, the price tag is being cut off of the <li> items.
I managed to get around that in my original demo by adding:
.et-carousel-wrapper{
padding:26px 22px;
}
But something in your styles is overriding that.
I’m a bit short on time right now, so I’ll leave it to you to fix
Hope that helps.
ahh I did have a thought for that, ok let me try this and tell you how it goes