Simple AngularJS Image Carousel Slider

Saturday 25 February 2017

Simple AngularJS Image Carousel Slider

Posted By: abhishek verma Saturday, February 25, 2017 Leave a Reply
Easy simple code multiple image carousel slider written in special native AngularJS with javascript and a little CSS/CSS3 magic step by step implemetaion.
A fully image slider is a responsive image (with interval)carousel slideshow which allows all images you to loop through multiple groups of images and change all images using interval.

Image Slider Features in AngularJS:

Image Slider mostly Mobile friendly,and tested on webkit+firefox Browser.
1st: Image slider Responsive design slider for both desktop app and mobile devices application.
2nd: next and prev Dots and arrows change the navigation.
3rd: Different type of Images can be list categorized into all multiple groups an display images.
4th: all images Endless loop cycle type when you reach the last slide in image slider.
5th Last features is Auto-rotation image with support use for pause on hover in carousel image slider.

Carousel with AngularJs : How to use it:

First of all include all script and css file. and then create a index.html file.
copy and paste this code.
<!DOCTYPE html>
<html ng-app="slideapp">
  <head>
    <meta charset="UTF-8">
    <title>angular image gallery with thumbnails</title>
    <meta charset="utf-8">
 //include css link
  <link rel='stylesheet prefetch' href='yourprojectdir/css/bootstrap.min.css'>
        <link rel="stylesheet" href="yourprojectdir/css/style.css">
    
  </head>
  <body>
 
  <div ng-controller="ImageCarouselDemoCtrl" id="img_slides_control_tag">
    <div>
      <carousel interval="slid_myInterval">
        <slide ng-repeat="slide_img in images_slides" active="slide.active">
          <img ng-src="{{slide_img.image_name}}">
          <div class="carousel-caption">
            <h4>Images No {{$index+1}}</h4>
          </div>
        </slide>
      </carousel>
    </div>
  </div>
 //include js link
<script type="text/javascript" src="yourprojectdir/angularjs/1.0.8/angular.min.js"></script>
 <script type="text/javascript" src="yourprojectdir/js/angular-ui-bootstrap/0.10.0/ui-bootstrap-tpls.min.js"></script>
    <script src='yourprojectdir/jquery/2.1.3/jquery.min.js'></script>
    <script src="yourprojectdir/js/index.js"></script>
  </body>
</html>

js/index.js

angular.module('slideapp', ['ui.bootstrap']);
function ImageCarouselDemoCtrl($scope){
  $scope.slid_myInterval = 3000;
  $scope.images_slides = [
    {
      slide_img: 'http://techieupgrader.in/images/slider/wood.jpg'
    },
    {
      slide_img: 'http://techieupgrader.in/images/slider/food.jpg'
    },
    {
      slide_img: 'http://techieupgrader.in/images/slider/sports.jpg'
    },
    {
      slide_img: 'http://techieupgrader.in/images/slider/people.jpg'
    }
  ];
}


css/style.css




Alternate way - angular image gallery with thumbnails



$scope.$watch('imgslides', function(values) {
var i, img = [], slider;

for (i = 0; i < $scope.imgslides.length; i += 2) {
slider = { image1: $scope.imgslides[i] };

if ($scope.imgslides[i + 1]) {
  slider.image2 = $scope.imgslides[i + 1];
}

 img.push(slider);
}

$scope.img_groupedSlides = img;
}, true);

0 comments: