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);     }); }); 

demo:http://jsfiddle.net/1ju1k0f6/1/


Comments

Popular posts from this blog

python - No exponential form of the z-axis in matplotlib-3D-plots -

php - Best Light server (Linux + Web server + Database) for Raspberry Pi -

c# - "Newtonsoft.Json.JsonSerializationException unable to find constructor to use for types" error when deserializing class -