javascript - Carousel with button controls -


i working on carousel. have carousel moving way want trying add controls below it, small buttons link carousel images. whenever 1 active corresponding carousel active well. not sure why not working.. help

here code html

<div id="carousel"> <div class="clear"></div> <div class="slider">     <li>         <img src="http://s3.amazonaws.com/contemporaryartgroup/wp-content/uploads/2012/02/hz_gcc_vue3.jpg">     </li>     <li>         <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:and9gcq_wmcqvx7udxonz7ygodji7iko7dlreesp0rhrhigc9bsggftkyg">     </li>     <li>         <img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:and9gcrelq6cmc_pv3fhgs4rzisfal8ftjtaa0w1bxu3wr6gldr7mltimw">     </li>     <li>         <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:and9gcrivhtju30bzxefroyemfx5zhrkd-ip9haydsoz9onvfe8ctcms">     </li>     <div class="clear"></div> </div>                 </div>    <div class="buttons">       <li></li>       <li></li>       <li></li>       <li></li>       <div class="clear"></div>   </div>

jquery

    $(document).ready(function () {     // settings     var $slider = $('.slider');      var $slide = 'li';              var $transition_time = 1000; // 1 second     var $time_between_slides = 4000; // 4 seconds     var $btn = $('.buttons');     var $buttonanchor = 'li';      function slides() {         return $slider.find($slide);     }     slides().fadeout();     // set active classes     slides().first().addclass('active');     slides().first().fadein($transition_time);      //set buttons     function button() {         return $btn.find($buttonanchor);     }     button().first().removeclass('btnnotactive');     button().first().addclass('btnactive');     button().first().fadein($transition_time);      $interval = setinterval(    function () {     var $i = $slider.find($slide + '.active').index();           slides().eq($i).removeclass('active');     slides().eq($i).fadeout($transition_time);          if (slides().length == $i + 1) $i = -1; // loop start     slides().eq($i + 1).fadein($transition_time);     slides().eq($i + 1).addclass('active');      var $j = $btn.find($buttonanchor + '.btnnotactive').index();     button().eq($j).removeclass('.btnactive');     if (button().length == $j + 1) $j = -1;     button().eq($j + 1).fadein($transition_time);             button().eq($j + 1).addclass('btnnotactive'); } , $transition_time + $time_between_slides  );  });

css

<style type="text/css"> #carousel {     min-width: 255px;     min-height: 290px;     margin: 0 auto; }  .slider {     margin: 10px 0;     width: 580px; /* update slider width */     height: 250px; /* update slider height */     position: relative;     overflow: hidden; } .slider li {     display: none;     position: absolute;     top: 0;     left: 0;     list-style: none; } .buttons {     /*padding:0 0 5px 0;*/  }  .buttons li {     display: inline;  background-image: url("http://www.iconmay.com/thumbnails/detail/3/violet%20button%20violet%20dot%20circle%20blank%20empty%20violet%20button%20icon.png");     background-repeat:no-repeat; } .btnactive {     background:url(http://www.iconmay.com/thumbnails/detail/3/green%20button%20green%20dot%20circle%20blank%20empty%20green%20button%20icon.png);     background-repeat:no-repeat; }

here fiddle link

https://jsfiddle.net/wjstowl1/13/


Comments

Post a Comment

Popular posts from this blog

shopping cart - Page redirect not working PHP -

im trying redirect user when click "empty cart". redirect working "add cart" not "empty cart". ideas great. in main .php file set current url seen $current_url = base64_encode("http://$_server[http_host]$_server[request_uri]"); then below cartaction.php file handles actions such "add cart" , "empty cart" <?php session_start(); include_once 'config.php'; //add item in shopping cart if(isset($_post["add"])) { $product_id = $_post["product_id"]; //product id $return_url = base64_decode($_post["return_url"]); //return url $qty = $_post["qty"]; $product = $mysqli->query("select product_name, unit_price, unit_quantity products product_id = '$product_id'"); $obj = $product->fetch_object(); if(!isset($_session['products'])) { $_session['products'] = array(); } if(array_key_exists($product_id...
Read more

php - How to modify a menu to show sub-menus -

i have custom php menu made person, displays categories menu. however, need display subcategories well. tried adding hierarchical parameter didn't work. hoping assistance! here code: <ul> <?php /* categories wp e-commerce products */ $wpec_product_categories = get_terms( 'wpsc_product_category', 'hide_empty=0&parent=0&exclude=298'); $myarray = array(); foreach($wpec_product_categories $wpec_categories){ $myarray[$wpec_categories->term_id]['name'] = $wpec_categories->name; $myarray[$wpec_categories->term_id]['slug'] = $wpec_categories->slug; $myarray[$wpec_categories->term_id]['term_id'] = $wpec_categories->term_id; } foreach($myarray $wpec_categories1){ $wpec_term_name = $wpec_categories1['name']; $wpec_term_slug = $wpec_categories1['slug']; $wpec_term_id = $wpec_categories1['term_id']; echo '<li> <a href="'.get_page_link(19)....
Read more

python - Installing PyDev in eclipse is failed -

unable read repository @ http://pydev.sf.net/updates/content.xml. sun.security.validator.validatorexception: pkix path building failed: sun.security.provider.certpath.suncertpathbuilderexception: unable find valid certification path requested target i installing pydev in eclipse using python, doesn't install successfully. gives above error. happened? how solve error? i had error when trying install on laptop behind corporate firewall. couldn't tell setup of firewall, not sure of root cause. i got passed error installing pydev eclipse when out behind firewall. another way got around have eclipse on non-firewalled machine, install pydev eclipse, , copy whole eclipse directory non-firewalled machine firewalled machine. there better way, , way fix properly, didn't have time work out firewall doing. this on windows 7 machine (yeah know) not work *nix versions installed through package manager yum or apt.
Read more