Skip to content

Instantly share code, notes, and snippets.

@tonkec

tonkec/index.html

Created November 27, 2015 12:30
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save tonkec/47f28f5d19d968421f47 to your computer and use it in GitHub Desktop.
Save tonkec/47f28f5d19d968421f47 to your computer and use it in GitHub Desktop.
Download ZIP
Swiper with angular
Raw
index.html
<!doctype html>
<html class="no-js">
<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<!-- build:css(.) styles/vendor.css -->
<!-- bower:css -->
<!-- endbower -->
<!-- endbuild -->
<!-- build:css(.tmp) styles/main.css -->
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="bower_components/Swiper/dist/css/swiper.min.css"></link>
<link rel="stylesheet" href="styles/slideshow.css">
<link rel="stylesheet" href="styles/main.css">
<!-- endbuild -->
</head>
<body ng-app="dinpApp">
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<!-- Add your site or application content here -->
<div class="heading-section">
<h1 class="title">Web Design Inspiration</h1>
</div>
<div ng-view="" class="content"></div>
<div class="footer-links">
<nav class="navbar navbar-inverse navbar-fixed-bottom">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li><a ng-href="#/one/page/designs">Open Page Designs</a></li>
<li><a ng-href="#/typography">Typography</a></li>
<li><a ng-href="#/color/palettes">Color Palettes</a></li>
<li><a ng-href="#/code/snippets">Code Snippets</a></li>
<li><a ng-href="#/ux/ui">UX/UI</a></li>
<li><a ng-href="#/hi/def/images">High def Images</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown">About<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a ng-href="#/about">Our Team</a></li>
<li><a ng-href="#/">Newbie Coder Warehouse</a></li>
<li><a ng-href="#/">Github Repository</a></li>
</ul>
</li> </ul>
</div>
</div>
</nav>
</div>
</div>
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID -->
<script>
!function(A,n,g,u,l,a,r){A.GoogleAnalyticsObject=l,A[l]=A[l]||function(){
(A[l].q=A[l].q||[]).push(arguments)},A[l].l=+new Date,a=n.createElement(g),
r=n.getElementsByTagName(g)[0],a.src=u,r.parentNode.insertBefore(a,r)
}(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-XXXXX-X');
ga('send', 'pageview');
</script>
<!-- build:js(.) scripts/vendor.js -->
<!-- bower:js -->
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script>
<script src="bower_components/angular-cookies/angular-cookies.js"></script>
<script src="bower_components/angular-resource/angular-resource.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="bower_components/angular-touch/angular-touch.js"></script>
<script src="bower_components/Swiper/dist/js/swiper.min.js"></script>
<!-- endbower -->
<!-- endbuild -->
<!-- build:js({.tmp,app}) scripts/scripts.js -->
<script src="scripts/app.js"></script>
<script src="scripts/controllers/main.js"></script>
<script src="scripts/controllers/about.js"></script>
<script src="scripts/controllers/onepagedesigns.js"></script>
<script src="scripts/controllers/typography.js"></script>
<script src="scripts/controllers/colorpalettes.js"></script>
<script src="scripts/controllers/codesnippets.js"></script>
<script src="scripts/controllers/uxui.js"></script>
<script src="scripts/controllers/hidefimages.js"></script>
<!-- endbuild -->
</body>
</html>
Raw
uxui.html
<!-- Slider main container -->
<div class="swiper-container">
<!-- Additional required wrapper -->
<div class="swiper-wrapper" ng-repeat="list in myapi">
<!-- Slides -->
<div class="swiper-slide">{{list.color}}</div>
...
</div>
<!-- If we need pagination -->
<div class="swiper-pagination"></div>
<!-- If we need navigation buttons -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
Raw
uxui.js
'use strict';
/**
* @ngdoc function
* @name dinpApp.controller:UxuiCtrl
* @description
* # UxuiCtrl
* Controller of the dinpApp
*/
angular.module('dinpApp')
.controller('UxuiCtrl', function ($scope, $http) {
$scope.awesomeThings = [
'HTML5 Boilerplate',
'AngularJS',
'Karma'
];
$http.get('http://rxsharp.github.io/my-APIs/shorthandColors.json').success(function(theapi) {
$scope.myapi = theapi.results;
});
$scope.mySwiper = new Swiper ('.swiper-container', {
// Optional parameters
direction: 'vertical',
loop: true,
keyboardControl: true,
// If we need pagination
pagination: '.swiper-pagination',
// Navigation arrows
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment