Skip to content

Instantly share code, notes, and snippets.

@aj-adl

aj-adl/Orbit slider with RWD techniques (basic example)

Last active December 11, 2015 09:59
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save aj-adl/4583939 to your computer and use it in GitHub Desktop.
Save aj-adl/4583939 to your computer and use it in GitHub Desktop.
Download ZIP
This gist relates to zurb's foundation framework (3.4.2 at the time of writing). It gives a couple of examples on how you can use the built in visibility classes to show and hide content within an orbit slider in such a manner that it will actually restrict unnecessary asset downloading as per the method outlined in Tim Kadlec's article here htt…
Raw
Orbit slider with RWD techniques (basic example)
<html>
<!-- Example slide to be used within an orbit slider -->
<!-- Be sure to set the fluid ratio in your javascript when using divs in orbit, see the docs for details -->
<!--Example 1: Do not download image on mobile, show text slide instead -->
<div id="slide-1" class="orbit-slide">
<div class="small-slide show-for-mobile"
<h2> A title </h2>
<p> This text will be displayed to mobile users </p>
</div>
<!-- this is the parent wrapper element with the visibility conditions applied to it -->
<div class="large-slide hide-for-mobile">
<!-- this is the div which has the image set as the background, be sure to style it's width/height etc to suit -->
<div></div>
</div>
</div>
</div>
<!--Key css styles needed are -->
<style>
#slide-1 .large-slide div {
background-image: url('../folder/yourlargeimage.jpg')
}
</style>
<!--
Here's a slightly modified example that lets you display a different image to mobiles
depending on how you style it you could make it a full slide background or perhaps just
a small pic/icon which can add a bit of flair while keeping bandwidth low.
If using an icon create a css sprite for all the icons you employ on the site to improve page performance.
-->
<!--Example 2: Do not download main image on mobile, show smaller image + text instead-->
<div id="slide-1" class="orbit-slide">
<div class="small-slide show-for-mobile"
<div></div>
<h2> A title </h2>
<p> This text will be displayed to mobile users </p>
</div>
<div class= "large-slide hide-for-mobile">
<div></div>
</div>
</div>
</div>
<style>
#slide 1 .small-slide div {
background-image: url('../folder/yourmobileimage.jpg')
}
#slide 1 .large-slide div {
background-image: url('../folder/yourlargeimage.jpg')
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment