Menu icon Foundation
Create Horizontal Scroll rows

I want to create a row that scrolls images horizontally, with the rest of the row hidden off screen. The user will scroll the row across to reveal other images. How can I do this ? I have attached my current code.

Horiz scroll

      <div class="row">
<div class="small-12 large-12 columns">
<div class="small-8"><h5>Your Recent Activities</h5></div>
<ul class="small-block-grid-6"> <li><a class="th [radius]" href="#"> <img src="images/hillsongs.png" width="140" height="140"> </a></li> <li><a class="th [radius]" href="#"> <img src="images/bethel.png" width="140" height="140"> </a></li> <li><a class="th [radius]" href="#"> <img src="images/passion.png" width="140" height="140"> </a></li><li><a class="th [radius]" href="#"> <img src="images/kirkfranklin.png" width="140" height="140"> </a></li> <li><a class="th [radius]" href="#"> <img src="images/country.png" width="140" height="140"> </a></li><li><a class="th [radius]" href="#"> <img src="images/paulbaloche.png" width="140" height="140"> </a></li><li><a class="th [radius]" href="#"> <img src="images/lecrare-gravity.png" width="140" height="140"> </a></li></ul>
</div>
</div>      

         

rowhorizontal scrolltouch

I want to create a row that scrolls images horizontally, with the rest of the row hidden off screen. The user will scroll the row across to reveal other images. How can I do this ? I have attached my current code.

Horiz scroll

      <div class="row">
<div class="small-12 large-12 columns">
<div class="small-8"><h5>Your Recent Activities</h5></div>
<ul class="small-block-grid-6"> <li><a class="th [radius]" href="#"> <img src="images/hillsongs.png" width="140" height="140"> </a></li> <li><a class="th [radius]" href="#"> <img src="images/bethel.png" width="140" height="140"> </a></li> <li><a class="th [radius]" href="#"> <img src="images/passion.png" width="140" height="140"> </a></li><li><a class="th [radius]" href="#"> <img src="images/kirkfranklin.png" width="140" height="140"> </a></li> <li><a class="th [radius]" href="#"> <img src="images/country.png" width="140" height="140"> </a></li><li><a class="th [radius]" href="#"> <img src="images/paulbaloche.png" width="140" height="140"> </a></li><li><a class="th [radius]" href="#"> <img src="images/lecrare-gravity.png" width="140" height="140"> </a></li></ul>
</div>
</div>      

         
Steve Trask over 5 years ago

Hi

I would say an orbit customisation is the way forward, due to it being a slider and the swipe functionality is there to move it look at the example below:

http://www.lawabsolute.com/

not exactly the same but has the right method behind it then if you take off the max width it will be 100% of the row.

If you make it responsive and have the same number on screen say 10 and vary the size to fit as that will be the number per slide, then if the screen gets smaller it gets swapped out for a smaller version with 6 across and another for mobile as per the example.

Hope this points you in the right direction