0

I am using angular framework that one is mobile angular ui. I am new in Angular Js. I am implement mobile website with mobile-angular-ui. I want to add touchable carousel. I seen two link for carousel in angular.js, But it is not works.https://angular-ui.github.io/bootstrap/
http://plnkr.co/edit/hvfaMFz4q1AlbOpuOwFv?p=preview

Index.html

<html>
  <head>
    <meta charset="utf-8" />
    <title>y</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimal-ui" />
    <meta name="apple-mobile-web-app-status-bar-style" content="yes" />
    <link rel="stylesheet" href="css/app.min.css" />
    <link rel="stylesheet" href="css/responsive.min.css" />

    <!-- inject:js -->
    <script src="js/app.min.js"></script>
  </head>
  <style>
  .color-winni-text
  {
    color:#c62222;
  }
  </style>
  <body ng-app="Y" ng-controller="MainController">

    <!-- Sidebars -->
    <div ng-include="'sidebar.html'"
            ui-track-as-search-param='true'
            class="sidebar sidebar-left"></div>

    <div class="app">

      <!-- Navbars -->

      <div class="navbar navbar-app navbar-absolute-top">
        <div class="navbar-brand navbar-brand-center color-winni-text" ui-yield-to="title">
                  <strong>Winni Celebration</strong>    
        </div>
        <div class="btn-group pull-left">
          <div ui-toggle="uiSidebarLeft" class="btn sidebar-toggle">
            <i class="fa fa-bars  color-winni-text fa-2x"></i> 
          </div>
        </div>
        <div class="btn-group pull-right" ui-yield-to="navbarAction">
          <div ui-toggle="uiSidebarRight" class="btn">
            <i class="fa fa-comment color-winni-text"></i> 
          </div>
        </div>
      </div>

      <div class="navbar navbar-app navbar-absolute-bottom">
        <div class="btn-group justified">
          <a style="color:#c62222" href="#/" class="btn btn-navbar"><i class="fa fa-home fa-navbar"></i> Home</a>
          <a style="color:#c62222" href="https://github.com/mcasimir/mobile-angular-ui" class="btn btn-navbar"><i class="fa fa-github fa-navbar"></i> Sources</a>
          <a style="color:#c62222" href="https://github.com/mcasimir/mobile-angular-ui/issues" class="btn btn-navbar"><i class="fa fa-exclamation-circle fa-navbar"></i> Issues</a>
        </div>
      </div>

      <!-- App Body -->
      <div class="app-body background-color-body">
        <div class="app-content">
          <ng-view></ng-view>  
        </div>
      </div>

    </div><!-- ~ .app -->

    <div ui-yield-to="modals"></div>
  </body>
</html>

App.js

  angular.module('Y', [
      'ngRoute',
      'mobile-angular-ui',
      'Y.controllers.Main'
    ])

    .config(function($routeProvider) {
      $routeProvider.when('/', {templateUrl:'home.html',  reloadOnSearch: false})
                    .when('/cityPage', {templateUrl:'cityPage.html',  reloadOnSearch: false});
    });

cityPage.html

<div class="jumbtron scrollable-content text-center bg-color">
  <div class="bgImage" style="height:300px;">
  </div>
</div>

main_controller.js

angular.module('Y.controllers.Main', [])

.controller('MainController', function($scope){

});

I want add carousel in cityPage.html. Expected result in screen shot.enter image description here

Please share your ideas.

Varun Sharma
  • 4,632
  • 13
  • 49
  • 103
  • plunk you posted works, what is wrong with it for you ? Also it already have touchable arrows. So it pretty much what you are asking for out of the box. Only issue with plunkr is that it has wrong url for very first slide image. – vittore Jan 18 '16 at 13:47
  • @vittore. Yes i know, I am new in angular js. Thats why i posted my files. Can you give me some idea how to set this carousel in this code. – Varun Sharma Jan 18 '16 at 14:01

0 Answers0