Hover control picture Carousel code based on jquery

Hover control picture Carousel code based on jquery. This is a hover toggle full-screen carousel of jquery slides. As follows:

Online preview Source Download

Code to implement:

<!--Carousel Ads -    <DivID= "Banner_tabs"class= "Flexslider">        <ulclass= "Slides">            <Li>                <atitle=""Target= "_blank"href="#">                    <imgwidth= "1920x1080"Height= "482"alt=""style= "Background:url (images/banner1.jpg) no-repeat Center;"src= "Images/alpha.png">                </a>            </Li>            <Li>                <atitle=""href="#">                    <imgwidth= "1920x1080"Height= "482"alt=""style= "Background:url (images/banner2.jpg) no-repeat Center;"src= "Images/alpha.png">                </a>            </Li>            <Li>                <atitle=""href="#">                    <imgwidth= "1920x1080"Height= "482"alt=""style= "Background:url (images/banner3.jpg) no-repeat Center;"src= "Images/alpha.png">                </a>            </Li>        </ul>        <ulclass= "Flex-direction-nav">            <Li><aclass= "Flex-prev"href= "javascript:;">Previous</a></Li>            <Li><aclass= "Flex-next"href= "javascript:;">Next</a></Li>        </ul>        <olID= "Bannerctrl"class= "Flex-control-nav flex-control-paging">            <Li><a>1</a></Li>            <Li><a>2</a></Li>            <Li><a>2</a></Li>        </ol>    </Div>    <Scriptsrc= "Js/jquery-1.10.2.min.js"></Script>    <Scriptsrc= "Js/slider.js"></Script>    <Scripttype= "Text/javascript">        $(function () {            varBannerslider= NewSlider ($ ('#banner_tabs'), {time: the, Delay: -, Event:'Hover', Auto:true, Mode:'Fade', Controller: $ ('#bannerCtrl'), Activecontrollercls:'Active'            }); $('#banner_tabs. Flex-prev'). Click (function() {Bannerslider.prev ()}); $('#banner_tabs. Flex-next'). Click (function() {bannerslider.next ()}); })    </Script>

CSS code:

. Flexslider{margin:0px Auto 20px;position:relative;width:100%;Height:482px;Overflow:Hidden;Zoom:1; }. Flexslider. Slides Li{width:100%;Height:100%; }. Flex-direction-nav a{width:70px;Height:70px;Line-height:99em;Overflow:Hidden;margin:-35px 0 0;Display:Block;background:URL (images/ad_ctr.png) no-repeat;position:Absolute;Top:50%;Z-index:Ten;cursor:Pointer;Opacity:0;Filter:Alpha (opacity=0);-webkit-transition:All . 3s ease;Border-radius:35px; }. Flex-direction-nav. Flex-next{background-position:0-70px; Right:0; }. Flex-direction-nav. Flex-prev{ Left:0; }. Flexslider:hover. Flex-next{Opacity:0.8;Filter:Alpha (OPACITY=25); }. Flexslider:hover. Flex-prev{Opacity:0.8;Filter:Alpha (OPACITY=25); }. Flexslider:hover. Flex-next:hover,. Flexslider:hover. Flex-prev:hover{Opacity:1;Filter:Alpha (OPACITY=50); }. Flex-control-nav{width:100%;position:Absolute;Bottom:10px;text-align:Center; }. Flex-control-nav Li{margin:0 2px;Display:Inline-block;Zoom:1;*display:inline; }. flex-control-paging Li a{background:URL (images/dot.png) no-repeat 0-16px;Display:Block;Height:16px;Overflow:Hidden;text-indent:-99em;width:16px;cursor:Pointer; }. flex-control-paging Li A.flex-active,. flex-control-paging li.active a{background-position:0 0; }. Flexslider. Slides a img{width:100%;Height:482px;Display:Block; }

via:http://www.w2bc.com/article/54959

Hover control picture Carousel code based on jquery