本文介绍了angular ui.bootstrap.carousel 从 $scope 调用 next()/prev()的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
限时送ChatGPT账号..如何从幻灯片访问轮播的 next()/prev() 方法?我正在尝试连接到 hm-swipe-left/right,但我似乎没有正确的 $scope
<slide ng-repeat="幻灯片中的卡片" active="card.active"><div class="card list-unstyled text-center"><ul class='header list-inline list-unstyled'hm-swipe-left="swipe('next')"hm-swipe-right="swipe('prev')"><li><i class="icon {{card.icon}} fa-3x"></i></li><li class="title">{{card.title}}</li></幻灯片></轮播>
解决方案 这里有一个稍微简单的解决方案:
Javascript 控制器
$scope.carouselNext = function() {$('#carousel-main').carousel('next');}$scope.carouselPrev = function() {$('#carousel-main').carousel('prev');}
HTML 视图
<!-- 指标--><ol class="carousel-indicators"><li data-target="#carousel-main" data-slide-to="0" class="active"></li><li data-target="#carousel-main" data-slide-to="1"></li><!-- 为添加的任何幻灯片添加指示符 --></ol><!-- 幻灯片包装器--><div class="carousel-inner" role="listbox"><div id="slide1" class="item active" ng-swipe-right="carouselPrev()" ng-swipe-left="carouselNext()"><!-- img 或这里的内容--><div id="slide2" class="item" ng-swipe-right="carouselPrev()" ng-swipe-left="carouselNext()"><!-- img 或这里的内容-->
<!-- 根据需要添加更多幻灯片-->
How do I access the next()/prev() methods of the carousel from the slide? I'm trying to connect to hm-swipe-left/right, but I don't seem to have the right $scope
<carousel interval="1000">
<slide ng-repeat="card in slides" active="card.active">
<div class="card list-unstyled text-center">
<ul class='header list-inline list-unstyled'
hm-swipe-left="swipe('next')"
hm-swipe-right="swipe('prev')">
<li><i class="icon {{card.icon}} fa-3x"></i></li>
<li class="title">{{card.title}}</li>
</ul>
</div>
</slide>
</carousel>
解决方案
Here is a slightly simpler solution:
Javascript Controller
$scope.carouselNext = function() {
$('#carousel-main').carousel('next');
}
$scope.carouselPrev = function() {
$('#carousel-main').carousel('prev');
}
HTML View
<div id="carousel-main" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-main" data-slide-to="0" class="active"></li>
<li data-target="#carousel-main" data-slide-to="1"></li>
<!-- add indicators for any slides added -->
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div id="slide1" class="item active" ng-swipe-right="carouselPrev()" ng-swipe-left="carouselNext()">
<!-- img or content here -->
</div>
<div id="slide2" class="item" ng-swipe-right="carouselPrev()" ng-swipe-left="carouselNext()">
<!-- img or content here -->
</div>
<!-- add more slides as needed -->
</div>
</div>
这篇关于angular ui.bootstrap.carousel 从 $scope 调用 next()/prev()的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
更多推荐
[db:关键词]
发布评论