के साथ कैरोसेल जैसी नेविगेशन वाली एक पृष्ठ वेबसाइट मैं क्षैतिज नेविगेशन वाला एक पृष्ठ बना रहा हूं, और यह ठीक काम करता है। लेकिन अब मुझे कुछ एनीमेशन जोड़ने की जरूरत है। मैं कैरोसेल जैसी नेविगेशन जोड़ना चाहता हूं। तो जब कोई विज़िटर "डाउनलोड" बटन पर क्लिक करता है, तो सभी सामग्री दाएं से बाएं स्क्रॉल की जाती है और यदि विज़िटर "होम" पर क्लिक करता है तो यह वापस चला जाता है लेकिन बाएं से दाएं एनीमेशन के साथ। जब भी कोई विज़िटर स्क्रॉल करना शुरू करता है तो मैं इसे पृष्ठों के बीच नेविगेट करना चाहूंगा।कोणीय-यूई-राउटर
मैं कुछ समाधानों के लिए googled लेकिन एक सीएसएस-एनीमेशन के अलावा कुछ भी नहीं मिला है जो स्लाइड के क्रम को अनदेखा करता है और हमेशा एक तरफ स्लाइडिंग करता है। मैं कोणीय के लिए नया हूं और मैं किसी भी मदद की सराहना करता हूं।
यहाँ है मेरी 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>
और 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('/');
});