मल्टी-आइटम उत्तरदायी कैरोसेल

Question

मैं ऐसी वेबसाइट तैयार कर रहा हूं जिसके लिए एक कैरोसेल लागू किया जाना आवश्यक है। चूंकि यह वेबसाइट पर बनाई गई है AngularJS मैं एंगुलर बूस्ट्रप कैरोसेल के साथ जाना चाहता था, हालांकि, यह कैरोसेल एक समय में केवल एक छवि को अनुमति देता है।

मुझे डेस्कटॉप पर, टैबलेट 2 छवियों और मोबाइल पर एक समय में 3 छवियां 3 की आवश्यकता होगी। इसलिए यहाँ भी उत्तरदायी डिज़ाइन का एक महत्वपूर्ण तत्व शामिल है।

क्या किसी के पास कोई ऐसा प्रयोगकर्ता है जिसमें JQuery शामिल नहीं है? मैं इसका विरोध नहीं कर रहा हूं लेकिन टीम के एक वरिष्ठ सदस्य ने वैकल्पिक विकल्प देने का प्रयास करने के लिए कहा है, यदि कोई हो।

क्या मैं Angulars बूटस्ट्रैप से करने की कोशिश की:

$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-बूटस्ट्रैप के हिंडोला एक अच्छा विकल्प नहीं है, यह प्रत्येक स्लाइड पर अलग दायरे जैसी अन्य दोष है। मैं https://github.com/revolunet/angular-carousel का उपयोग कर रहा हूं जो प्रत्येक स्लाइड पर बहु ​​आइटम का समर्थन करता है।

क्योंकि यह निर्देश समर्थन ng-repeat है। आप आसानी से संग्रह को बदलते हैं और प्रत्येक स्लाइड में अलग-अलग आइटम सेट करने के लिए नेस्टेड एनजी-दोहराना का उपयोग करते हैं।

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

जैसा कि आपने पहले ही 3 ब्रेक पॉइंट्स को परिभाषित किया है। व्यूपोर्ट आकार बदलते समय हमें imageCollection सरणी का पुनर्निर्माण करने की आवश्यकता है।

$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

तो, मैं इतनी के रूप में angularjs Carousel (ui.bootstrap.carousel) बनाने के लिए एनीमेशन प्रति बहु आइटम के साथ काम करने के लिए यह एक कोशिश की। मैंने आवेदन करने की भी कोशिश की है [AngularJS का उपयोग कर उत्तरदायी वेबसाइटों के लिए जांच]। http://plnkr.co/edit/QhBQpG2nCAnfsb9mpTvj?p=preview

परिणाम::

1) एक आइटम (मोबाइल संस्करण):

2) दो आइटम (गोली 2

यहाँ एक नजर डालें संस्करण):

3) तीन आइटम (डेस्कटॉप संस्करण):

भाग 2: इतनी के रूप में अगर यह होता है निर्धारित करने के लिए यह भी खिड़की के संकल्प का पता लगा सकते tablet,mobile या desktop इस tutorial के बाद ... इन मानों का उपयोग करने का प्रयास करें: "mobile, tablet, desktop" तीन अलग देखने के लिए एंट व्यू संस्करण।tablet 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(); 
    } 
    }; 
}); 

आशा है कि यह मदद करता है!