Băng chuyền đáp ứng nhiều mục

Question

Tôi đang xây dựng một trang web yêu cầu băng chuyền phải được triển khai. Bởi vì trang web này được xây dựng trên AngularJS Tôi muốn đi với Angulars Boostrap Carousel, tuy nhiên, băng chuyền này dường như chỉ cho phép một hình ảnh tại một thời điểm.

Điều tôi cần sẽ là 3 hình ảnh cùng một lúc trên máy tính để bàn, trên máy tính bảng 2 hình ảnh và trên thiết bị di động 1. Vì vậy, cũng có yếu tố đáng kể về thiết kế đáp ứng ở đây.

Có ai có kinh nghiệm với điều này không liên quan đến JQuery không? Tôi không phản đối điều đó nhưng đã được một thành viên cao cấp của nhóm nói với cố gắng tìm nguồn thay thế, nếu có.

Những gì tôi cố gắng từ Angulars bootstrap: băng chuyền

$scope.getPromoURLs = function() { 
     var subObj = myJSON.response.details.promotionalSpots; 
     for(var keys in subObj) { 
      var value = subObj[keys].promotionUrl; 
      $scope.slides.push(value); 
     } 
    }; 
    // Builts an array of promotional URLS to from a JSON object to source the images 
    $scope.getPromoURLs(); 

    $scope.addSlide = function() { 
     // Test to determine if 3 images can be pulled together - FAILS 
     var newWidth = 600 + slides.length; 
     slides.push({ 
      image: ''+slides[0]+''+slides[1] // etc 
      // Tried to stitch images together here 
     }); 
    }; 

    // TODO Should examine array length not hardcoded 4 
    for (var i = 0; i < 4; i++) { 
     $scope.addSlide(); 
    }   

Answer 1

ui-bootstrap không phải là một lựa chọn tốt, nó có nhược điểm khác như phạm vi riêng biệt trên mỗi slide. Tôi đang sử dụng https://github.com/revolunet/angular-carousel hỗ trợ nhiều mục trên mỗi trang trình bày.

Bởi vì hỗ trợ chỉ thị này ng-lặp lại. Bạn dễ dàng thay đổi bộ sưu tập của bạn và sử dụng lồng nhau ng-lặp lại để thiết lập số lượng khác nhau của các mục trong mỗi slide.

<ul rn-carousel class="image"> 
    <li ng-repeat="images in imageCollection"> 
    <div ng-repeat="image in images" class="layer">{{ image }}</div> 
    </li> 
</ul> 

Như bạn đã xác định 3 điểm ngắt. Chúng ta chỉ cần tái tạo lại mảng imageCollection khi kích thước khung nhìn đã thay đổi.

$window.on('resize', function() { 
    var width = $window.width(); 
    if(width > 900) { 
     // desktop 
     rebuildSlide(3); 
    } else if(width <= 900 && width > 480) { 
     // tablet 
     rebuildSlide(2); 
    } else { 
     // phone 
     rebuildSlide(1); 
    } 
    // don't forget manually trigger $digest() 
    $scope.$digest(); 
}); 

function rebuildSlide(n) { 
    var imageCollection = [], 
     slide = [], 
     index; 
    // values is your actual data collection. 
    for(index = 0; index < values.length; index++) { 
     if(slide.length === n) { 
      imageCollection.push(slide); 
      slide = []; 
     } 
     slide.push(values[index]); 
    } 
    imageCollection.push(slide); 
    $scope.imageCollection = imageCollection; 
} 

Answer 2

Vì vậy, tôi đã thử cách này để làm việc với nhiều mục trên mỗi hoạt ảnh. Tôi cũng đã cố gắng áp dụng [Phát hiện cho trang web đáp ứng bằng AngularJS]. 2

Hãy xem ở đây: http://plnkr.co/edit/QhBQpG2nCAnfsb9mpTvj?p=preview

Kết quả:

1) Một mục (Mobile Version):

2) Hai Items (Tablet Phiên bản):

3) Ba Items (Phiên bản Desktop):

PHẦN 2: Nó cũng có thể phát hiện các nghị quyết của cửa sổ để xác định xem nó là tablet,mobile hoặc desktop sau tutorial ... Hãy thử sử dụng giá trị này: "mobile, tablet, desktop" để xem ba giá trị khác nhau ent xem phiên bản.

trình diễn củatablet version:

var app = angular.module('myApp', ['ui.bootstrap', 'angular-responsive']); 

app.controller('MainCtrl', function($scope) { 
    $scope.displayMode = 'mobile'; // default value 


    $scope.$watch('displayMode', function(value) { 

    switch (value) { 
     case 'mobile': 
     // do stuff for mobile mode 
      console.log(value); 
     break; 
     case 'tablet': 
     // do stuff for tablet mode 
      console.log(value); 
     break; 
    } 
    }); 
}); 

function CarouselDemoCtrl($scope) { 
    var whatDevice = $scope.nowDevice; 
    $scope.myInterval = 7000; 
    $scope.slides = [{ 
    image: 'http://placekitten.com/221/200', 
    text: 'Kitten.' 
    }, { 
    image: 'http://placekitten.com/241/200', 
    text: 'Kitty!' 
    }, { 
    image: 'http://placekitten.com/223/200', 
    text: 'Cat.' 
    }, { 
    image: 'http://placekitten.com/224/200', 
    text: 'Feline!' 
    }, { 
    image: 'http://placekitten.com/225/200', 
    text: 'Cat.' 
    }, { 
    image: 'http://placekitten.com/226/200', 
    text: 'Feline!' 
    }, { 
    image: 'http://placekitten.com/227/200', 
    text: 'Cat.' 
    }, { 
    image: 'http://placekitten.com/228/200', 
    text: 'Feline!' 
    }, { 
    image: 'http://placekitten.com/229/200', 
    text: 'Cat.' 
    }, { 
    image: 'http://placekitten.com/230/200', 
    text: 'Feline!' 
    }]; 


    var i, first = [], 
     second, third; 
    var many = 1; 

    //##################################################  
    //Need to be changed to update the carousel since the resolution changed 
    $scope.displayMode = "tablet"; 
    //################################################## 
    if ($scope.displayMode == "mobile") {many = 1;} 
    else if ($scope.displayMode == "tablet") {many = 2;} 
    else {many = 3;} 

    for (i = 0; i < $scope.slides.length; i += many) { 
     second = { 
     image1: $scope.slides[i] 
     }; 
     if (many == 1) {} 
     if ($scope.slides[i + 1] && (many == 2 || many == 3)) { 
     second.image2 = $scope.slides[i + 1]; 

     } 
     if ($scope.slides[i + (many - 1)] && many == 3) { 
     second.image3 = $scope.slides[i + 2]; 
     } 
     first.push(second); 
    } 
    $scope.groupedSlides = first; 
} 

app.directive('dnDisplayMode', function($window) { 
    return { 
    restrict: 'A', 
    scope: { 
     dnDisplayMode: '=' 
    }, 
    template: '<span class="mobile"></span><span class="tablet"></span><span class="tablet-landscape"></span><span class="desktop"></span>', 
    link: function(scope, elem, attrs) { 
     var markers = elem.find('span'); 

     function isVisible(element) { 
     return element && element.style.display != 'none' && element.offsetWidth && element.offsetHeight; 
     } 

     function update() { 
     angular.forEach(markers, function(element) { 
      if (isVisible(element)) { 
      scope.dnDisplayMode = element.className; 
      return false; 
      } 
     }); 
     } 

     var t; 
     angular.element($window).bind('resize', function() { 
     clearTimeout(t); 
     t = setTimeout(function() { 
      update(); 
      scope.$apply(); 
     }, 300); 
     }); 

     update(); 
    } 
    }; 
}); 

Hy vọng nó sẽ giúp!