angular ui.bootstrap.carousel 从 $scope 调用 next()/prev()

本文介绍了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屋！