Skip to content

Instantly share code, notes, and snippets.

@scripting

scripting/slickhelloworld.html

Last active January 1, 2017 22:46
Show Gist options
  • Save scripting/c7f1877fafbe7e53765ddd342d1ff3bc to your computer and use it in GitHub Desktop.
Save scripting/c7f1877fafbe7e53765ddd342d1ff3bc to your computer and use it in GitHub Desktop.
Download ZIP
A simple Hello World app for the slick.js package
Raw
slickhelloworld.html
<html>
<head>
<title>Hello World for Slick</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- A simple hello world app for https://github.com/kenwheeler/slick -->
<script src="http://fargo.io/code/jquery-1.9.1.min.js"></script>
<link href="http://fargo.io/code/ubuntuFont.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css"/>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick-theme.css"/>
<script src="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script>
<script>
function startup () {
console.log ("startup");
var slickOptions = {
dots: false,
fade: true,
infinite: true,
slidesToShow: 1,
slidesToScroll: 1
};
$("#idSlickArray").slick (slickOptions);
$("#idSlickArray").css ("display", "block");
}
</script>
<style>
body {
font-family: Ubuntu;
font-size: 18px;
background-color: whitesmoke;
}
.divPageBody {
width: 60%;
margin-top: 90px;
margin-left: auto;
margin-right: auto;
}
* {
box-sizing: border-box;
}
.slider {
width: 400px;
margin: 30px auto;
}
.slick-slide {
margin: 0px 20px;
height: 200px;
border: 1px solid silver;
}
.slick-slide img {
width: 100%;
}
.slick-prev:before, .slick-next:before {
color: black;
}
p {
line-height: 140%;
}
</style>
</head>
<body>
<div class="divPageBody">
<h1>Hello World for Slick</h1>
<p>
A simple Hello World app for the <a href="https://github.com/kenwheeler/slick">slick.js</a> package.
I found that the examples they provide are great for getting an overview of the capabilities,
but I needed this very basic app to get started coding. So I cleaned it up and
<a href="https://gist.github.com/scripting/c7f1877fafbe7e53765ddd342d1ff3bc">posted</a> it.
You can run the app <a href="http://scripting.com/misc/slickhelloworld.html">here</a>, w/o downloading.
<a href="http://davewiner.com/">Dave Winer</a> 1/1/2017.
</p>
<div id="idSlickArray" class="regular slider" style="display: none">
<div><img src="http://scripting.com/2016/01/21/guidelines.png"></div>
<div><img src="http://scripting.com/2016/01/21/wwwNotNeeded.png"></div>
<div><img src="http://scripting.com/2016/01/28/happyFriends.png"></div>
<div><img src="http://scripting.com/2016/01/30/joiIto.png"></div>
<div><img src="http://scripting.com/2016/02/08/nodeMature.png"></div>
<div><img src="http://scripting.com/2016/02/16/twitterSecurity.png"></div>
<div><img src="http://scripting.com/2016/02/24/screen.png"></div>
<div><img src="http://scripting.com/2016/02/25/mao.png"></div>
<div><img src="http://scripting.com/2016/02/27/purdy.png"></div>
<div><img src="http://scripting.com/2016/02/29/drumpf.png"></div>
<div><img src="http://scripting.com/2016/03/31/lbj.png"></div>
<div><img src="http://scripting.com/2016/04/03/createTwitterAppScreen.png"></div>
<div><img src="http://scripting.com/2016/04/06/girl.png"></div>
<div><img src="http://scripting.com/2016/04/07/fightClub.png"></div>
<div><img src="http://scripting.com/2016/04/13/whereTheVersionIs.png"></div>
<div><img src="http://scripting.com/2016/04/16/tesla.png"></div>
<div><img src="http://scripting.com/2016/04/17/beetlejuice.png"></div>
<div><img src="http://scripting.com/2016/04/21/prince.png"></div>
<div><img src="http://scripting.com/2016/04/22/strongman.png"></div>
<div><img src="http://scripting.com/2016/06/27/terrapinCover.png"></div>
<div><img src="http://scripting.com/2016/06/29/elephant.png"></div>
<div><img src="http://scripting.com/2016/07/23/nixon.png"></div>
<div><img src="http://scripting.com/2016/07/26/chairmanMeow.png"></div>
<div><img src="http://scripting.com/2016/07/28/hillary.png"></div>
<div><img src="http://scripting.com/2016/07/28/madamPresident.png"></div>
<div><img src="http://scripting.com/2016/08/25/republicanElephant.png"></div>
<div><img src="http://scripting.com/2016/08/26/newsConveyerBelts.png"></div>
<div><img src="http://scripting.com/2016/08/27/hippiebus.png"></div>
<div><img src="http://scripting.com/2016/08/27/lincoln.png"></div>
<div><img src="http://scripting.com/2016/08/27/mediumHighlight.png"></div>
<div><img src="http://scripting.com/2016/09/15/harvardLogo.png"></div>
<div><img src="http://scripting.com/2016/09/29/watchparty.png"></div>
<div><img src="http://scripting.com/2016/09/30/carmelaSoprano.png"></div>
<div><img src="http://scripting.com/2016/09/30/wall.png"></div>
<div><img src="http://scripting.com/2016/10/01/oldeStyleAccordionGuy.png"></div>
<div><img src="http://scripting.com/2016/10/15/uma.png"></div>
<div><img src="http://scripting.com/2016/10/15/whatMeWorry.png"></div>
<div><img src="http://scripting.com/2016/10/16/sandwich.png"></div>
<div><img src="http://scripting.com/2016/10/17/boulder.png"></div>
<div><img src="http://scripting.com/2016/10/26/pundits.png"></div>
<div><img src="http://scripting.com/2016/10/26/stadiumConstruction.png"></div>
<div><img src="http://scripting.com/2016/10/26/strongerTogether.png"></div>
<div><img src="http://scripting.com/2016/10/26/trumpLivingRoom.png"></div>
<div><img src="http://scripting.com/2016/11/02/feingold.png"></div>
<div><img src="http://scripting.com/2016/11/02/neo.png"></div>
<div><img src="http://scripting.com/2016/11/03/happyday.png"></div>
<div><img src="http://scripting.com/2016/11/03/howIFelt.png"></div>
<div><img src="http://scripting.com/2016/11/03/plantation.png"></div>
<div><img src="http://scripting.com/2016/11/09/wildchilld.png"></div>
<div><img src="http://scripting.com/2016/11/10/joker.png"></div>
<div><img src="http://scripting.com/2016/11/12/presidentTrump.png"></div>
<div><img src="http://scripting.com/2016/11/12/trump.png"></div>
<div><img src="http://scripting.com/2016/11/13/buffett.png"></div>
<div><img src="http://scripting.com/2016/11/13/change.png"></div>
<div><img src="http://scripting.com/2016/11/14/butch.png"></div>
<div><img src="http://scripting.com/2016/12/06/fatTony.png"></div>
<div><img src="http://scripting.com/2016/12/07/blackboard.png"></div>
<div><img src="http://scripting.com/2016/12/07/snowden.png"></div>
<div><img src="http://scripting.com/2016/12/16/dot.png"></div>
<div><img src="http://scripting.com/2016/12/16/sanFranSunriseByOm.png"></div>
<div><img src="http://scripting.com/2016/12/19/assassin.png"></div>
<div><img src="http://scripting.com/2016/12/19/nightSky.png"></div>
</div>
</div>
<script>
$(document).ready (function () {
startup ();
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment