Своп через Div коробки

Question

Я создал это:

https://jsfiddle.net/1qsoL695/

HTML:

<div class="container"> 
    <div id="select"> 
     <div>ONE</div> 
     <div>TWO</div> 
     <div>THREE</div> 
    </div> 
</div> 

CSS:

.container { 
    background: orange; 
    height: 200px; 
    width: 600px; 
} 

#select { 
    position: relative; 
    overflow: hidden; 
    height: 200px; 
} 

#select div { 
    text-align: center; 
    font-size: 130pt; 
    margin: 0; 
} 

JAVASCRIPT:

$("#select") 
    .on('swiperight', function(){ 
     divs.eq(i).toggle('slide', { 
      direction: 'right' 
     }, 250, function() { 

      i++; 

      if(i > 2) { i = 0; } 

      divs.eq(i).toggle('slide', { 
       direction: 'left' 
      }, 230); 

     }); 

    }) 
    .on('swipeleft', function(){ 
     divs.eq(i).toggle('slide', { 
      direction: 'left' 
     }, 250, function() { 

      i--; 

      if(i < 0) { i = 2; } 

      divs.eq(i).toggle('slide', { 
       direction: 'right' 
      }, 230); 

     }); 


    }); 

Вы можете пронести номер, чтобы отобразить следующий/предыдущий.

Предполагается работать на мобильных экранах, и уже есть мой вопрос в том, есть ли еще более красивый способ добиться того же результата? Мой код кажется очень неудобным.

Любая помощь или отзыв оценены.

Answer 1

я предполагаю, что это будет более удобным способом для того, что вы ищете:

How to hide one div and show another div using button onclick?

Answer 2

Вы можете использовать CSS3 преобразование и классы вместо JavaScript анимацию для переключения между дивами. Такой подход обеспечит вам большую производительность и потребует меньше кода, так как все, что вам нужно сделать, это переключить «активный» класс, чтобы показать требуемый div (позиционируя его на экране и скрывая неактивные divs, позиционируя их на экране).