i want to make each section to scroll horizontally by clicking an arrow navigation?each section has infinite vertical scroll

Question

now, i want to make each section to scroll horizontally by clicking an arrow navigation?each section has an infinite vertical scroll.

1.navigation arrow to navigate to horizontal scroll.

<a class="arrow arrow-left" role="button"></a>    

2.starts content.

<section class="timeline" id="1">infinite content..</section>
<section class="timeline" id="2">infinite content..</section>
<section class="timeline" id="3">infinite content..</section>
<section class="timeline" id="4">infinite content..</section>

<a class="arrow arrow-right" role="button"></a>

.timeline{
    position: relative;
    margin: 30px auto;
    width: 100%;
}
.arrow {
    width: 0; 
    height: 0; 
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
    position: absolute;
}

.arrow-right {
    border-left: 15px solid #000;
    right: 0;
}
.arrow-left {
    border-right: 15px solid #000; 
    left: 0;
}

Answer 1

Have a look at Jquery Animate() function.

Here you can define your timeline section to scroll left and right according to the arrow clicked