Мое содержание слайдера не будет работать

Question

У меня есть HTML, CSS и JQuery, но это не работает. Я просто хочу, чтобы ползунок исказил изображение внутри и содержимое, а затем сдвигал его вправо, не показывая другие слайды.

Вот мой HTML:

 <div class="slider"> 
      <div id ="1"> 
       <h2>Greetings!</h2> 
       <p>Welcome to PowerUp, where imagination becomes a reality.</p> 
       <img src="../img/HTML5-Guy-BBeanie.png"> 
      </div> 
      <div id="2"> 
       <h2>Meet people.</h2> 
       <p>Work with people who get stuff done.</p> 
       <img src="../img/HTML5-Guy-BBeanie.png"> 
      </div> 
      <div id="3"> 
       <h2>Form teams.</h2> 
       <p>Create teams of engineers best suited for your needs.</p> 
       <img src="../img/HTML5-Guy-BBeanie.png"> 
      </div> 
      <div id="4"> 
       <h2>Drop by.</h2> 
       <p>Visit our drop by page and share an idea or a thought, who knows maybe someone will pick up on it.</p> 
       <img src="../img/HTML5-Guy-BBeanie.png"> 
      </div> 
     </div> 

CSS:

/********************** 
*********SLIDER******** 
**********************/ 
.slider { 
    padding: 1.2% 0 8% 0; 
    margin: 0 auto; 
    width: 100%; 
    height: 460px; 
    overflow: hidden; 
    background-color: #EFEFEF; 
} 

.slider img { 
    width: 460px; 
    height: 460px; 
    display: none; 
} 

.slider h2, .slider p { 
    display: none; 
} 

Jquery:

function topSlider() { 
$('.slider #1').show('fade', 500); 
$('.slider #1').delay(5500).hide('slide',{direction: 'left'}, 500); 

var sc = $('.slider div').size(); 
var count = 2; 

setInterval(function() { 
    $('.slider #' + count).show('slide', {direction: 'right'}, 500); 
    $('.slider #'+ count).delay(5500).hide('slide', {direction: 'left'}, 500); 

    if (count == sc) { 
     count = 1; 
    } else { 
     count += 1; 
    } 
}, 6500); 

}

Благодаря кучу!

Answer 1

Вы должны скрыть/показать контейнер, а не элементы внутри него.

Fiddle

.slider > div { 
    display: none; 
}