i want image slider work in such way on hover of tab or click should change coreesponsing image can see on flipkarts home page. script have made working normal slider changes image in 5 seconds. can me achieve need.
html
<!--slide-part-starts--><div class="slide-part"> <!--slider-starts--><div class="fadein"> <img style="cursor:pointer" onclick="window.location.href='http://myevio.com/powerock-13600mah-powerbank.html'" src="bg slideshow/1.jpg"><!--powerock--> <img style="cursor:pointer" onclick="window.location.href='http://myevio.com/powerpunch-10500mah-powerbank.html'" src="bg slideshow/2.jpg"><!--powerpunch--> </div><!--slide-ends--> </div><!--slide-part-ends--> <div class="tabbed"> <ul class="tab-slide"> <li><a href="#">powerock 13600mah power banks</a></li> <li style="float:right"><a href="#">powerpunch 10500mah power banks</a></li> </ul> </div> css
.slide-part{ width:100%; max-width:1600px; margin:0 auto; min-height:100px; height:100% } .fadein { position:relative; width:100%; max-width:1600px; margin:0 auto; min-height:600px; height:100% } .fadein img { position:absolute; left:0; top:0; height:auto; max-width:100%; width: auto\9; } .tabbed{ width:100%; max-width:1600px; margin:0 auto } ul.tab-slide{ margin:0; padding:0 } ul.tab-slide li{ list-style:none; width:50%; display:block; float:left; display:list-item; text-align:center; background:#00a3d3 } ul.tab-slide li a{ position:relative; color:#000; text-decoration:none; width:100%; display:block; color:#fff; padding:15px 0 15px 0; } ul.tab-slide li:hover{background:#000;} js
<script type='text/javascript'>//<![cdata[ $(window).load(function(){ $(function(){ $('.fadein img:gt(0)').hide(); setinterval(function(){$('.fadein :first-child').fadeout().next('img').fadein().end().appendto('.fadein');}, 5000); }); });//]]> </script>
you can easy jquery , adding id's html.
first have add id image within html code:
<img id="img1" style="cursor:pointer" onclick="window.location.href='http://myevio.com/powerock-13600mah-powerbank.html'" src="linktoimage"><!--powerock--> <img id="img2" style="cursor:pointer" onclick="window.location.href='http://myevio.com/powerpunch-10500mah-powerbank.html'" src="linktoimage"> after add data-id hyperlinks:
<li><a data-id="img1" href="#">powerock 13600mah power banks</a></li> <li style="float:right"><a data-id="img2" href="#">powerpunch 10500mah power banks</a></li> when have done can add following jquery:
$('.tabbed a').on({ 'mouseenter': function() { $('.fadein img').hide(); $('#' + $(this).data('id')).fadein(); } this should trick. jsfiddle on here: https://jsfiddle.net/enhtymgk/1/
Comments
Post a Comment