Take a look at what I made:
https://jsfiddle.net/1qsoL695/
This is the HTML code:
<div class="container">
<div id="select">
<div>ONE</div>
<div>TWO</div>
<div>THREE</div>
</div>
</div>
Here's the CSS part:
.container {
background: orange;
height: 200px;
width: 600px;
}
#select {
position: relative;
overflow: hidden;
height: 200px;
}
#select div {
text-align: center;
font-size: 130pt;
margin: 0;
}
And lastly, the JavaScript snippet:
$("#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);
});
});
The functionality allows swiping to display the next or previous number.
While it works on mobile screens as intended, I'm wondering if there's a more elegant way to achieve the same outcome. The current code feels a bit clunky. Any suggestions or advice would be greatly appreciated!