javascript - Separate the arrows from the slider functionalities -
i have slider that's switching dividers, , above 2 arrows (prev , next) don't care way arrows or way positioned. want them functional, other functionalities applied slider such hover, being applied arrows too. how can keep buttons function (next/prev) make separate slider.
jsfiddle: http://jsfiddle.net/1ju1k0f6/
css:
#first { width: 50%; height: 220px; margin:auto; padding-left: 170px; margin-top: 2px; } #first img { height: 100px; width: 100px; float:left; margin-right: 5%; cursor: pointer; } #wrapper { width: 10%; padding: px 0; } #slider-container { padding: 20px 50px; height: 1350px; top:-18%; left: -45px; width: 700px; overflow: hidden; position: relative; } .slider-view-area { max-height: 300px; } #nav img { position: absolute; top: 40px; left: 0px; cursor:pointer; color:grey; } #prev { margin-left: 520px; font-size: 30px; } #next { right: -440px; font-size: 30px; } #mask { width: 5000px; height: 100%; } .item { width: 1200px; height: 100%; float: left; } .content img { height: 100px; width: 17%; float:left; margin-right: 10px; margin-bottom: 10px; cursor: pointer; } .content { width: 50%; height: 220px; top: 30px; left: margin: auto; position: relative; } .content { position: relative; top: -17px; left: 170px; } .selected { background: #fff; font-weight: 700; } .clear { clear:both; } .hidden { display: none; }
you can more specific in selectors targetting img
elements within div
class .slider-view-area
jquery(function ($) { $('.slider-view-area img').hover(function () { // on mouseover $('.slider-view-area img').stop().not(this).animate({ 'opacity': 0.4 }, 700); // can animate $(this).animate({ 'opacity': 1 }, 700); }, function () { // on mouseout $('#.slider-view-area img').animate({ 'opacity': 1 }, 700); }); });
Comments
Post a Comment