Please help me convert this script to a simple image slider

Question

Can some please  PLEASE  help me with this problem  Okay so I have a code that at first I thought worked well but I forgot that when the default  lt img src  test-img-1 jpg  class  actual-img  gt  content is loaded the first of the three buttons below the image should take the active css state that I ve specified for the active buttons to take  Now what I want is for this little code to behave like a normal slider by loading in the css hidden contents into the   image-area  div and it works when I click on the buttons  Problems only surface when I am I trying to give the first loaded content an active state  One way I believe can fix this  I can t implement it  is to let the first immediate default content be this inline hidden div          lt div id  image-area2  gt         lt div class  img-area-wrapper  gt           lt img src  test-img-2 jpg  class  actual-img  gt         lt  div gt       lt  div gt   while somehow letting the first button be set to active  I should also mention that I m not the best with jquery  Please help me fix this someone   Here is a fiddle to get a better understanding  http   jsfiddle net pyrot 84sU4   If my way of going about this is totally absurd please let me know   this is my code       lt script type  text javascript  gt       document  ready function            loads default content           image-area   load     menu top a first-child   attr  href              o-links   click function               href has to be the id of the hidden content element       var href     this  attr  href                image-area   fadeOut 1000  function                   this  html         href  html    fadeIn 1000                     return false                      function               o-links   click function e                 e preventDefault                   o-links   not this  removeClass  O Nav Current                this  addClass  O Nav Current                       lt  script gt    this is my html    lt section id  image-slider-container  gt     lt div class  image-slider-inner  gt        lt div id  image-area  gt         lt div class  img-area-wrapper  gt           lt  --currently this is the default I want to change-- gt           lt img src  test-img-1 jpg  class  actual-img  gt         lt  div gt       lt  div gt        lt div id  image-area2  gt         lt div class  img-area-wrapper  gt           lt  --I would like this to be the default content that when         seen the first button is set to active-- gt           lt img src  test-img-2 jpg  class  actual-img  gt         lt  div gt       lt  div gt        lt div id  image-area3  gt         lt div class  img-area-wrapper  gt           lt img src  test-img-3 jpg  class  actual-img  gt         lt  div gt       lt  div gt        lt div class  slider-buttons  gt         lt div class  slider-buttons-container  gt           lt a href  image-area  class  o-links  gt  amp nbsp  lt  a gt           lt a href  image-area2  class  o-links  gt  amp nbsp  lt  a gt           lt a href  image-area3  class  o-links  gt  amp nbsp  lt  a gt         lt  div gt       lt  div gt      lt  div gt   lt  section gt    and this is my css     image-slider-container      width  100     height  auto    background-color   ffffff    padding  5  0px 0  0px       image-slider-inner      width  100     height  auto         max-width  1040px    margin  0px auto    padding  0px 20px 0px 20px       image-area2   image-area3      width  100     height  auto    display  none       image-area      width  100     height  auto       image-area  img-area-wrapper      width  80     height  auto         max-width  1140px    margin  0px auto       actual-img      width  100     height  100        slider-buttons      width  100     height  auto    max-width  1140px    margin-top  0px       slider-buttons-container      width  100     height  auto    max-width  1140px    margin  10px auto 0px auto    text-align  center       slider-buttons-container a      border-radius  360px    border  1px  C5C5C5 solid    padding  0px 5px 0px 5px    margin  0px 5px 0px 5px    background-color   efefef    outline  0px    text-decoration  none    font-size  12px    box-shadow  -2px 1px 2px 0px  ADADAD     transition  0 5s    -moz-transition  0 5s    -webkit-transition  0 5s    -o-transition  0 5s        slider-buttons-container a hover      border  1px  C5C5C5 solid    padding  0px 5px 0px 5px    background-color   DAD8D8      slider-buttons-container a active      position  relative    top  2px       O Nav Current      border  1px  999999 solid  important    background-color   DAD8D8  important

User · Accepted Answer

Problems only surface when I am I trying to give the first loaded content an active state

Does this mean that you want to add a class to the first button?

$('.o-links').click(function(e) {   // ... }).first().addClass('O_Nav_Current');

instead of using IDs for the slider's items and resetting html contents you can use classes and indexes:

CSS:

.image-area {     width: 100%;     height: auto;     display: none; }  .image-area:first-of-type {     display: block; }

JavaScript:

var $slides = $('.image-area'),     $btns = $('a.o-links');  $btns.on('click', function (e) {     var i = $btns.removeClass('O_Nav_Current').index(this);     $(this).addClass('O_Nav_Current');      $slides.filter(':visible').fadeOut(1000, function () {         $slides.eq(i).fadeIn(1000);     });      e.preventDefault();  }).first().addClass('O_Nav_Current');

http://jsfiddle.net/RmF57/

[javascript] Please help me convert this script to a simple image slider

Examples related to javascript

Examples related to jquery

Examples related to html

Examples related to css

Examples related to dynamic