Menu
I'm building a website that requires a carousel to be implemented. Because this website is built on AngularJS I wanted to go with Angulars Boostrap Carousel, however, this carousel appears to only allow one image at a time.
What I will need will be 3 images at a time on desktop, on a tablet 2 images and on mobile 1. So there's a significant element of responsive design involved here too.
Does anyone have any experince with this that doesn't involve JQuery? I'm not opposed to it but have been told by a senior member of the team to try to source an alternative, if any.
What I tried from Angulars bootstrap:
$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(); } 
976
To handle multiple item at once, we'll add 1 more props to our Carousel component, which is show prop, this will be used as indication for the Carousel to show how many item at once. So let's add it to our Carousel props. Now we need to use the show prop to adjust the CSS of the Carousel children.
To insert multiple jQuery carousels to the same webpage, you need to create each carousel with a unique ID. In Amazing Carousel, Publish dialog, select the option Publish to Folder, then click Browse to select a folder to save the generated files. You need to set up a unique Carousel ID for each carousel.
Following are the steps to create a Bootstrap carousel:Apply CSS to resize the . carousel Bootstrap card body by using the code segment below. In this step, the sliding images are defined in the division tag as under. Last step is to add controls to slide images using the carousel-control class as below.
The carousel is a slideshow for cycling through a series of content, built with CSS 3D transforms and a bit of JavaScript. It works with a series of images, text, or custom markup. It also includes support for previous/next controls and indicators.
ui-bootstrap's carousel is not a good choice, it has other drawback like isolated scope on each slide. I'm using https://github.com/revolunet/angular-carousel which support multi item on each slide.
Because this directive support ng-repeat. You easy change you collection and using nested ng-repeat to set different number of items in each slide.
<ul rn-carousel class="image"> <li ng-repeat="images in imageCollection"> <div ng-repeat="image in images" class="layer">{{ image }}</div> </li> </ul> As you have already defined 3 break points. We just need to reconstruct the imageCollection array when viewport size changed.
$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; } If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
