Bootstrap carousel powered by AngularJS

Struggling to incorporate bootstrap, angular, and a carousel to showcase images from local folders on my drive. Unsure how to customize the angular file properly. The example provided in the link below fetches images from the Internet, but I need to modify it for local folders. Any guidance on this would be greatly appreciated.

Here is the source code

Angular File:

app.controller('portfoliocontroller', ['$scope', '$http',
  function($scope, $http) {
    $scope.title = 'Our portfolio';
    $scope.w = window.innerWidth;
    $scope.h = window.innerHeight - 20;
    $scope.uri = "http://lorempixel.com";
    $scope.folders = [
      'abstract',
      'animals',
      'business',
      'cats',
      'city',
      'food',
      'night',
      'life',
      'fashion',
      'people',
      'nature',
      'sports',
      'technics',
      'transport'
    ];
    $scope.images = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

    $scope.currentFolder = $scope.folders[0];
    $scope.selectFolder = function(folder) {
      $scope.currentFolder = folder;
    };
    $scope.activeFolder = function(folder) {
      return (folder === $scope.currentFolder) ? 'active' : '';
    };

  }
]);

HTML File:

<div class="container">
  <!-- Carousel
        ================================================== -->
  <div id="myCarousel" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
      <li data-target="#myCarousel" ng-repeat="img in images" class="{active : (img === 0)}" data-slide-to="{{img}}"></li>
    </ol>
    <div class="carousel-inner">
      <div ng-class="{item: true, active : (img === 0)}" ng-repeat="img in images">
        <img ng-src="{{uri}}/{{w}}/{{h}}/{{currentFolder}}/{{img}}" alt="Slide numder {{img}}">
        <div class="container">
          <div class="carousel-caption"></div>
        </div>
      </div>
    </div>
    <a class="left carousel-control" data-target="#myCarousel" role="button" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a> 
    <a class="right carousel-control" data-target="#myCarousel" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span>
    </a>
  </div>
  <!-- /.carousel -->

  <!-- Fixed navbar -->
  <div class="navbar navbar-default navbar-fixed-botom" role="navigation">
    <div class="container">
      <div class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
          <li ng-repeat="folder in folders" class="{{activeFolder(folder)}}" ng-click="selectFolder(folder)"> <a ng-data-target="#{{folder}}">{{folder}}</a> 
          </li>
        </ul>
      </div>
      <!--/.nav-collapse -->
    </div>
  </div>

Answer №1

If you want to customize the library by using your local directories, simply update the URI with the path to your image folders. For example:

$scope.uri = "path/to/my/images";   

Then, in your HTML markup, you can reference the folders like this:

<img ng-src="{{uri}}/{{currentFolder}}/{{img}}" alt="Slide number {{img}}"> 

The dimensions of the images should be defined either within the image itself or through CSS.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

"Encountering an issue where ng-repeat doesn't reflect updates after adding a new value to the array. Attempted to use $scope.$

Whenever the chat is opened and a name is clicked, it triggers $scope.openChat(user) which adds a name to the $scope.chat.openChats array. The ng-repeat is supposed to monitor this array for any new values but does not update. I attempted using $scope.$app ...

Expanding and collapsing DIV elements using JavaScript upon clicking navigation menu items

At present, the current code unfolds the DIVs whenever a user clicks on a menu item. This results in the DIV folding and unfolding the same number of times if clicked repeatedly on the same link, without staying closed. My desired functionality is to have ...

I have noticed that the brand section of the navigation bar changes to black when I hover over it, but I have been unable to locate any

I'm currently working on a Rails application that has a navbar-top with a brand element. However, I've encountered an issue where the background of the brand element turns black when I hover over it. Despite inspecting the browser console, I coul ...

col-md-8 displayed on a separate line

Having some trouble with the alignment of col-md-4 and col-md-8 elements on the same line. The col-md-8 is appearing below the col-md-4 despite my attempts to remove the form-control class. <div class="container"> <div class="col-md-4 co ...

Maximizing the width of navbar elements with Bootstrap 3

I am currently working on building a webpage with bootstrap3, but I have encountered an issue with the navigation bar. I would like the navigation links ("Web Design", "Development", "Photography", "Blog") to be evenly spaced out within the horizontal na ...

Retrieving a dynamic JSON object for the MusicBrainz application using AngularJS

I want to incorporate a search form into my application that sends the form result to the specified link. I am retrieving artist names from the musicbrainz JSON database using the following request: "NAME OF AN ARTIST"%20e*&fmt=json The "NAME OF AN AR ...

In Laravel Blade, you can dynamically add rows and columns based on a certain condition

I'm working on creating a user interface for cinema seats in Laravel Blade. The database includes seat rows and columns, and the rows will be the same for two consecutive rows. For example, the first row could have an id of 1 with seat_row:1 and seat_ ...

Error: Property '$filter' is not defined and cannot be read

Whenever a user clicks on a link, I display the json object on the UI. However, an exception is being thrown with the following message: TypeError: Cannot read property '$filter' of undefined Check out the demo here: http://plnkr.co/edit/5NOBQ3 ...

Align buttons in the center of a card or container using HTML and CSS

Hi everyone, this is my first time posting so please go easy on me. I've been struggling to align the buttons at the bottom of my cards to make them look neater. I've tried using flexbox but it doesn't seem to be working. Some people have su ...

"Maximizing User Experience with Single Page Applications and RESTful APIs

Utilizing hypermedia is crucial for a truly RESTful API, as it allows clients to navigate through the application using dynamic hyperlinks provided by the server (also known as HATEOAS). While this concept works well for web applications, how can it be ap ...

The styling of Bootstrap CSS is not displaying correctly within the body of the webpage

I'm facing an issue where the content in the body of my page is not rendering correctly due to a problem with my bootstrap css. Specifically, the paragraph tag seems to be rendering inside the image tag even though both are within the body. @{ Lay ...

Check if the required application is installed via npm install

Currently, I am working on writing unit tests for my Angular application. I am in the process of detailing all the necessary packages for unit testing, such as Karma and PhantomJS. Operating System: Ubuntu 14. An issue I've encountered is that Phanto ...

Unfortunately, CSS3 PIE is not compatible with border-radius and box-shadow properties

I created a basic HTML/CSS code for testing purposes, but I'm having trouble getting the library to function properly. I've placed the .htc, .php and .js files in the same directory as index.html, but it just won't work. Check out the code ...

What is the process for immediately changing the background color of an input field as soon as text is entered?

I am encountering an issue with the code snippet provided below. My goal is to change the background color of an input field as soon as I start typing something into it. The scenario involves 4 input fields where if the submit button is clicked and any f ...

Jquery scripts seem to have a hit-or-miss success rate

Recently, I added a couple of Jquery scripts in my header to handle the fading in of a specific CSS class and scrolling down another one. Both of these classes are initially set to display: none in CSS, with Jquery responsible for making them visible. Here ...

The gaps separating rows

I'm struggling with getting my divs to look like a table, especially when it comes to highlighting a selected row. I've tried adjusting padding and margins without success. Does anyone have any suggestions on how I can achieve this effect? .ta ...

Using ng-repeat within another ng-repeat allows elements to be displayed as siblings

My goal is to create a structured list using angularjs: Parent 1 Group1 Child1 Child2 Child3 Child4 Group2 Child1 Child2 Parent 2 Group1 Child1 Child2 Group2 Child1 I have data organized in a similar format like this. $scope.parents = [{ name:&apos ...

Align images at the center of a division using the Bootstrap framework

I'm facing an issue with centering social network icons under a div in my login form while keeping it responsive. Can someone please assist me with this problem? Please help me!!. .row { background: #f8f9fa; margin-top: 20px; } .col { bor ...

Exploring the World of Angular JS Services

Following the recommended practices, I am working on encapsulating my global functions into reusable factory services. In the provided code snippet, my objective is to execute a function that takes the string value of "Qprogress" from my JSON data, perform ...

What is the best way to apply a background-image to a DIV while also implementing a double line border to prevent the image from showing through the border?

Within my DIV, I have applied a background-image and added a double border to the DIV. The image is currently visible in between the lines. Is there a method to resolve this issue and prevent the image from displaying in this manner? ...