Adding slides to the header1

I'm trying to add a few more images to the slide in the header, but i can't find a way to get it.
Here's my code:

Code: Select all

<div class="custom  gk-header1">
<div>
</p>
<h5 data-scrollreveal="enter top and move 150px wait 0.4s">Trompo Games Inc. was founded in 2013 in Toronto Ontario, Canada. We fill a hole in the mobile gaming market between ambitious indie developments, and simple re-skins of games that have already been made.</h5>

<a href="http://trompogames.com/14/?page_id=1527" data-scrollreveal="enter top and move 200px wait 0.6s">Read more</a>
</div>

<div class="gk-tablet" data-slides="3" data-scrollreveal="enter bottom and move 50px wait 0.5s">

<div>
<div>
<a href="https://itunes.apple.com/us/app/pull-my-paw/id793212223?ls=1&mt=8"><img src="http://trompogames.com/14/wp-content/uploads/2014/08/header_screen_1.png" alt="App Screen I" /></a>
<a href="https://www.facebook.com/PullMyPaw"><img src="http://trompogames.com/14/wp-content/uploads/2014/08/header_screen_2.png" alt="App Screen I" /></a>
<a href="https://play.google.com/store/apps/details?id=com.trompogames.pullmypaw"><img src="http://trompogames.com/14/wp-content/uploads/2014/08/header_screen_3.png" alt="App Screen I" /></a>
</div>
</div>
</div>
</div>

How can i achieve this?

Thanks up front!

Here's a link to my site:
www.trompogames.com

Hi, Here's the code for 5 slides:

Code: Select all

<div class="custom  gk-header1">
<div>
<h1 data-scrollreveal="enter top and move 100px wait 0.2s">Beautiful theme for app website</h1>
<p data-scrollreveal="enter top and move 150px wait 0.4s">An effective theme for an effective app. Clear and easy
on the eye; a sublime exhibition of minimalism for your app.</p>

<a href="#" data-scrollreveal="enter top and move 200px wait 0.6s">Read more</a>
</div>

<div class="gk-tablet" data-slides="5" data-scrollreveal="enter bottom and move 50px wait 0.5s">

<div>
<div>
<img src="[pageurl]/wp-content/themes/Mo/images/demo/header_screen_1.jpg" alt="App Screen I" />
<img src="[pageurl]/wp-content/themes/Mo/images/demo/header_screen_2.jpg" alt="App Screen I" />
<img src="[pageurl]/wp-content/themes/Mo/images/demo/header_screen_3.jpg" alt="App Screen I" />
<img src="[pageurl]/wp-content/themes/Mo/images/demo/header_screen_4.jpg" alt="App Screen I" />
<img src="[pageurl]/wp-content/themes/Mo/images/demo/header_screen_5.jpg" alt="App Screen I" />
</div>
</div>
</div>
</div>


You have to change this value: data-slides="5" and add 5 images.

Hi, i've tried that before but doesn't seem to work. I need to put 8 images, here's what i got as a result of this code:
<

Code: Select all

div class="custom  gk-header1">
<div>
</p>
<h5 data-scrollreveal="enter top and move 150px wait 0.4s">Trompo Games Inc. was founded in 2013 in Toronto Ontario, Canada. We fill a hole in the mobile gaming market between ambitious indie developments, and simple re-skins of games that have already been made.</h5>

<a href="http://pasamanos.mx/trompotest/tromponew/?page_id=1527" data-scrollreveal="enter top and move 200px wait 0.6s">Read more</a>
</div>

<div class="gk-tablet" data-slides="8" data-scrollreveal="enter bottom and move 50px wait 0.5s">

<div>
<div>
<a href="#"><img src="http://pasamanos.mx/trompotest/tromponew/wp-content/uploads/2014/08/header_screen_1.png" alt="App Screen I" /></a>
<a href="#"><img src="http://pasamanos.mx/trompotest/tromponew/wp-content/uploads/2014/08/header_screen_2.png" alt="App Screen I" /></a>
<a href="#"><img src="http://pasamanos.mx/trompotest/tromponew/wp-content/uploads/2014/08/header_screen_3.png" alt="App Screen I" /></a>
<a href="#"><img src="http://pasamanos.mx/trompotest/tromponew/wp-content/uploads/2014/08/header_screen_3.png" alt="App Screen I" /></a>
<a href="#"><img src="http://pasamanos.mx/trompotest/tromponew/wp-content/uploads/2014/08/header_screen_3.png" alt="App Screen I" /></a>
<a href="#"><img src="http://pasamanos.mx/trompotest/tromponew/wp-content/uploads/2014/08/header_screen_3.png" alt="App Screen I" /></a>
<a href="#"><img src="http://pasamanos.mx/trompotest/tromponew/wp-content/uploads/2014/08/header_screen_3.png" alt="App Screen I" /></a>
<a href="#"><img src="http://pasamanos.mx/trompotest/tromponew/wp-content/uploads/2014/08/header_screen_3.png" alt="App Screen I" /></a>
</div>
<div>
<div>
</div>
</div>
</div>

And here you can see how does it look like:
http://pasamanos.mx/trompotest/tromponew/

Thanks again!

Could you send me a PM with backend access to your website? Then I'll check it exactly.

Unfortunately - 6 slides is the maximal amount of slides. if you want to have 8, please add this code into your Mo/css/override.css file (first enable this override option from Template Options -> Advanced tab)

Code: Select all

.gk-header1 .gk-tablet[data-slides="7"] img { width: 14.2857%; }
.gk-header1 .gk-tablet[data-slides="8"] img { width: 12.5%; }
.gk-header1 .gk-tablet[data-slides="7"] > div > div { width: 700%; }
.gk-header1 .gk-tablet[data-slides="8"] > div > div { width: 800%; }