与我的代码集成时,AngularJS图像滑块不起作用

时间:2016-01-06 11:28:32

标签: javascript jquery css angularjs jquery-ui-slider

当我将任何滑块或任何代码集成到我的项目代码中时 - 它不起作用。但是,它适用于Plunker。我只需要在/ Homeview中显示它。即使这段代码在index.html中运行良好。

这是 Homeview

<div ng-controller="slideShowController" class="imageslide" ng-switch='slideshow' ng-animate="'animate'">
<div class="slider-content" ng-switch-when="1">
    <img src="images/slider_1.jpg">
</div>  
<div class="slider-content" ng-switch-when="2">
    <img src="images/slider_1.jpg">
</div>
<div class="slider-content" ng-switch-when="3">
    <img src="images/slider_1.jpg">
</div>  
<div class="slider-content" ng-switch-when="4">
    <img src="images/slider_1.jpg">dhakjsdhhasd
</div>  

这是我的app.js

//Define an angular module for our app
var app = angular.module('blickbeeLite', [ 'ngRoute' ]);

app.controller('demoSwipeCtrl', function($scope) {
    $scope.onSwipeLeft = function(ev) {
      alert('You swiped left!!');
    };
    $scope.onSwipeRight = function(ev) {
      alert('You swiped right!!');
    };
    $scope.onSwipeUp = function(ev) {
      alert('You swiped up!!');
    };
    $scope.onSwipeDown = function(ev) {
      alert('You swiped down!!');
    };
  });

app.controller('MainController', function($scope, $http)
{
});

app.config(['$provide', '$routeProvider', function ($provide, $routeProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'views/login.html',
      })
      .when('/:templateFile', {
        templateUrl: function (param) { return 'views/'+param.templateFile+'.html' }
      })
      .otherwise({
        redirectTo: '/'
      });
  }]);
#withinheader {
	width:60%;
	margin: 0 auto;
	height: 100px;
}

.imageslide{
	width:100%;
	height:30%;
	margin: 0 auto;
	margin-bottom: 20px;
	overflow:hidden;
	position:relative;
	text-align: center;
}

.imageslide .slider-content {
  position: absolute;
  width:100%;
  height:30%;
}

.animate-enter,.animate-leave {
	-webkit-transition:1000ms cubic-bezier(.165,.84,.44,1) all;
	-moz-transition:1000ms cubic-bezier(.165,.84,.44,1) all;
	-ms-transition:1000ms cubic-bezier(.165,.84,.44,1) all;
	-o-transition:1000ms cubic-bezier(.165,.84,.44,1) all;
	transition:1000ms cubic-bezier(.165,.84,.44,1) all;
}

.animate-enter {
	left:100%;
}

.animate-enter.animate-enter-active {
	left:0;
}

.animate-leave {
	left:0;
}

.animate-leave.animate-leave-active {
	left:-100%;
}
    <script data-require="angular.js@1.1.5" data-semver="1.1.5" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.js"></script>
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script type="text/javascript" src="js/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular-route.min.js"></script>
	<script type="text/javascript" src="js/app.js"></script>

一切都很好,我没有到达我出错的地方。我尝试了很多次,但每次都失败了。有时,我还添加任何代码进行集成。问题总是欢迎我。

提前致谢。

0 个答案:

没有答案