Sto creando una pagina con navigazione orizzontale e funziona correttamente. Ma ora ho bisogno di aggiungere qualche animazione. Voglio aggiungere una navigazione tipo carosello. Quindi, quando un visitatore fa clic sul pulsante "Download", tutti i contenuti scorrono da destra a sinistra e se il visitatore fa clic su "Home", torna indietro ma con l'animazione da sinistra a destra. Mi piacerebbe anche che navigasse tra le pagine quando un visitatore inizia a scorrere.Sito Web di una pagina con navigazione simile a un carosello con router angolare
Ho cercato su google alcune soluzioni ma non ho trovato altro che un'animazione css che ignori l'ordine delle diapositive e si comporti sempre in un modo scorrevole. Sono nuovo all'angolare e apprezzerò qualsiasi aiuto.
Ecco il mio index.html
<!DOCTYPE html>
<html lang="es" ng-app=“opw">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="css/bootstrap-3.3.5.min.css" />
</head>
<body>
<!-- NAVIGATION -->
<nav class="navbar navbar-inverse" role="navigation">
<div class="navbar-header">
<a class="navbar-brand" ui-sref="#”>One page website</a>
</div>
<ul class="nav navbar-nav">
<li><a ui-sref="home">Inicio</a></li>
<li><a ui-sref="how_does_it_work”>How does it work?</a></li>
<li><a ui-sref="wanted”>Wanted</a></li>
<li><a ui-sref="app”>Download app</a></li>
</ul>
</nav>
<!-- MAIN CONTENT -->
<div class="container">
<div ui-view></div>
</div>
<script src="node_modules/angular/angular.min.js"></script>
<script src="node_modules/angular-animate/angular-animate.min.js"></script>
<script src="node_modules/angular-ui-router/release/angular-ui-router.min.js"></script></script>
<script src="js/app.js"></script>
</body>
</html>
e la app.js
angular.module(‘opw', ['ui.router'])
// router configuration
.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider
// HOME STATES AND NESTED VIEWS ========================================
.state('home', {
url: '/',
templateUrl: 'template/homepage/home.html'
})
// HOW-DOES-IT-WORK PAGE AND MULTIPLE NAMED VIEWS =================================
.state('how_does_it_work', {
url: ‘/how-does-it-work',
templateUrl: 'template/homepage/hdiw.html'
})
// WANTED PAGE AND MULTIPLE NAMED VIEWS =================================
.state('wanted', {
url: ‘/wanted',
templateUrl: 'template/homepage/wanted.html'
})
// DOWNLOAD-APP PAGE AND MULTIPLE NAMED VIEWS =================================
.state('app', {
url: ‘/download',
templateUrl: 'template/homepage/app.html',
});
$urlRouterProvider.otherwise('/');
});