mihnsen / ui-carousel Goto Github PK

View Code? Open in Web Editor NEW

77.0 77.0 68.0 298 KB

A simple, lightweight module for carousel in your AngularJS app, Inspired from slick carousel.

Home Page: http://mihnsen.github.io/ui-carousel/

License: MIT License

CSS 9.63% JavaScript 77.26% HTML 13.11%

ui-carousel's Introduction

Hi 👋, I'm Minh Nguyen

A father, programer, product builder from Hanoi

🔭 I’m co-founded a company name ownego
🔭 I’m currently working on teeinblue and qikify
🌱 I’m currently learning Vue3, Personal finance and Entrepreneur
💬 Ask me about Vim, Linux, Product owner, Life style

ui-carousel's People

Contributors

Stargazers

Watchers

Forkers

meepeek jannoelc beasta sbmadhav suchidev bdiopxv vinieloy pittan neha1908 berkutsoft michael-borisov santhoshpkumar juliodamas philzip akiij thiagodeepcoder rocity glip80 swapnildv bootcamperscollective ivonwebdev barry911 bigbasket acivan rafalskyi nikola386 sugaaloop szymeo alexchesser nalus shefaleechaudhary zhiguozhang ghmahta sumtotalsystems swaranan olegg13 navneetpriya1 dineshchinnasamy13 shamimwp ttruong21 laosomboon llakhani dakshinau chrisballarin sirwesley torvalds4zh prabusankarm wwstay qaisammari hannadrehman siddmegadeth dashawk developerpratik fedenelli roshankrsoni dgrayboff pazamit jeffersonromano ajaysinghchouhan353 jaylovalova manusoftar avnerpnini motownphill gadekarakshay eashl003 daniel23-stack jacobtudor nivekze

ui-carousel's Issues

Any news of new release? How about ng-swipe?

Waiting for that feature, any help needed?

best regards

Mike

ng-if (hide/show) dynamically change

Hello,

I'm implementing this with angularjs , I want to dynamically hide-show 1 icon of carousel-item using ng-if. but I'm not able to refresh item.

Carousel slides do not update when the array changes

Hello there,

I've noticed that the carousel does not update the items displayed once we change the array of objects.
Suppose we have a carousel loading items from var mySlides = [1, 2, 3, 4, 5, 6] and we decide to mutate the array to mySlides = [1, 2, 3, 4] or we add few elements, the slider won't get updated.
This is pretty bad when you work with an API and fetch objects using a JSON or other.

Variable width feature

Hi mihnse,

Really a great light weight plugin for AngularJS 1. When will you release the next version which have variable width feature ?

Angular JS 1.3.20 doesn't work

It seems this module won't work with 1.3.20, I didn't receive any error but the slides property won't get filled. So I always ended up with an empty carousel.
I tried several things also to log from the module but it seems slides array remains always empty.

$element[0].clientWidth is 0

Hi I,

If I load page i have $element[0].clientWidth 0 and if I change the size of my browser, after it is OK.

I dont know why.

can you help me?

Carousel does not automatically start cycling on pageload

Hi Folks,

Please help me. Page load Carousel cycling automatic how to stop. after prev or next click only it should be cycling.

How to change the value of slides-to-show based on screen size?

Unable to disable infinite looping of slides

I am using your package to include a carousel in my project.I have added customized previous and next buttons and want to disable the infinite looping.I have referred your documentation and found that infinite looping is enabled by default and can be disabled using infinite= "false", but even after including this code, it is not disabled.
everything works perfectly except the infinite looping.Please let me know if I am missing anything.

Using with Angular CLI - types

I'm trying to use your lib with my angular-cli project:

Your readme instructions don't quite explain how to import your lib for my needs so I am following other instructions here: https://stackoverflow.com/a/40527978/413127

Question is:

Do you offer @types so that I can import straight into my component? (or do you plan to?)

How to add an external template into tag carousel-item

<ui-carousel
     slides="steps"
     slides-to-show="1"
     slides-to-scroll="1"
     autoplay="false"
     autoplay-speed="2000"
     infinite="false"
     initial-slide="0"
     dots="false">
<carousel-item>
     <p><img ng-src="{{item.image}}"></p>
     <div ng-include="'content_gallery.html'"></div>
</carousel-item>
</ui-carousel>

 <script type="text/ng-template" id="content_gallery.html">
    <div>
        <div ng-repeat="category in collection_category">
            <a href="javascript:void(0)" ng-click="checkItem(category)"><i class="{{category.icon}}" ng-class="{active:category.active == true}"></i> {{category.title}}</a>
        </div>
    </div>
</script>

carousel button doesnt work properly when deployed to heroku

I don't know why but on my locally the carousel works fine, but just when i deployed everything to heroku the arrows show 'a' and 'b' instead. Any reason why?

no working ng-click

I want to do the following method but it does not work for me any idea?

<ui-carousel class="col-md-6 col-md-offset-3" slides="galleries" slides-to-show="3" on-init="ctrl.onCarouselInit()" slides-to-scroll="3" > <carousel-item > <div class="overlay-box" ng-click="openGaleria('hola')"> <img src-="@{{item.url}}" alt=""/> <div class="overlay"> <div class="overlay-content"> <i class="fa fa-search fa-2x fa-flip-horizontal" aria-hidden="true" ng-click="ctrl.openGaleria('hola')"></i> </div> </div> </div> <button ng-click="ctrl.openGaleria('hola')"> hola mundo</button> </carousel-item> </ui-carousel>

$scope.ctrl.openGaleria = function(image){
console.log(image)
}

Uninitialized slide object

Hi,

sorry for the second issu. I thought it might be good to split, since for this, I don't even know if it is a real bug.

I would like to use json objects as slide array for having the possibility of image description.

I modified your codepen for this:
http://codepen.io/anon/pen/WpVbRQ

When opening first time, it gives an error in the console:
http://s.codepen.io/boomerang/iFrameKey-4828c091-8050-7970-2dc8-5a293168080d/%7B%7B%20item.url%20%7D%7D 404 (Not Found)
So I guess the item.url is not yet initialized.

Thanks again and best regards,
Fabian

how insert data variable into scope next prev?

The example below not working:

<carousel-prev>
     <button class="carousel-btn">{{item.prev}}</button>
</carousel-prev>
<carousel-next>
   <button class="carousel-btn">{{item.next}}</button>
</carousel-next>

Center Mode

Hello :)
I want to get center position on carousel like Center mode on slick.
Is it possible to do this? / or How can I do it ?

troubles with injection

I'm having some troubles on trying to use ui-carousel. I wasn't able to inject it yet, I got an error...

I've installed using:
bower install angular-ui-carousel --save

Then I suppose I should insert these lines in index.html (it was not in the instructions)... This was what I did:

<head>
    (...)
    <script src="../bower_components/angular-ui-carousel/dist/ui-carousel.css"></script>
    <script src="../bower_components/angular-ui-carousel/dist/ui-carousel.js"></script>
   (...)
</head>

Previously I tried to insert at the end of the <body> but it didn't work when I ran gulp.

Then, I've configured my app.js as:

angular.module('myProject', [
    'ui.router', 
    'ngResource',
    'ngStorage',
    'ui.carousel'
])

I didn't use any markup yet, and didn't set any configuration in the run method or whatsoever.
Then, after gulp and reloading the project at the browser, I got these errors:

Can anyone give me some guidance here, please?

fade=true with autoplay

Hi,
thanks for the great work with the ui-carousel. It is amazingly easy to use.

I faced the problem, that if I add fade="true" the autoplay does not work anymore. I did not see a report about that behavior.

For an example I just took your codepen: http://codepen.io/mihnsen/pen/ZejQBJ
And add there the fade="true"

Best regards,
Fabian

Getting started

Sorry for the noobish question, but after installation I get only the sequence of items, and they don't turn into a carousel. ...

I have the files, injected, added ngSanitize as well, prepared an array of images and pointed slides to them.
Carousel item has the image tag requesting the item, and they get displayed, but they wont turn into a carousel, and I dont get any errors in the console. ...

I'm out of ideas, ...
Could anyone give me a hint? Thank you.

using filtering

hi,
i'm trying to use angular filter with carousel
in template :

itam.name

i'm getting phones array from http request and then after promise return setting doneloading= true

i tries to use filtering as follow
<ui-carousel slides="Phones | filter:{'Label':category}" ....

category value from dropdown

so the problem is filtering causes an error about loading and digest loop

the issue is urgent for release , any help is appreciated

regards,

Is there an Angular 4 version?

Hi there,

This is exactly what I need.. I'm using angular 4, how do I use it?

Thank you

Problem with images before pagination routes

After changing the url through $location.path('/pathurl'), the images are width = 0px;, that is, it does not capture the page width size and does not correctly resize the carousel.
I'm almost giving up and trying this way: https://flickity.metafizzy.co/

on-after-change event issue

hi when i write function for on-after-change event. then function triggered on page load and when i press next button it triggered two times . why it is so ? i want to trigger ajax call on changing the slide

Play / Pause button control

It would e nice if you could add a play pause button. Or at the very least be able to use a variable that you can pass into 'autoplay' that you can set to false. I have tried this approach but I do not think you have a watcher in place.

Function defined on on-init is not working

I have been using your package to add a carousel.When I load my page, entire page loads first and then after less than 2 secs, the carousel appears.So I wanted to add a loading spinner so that when the carousel is ready, the entire page loads up with no sudden appearance of the carousel.In my controller code, I have initialized a variable with true and want to change that value to false when the carousel is ready.I have added on-init="onCarouselReady()" in html and defined the same function in controller.But looks like the function is not even called.Would you please help me in fixing this and let me know if I am missing anything.

On load the required slide is not at first place.

On first transition it gets to the first place.

how disable autoscroll on click dot or arrows

How can i stop autoscroll when dot or arrow was clicked?

angular 1.6 and ui-carousel doesn't work

Here is my repo https://github.com/evan4/carousel
There ara 2 version of angular - 1.5.8 and 1.6
By default i use 1.5.8 - It is bower_components/angular/angular.min.js
and carousel works fine
But I try to replace angular 1.5.8 with 1.6 (bower_components/angular/angular.js) all photos disapeared. And I see only arrows.
I have a question. Do I need use angular 1.6 or I have to stick with 1.5.8 ?

carousel issue

images gets skewed after signin in chrome,but in other sites it is working good

How use ng-repeat into carousel-item before item rendered

<ui-carousel
   slides="steps"
   slides-to-show="1"
   slides-to-scroll="1"
   autoplay="false"
   autoplay-speed="2000"
   on-after-change="singleAfterWelcome(currentSlide)"
   dots="false">
       <carousel-item>
          <div ng-show="item.step == '0'">
              <!-- step 0 -->
          </div>
          <div ng-show="item.step == '1'">
              <!-- step 1 -->
              <div class="col-xs-12 col-md-12 text-center ola-text">
                  <div class="gallery-categories">
                      <!-- //******* this is displayed but not showing in ng-repeat ******* -->
                      {{ item.collection_category}}
                     <!-- //******* this is not reading ngRepeat ******* -->
                     <div ng-repeat="category in item.collection_category">
                         <i class="{{category.icon}}" ng-class="{'active':category.active == true}"></i>
                         <a href="javascript:void(0)" ng-click="category.action()"><span>{{category.title}}</span></a>
                    </div>
                </div>
               </div>
               <div class="clearfix"></div>
           </div>
       </div>
   </carousel-item>
</ui-carousel>

Ng-repeat is not working this way into <carousel-item> tag:

 <div ng-repeat="i in [1, 2, 3, 4, 5]">
    <span>{{i}}</span>
</div>

Carousel init fires but doesn't show up until resize

Hello! Working great except for this one issue. Once it loads, if I resize the page it shows up immediately. Is there a way to manually trigger a refresh of the carousel? Otherwise, any idea where I could begin diagnosing this issue?

Thank you!
Matt

click Even on carousel-item

Hello,
I'm implementing this with angularjs, But I' m not able to use ng-click on carousel-item. Can any one help me out?

Location of slides are pulled to the left

Hey mihnsen,

I was playing with ui-carousel and noticed that my slides were not evenly distributed across the container, any idea what could cause this?

there is also a little bit of the next slide sticking out, but I suspect this will disappear when the slides are shifted

Events "on-before-change" & "on-after-change" are fired forever.

The events are fired even after I have closed the view that is hosting the directive ui-carousel. I am implementing the logic to fetch the image from server in"onCarouselBeforeChange" event. First time it works good. but the second time onwards the events from the first time are also fired and my logic fails.

Adaptive Height/Width (Fluid Design)

I have noticed that the following features are aimed at a later version:

Variable width
Active height

Is there any workaround to make the slider horizontally fluid? I can use a fixed height for the containing element, but my goal would be to use a background within the slide and anchor it to the center(h)/middle(v), keeping its width always at 100%.

I tried setting width: 100% on slides/images but realized that the containing <ul> for ui-carousel dynamically sets it's width to the sum of all image's widths so it can keep the sliding consistent. (At least on default mode, didn't try the fade option.) - Which means that it isn't that simple.

Are there any "easy" hacks to keep a fluid layout with ui-carousel? Is there any pre-release version with such a feature?

Touch based swipe for mobile

Any update on this feature ?

We have this carousel in our client's live portal and it becomes difficult to use buttons for scrolling on mobile. By when are you planning to release this one?

Scrolling to Last Slide on Load

It always scrolls to the last slide when I load my app.
I have autoplay set to false and initial-slide set to 1

<div class="row">
        <div class="small-6 large-centered columns">
            <ui-carousel
                slides="info.item.forecast"
                slides-to-show="3"
                slides-to-scroll="3"
                initial-slide="1"
                dots="true"
                arrows="true"
                autoplay="false"
                speed="600">

                <carousel-item>
                    <div class="card" style="height:200px">
                        <div class="card-divider">
                            {{item.date}}
                        </div>
                        <div class="card-section">
                            <h5>{{item.text}}</h5>
                            <p>
                                High: {{item.high}} <br>
                                Low: {{item.low}}
                            </p>
                        </div>
                    </div>
                </carousel-item>
            </ui-carousel>
        </div>
    </div>

how to access controller scope in <carousel item> tag

e.g
<ui-carousel slides="vm.independentQuizes" slides-to-show="4" slides-to-scroll="4" on-init="vm.onCarouselInit()" on-before-change="vm.before()" on-after-change="vm.yo(currentSlide)"> <carousel-item> <div class="multiple-items"> <figure> <div class="editholder"> <a href="#/start/{{item.Id}}"><img ng-src="{{resources_url + item.CoverPicPath }}" class="img-responsive" alt=""> </a> </div> <figcaption> <p>Quiz {{vm.as}}</p> <h2 class="category">{{item.Name}} </h2> </figcaption> </figure> </div> </carousel-item>

I want to access vm.as in item tag

Bug in item slide resize

There is an error in rendering starting slide item with width: 0px;. That after resize the window it resets.

Autoplay + add slides doesn't work

The cases in your examples works fine, but you have not an example for autoplay + add slides. So i dont know if i am doing something wrong :

scope.slides = [];
// fetch server data, add slides on callback
scope.slides.push(newSlides); // Slides are added to the view but doesn't autoplay until i click an arrow btn

<ui-carousel slides="slides" slides-to-show="3" slides-to-scroll="1" initial-slide="0" autoplay="true" autoplay-speed="2000" dots="false">
    <carousel-item>
        <div class="text-center">
            <img src="{{ item }}" alt="{{ item.nombre }}" style="max-height:100px;" />
        </div>
    </carousel-item>
</ui-carousel>

If i do something like this it works fine

scope.slides = ['url', 'url', 'url' , 'url'];

How can i trigger the autoplay manually after the data has been loaded asynchronously?

on-after-change and on-before-change errors

Hey,

sorry for the next issue in a row :(

I tried to use on-after-change (or on-before-change) and they both give an error (at the first click, at init everything works):

console_runner-079c09a….js:1 TypeError: Cannot use 'in' operator to search for 'carouselDemo' in 1
    at fn (eval at compile (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js:237:285), <anonymous>:4:61)
    at Object.d.(anonymous function) [as onAfterChange] (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js:86:278)
    at http://vckit.themelego.com/wp-content/themes/twentyfifteen/ui-carousel.min.js:1:3756
    at https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js:160:433
    at f (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js:47:148)
    at https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js:50:68

More is in the codepen:
http://codepen.io/anon/pen/BWXNjQ

Unfortunately I did not find any way to search deeper for the trouble and can not exclude some wrong usage.

Best regards,
Fabian

How to pause and resume the slideshow on button clicks?

I did bind the attribute autoplay to a model in controller. But still could not achieve the pause and resume functionality.

<ui-carousel 
              slides="slides"
              slides-to-show="1"
              slides-to-scroll="1"
              initial-slide="0"
			  autoplay={{ autoplay }}
			  fade="false"
			  autoplay-speed="5000"
			  speed="1000"
              dots="true" on-init="onCarouselInit()"
              on-before-change="onCarouselBeforeChange(item)"
              on-after-change="onCarouselAfterChange(item)">
            
              <carousel-item>
                <div>
				  <div class="carouselChartDiv" ng-class="item.template"></div>
                </div>
              </carousel-item>

            </ui-carousel>

ng-if ng-src not working

ng-if and ng-src are not working when written in

carousel-item

<ui-carousel flex layout="row" slides="ads" slides-to-show=3 slides-to-scroll=1 infinte="true" dots="true" autoplay="true">
		<carousel-item>
		<md-card>
	          <video ng-if='item.attachment_type === "video/mp4" ' controls="controls" style="height: 250px;">
	            <source ng-src="{{ item.banner_attachment }}" />
	          </video>
	          <img ng-if="item.attachment_type === 'image/png' || item.attachment_type === 'image/jpeg' || item.attachment_type === 'image/gif' || item.attachment_type === 'image/bmp' || item.attachment_type === 'image/jpg'" ng-src="{{ item.banner_attachment }}" class="md-card-image" style="max-width: 100%; width: auto; height: 250px;" />	          
	        <md-card-content>
	        	<p>{{ item.ad_description | limitTo: 50 }}</p>
	        </md-card-content>
	        <md-card-actions>

	        </md-card-actions>
		</md-card>
		</carousel-item>
	</ui-carousel>

Using ng-if causes duplicates in the number of items

When adding ng-if on container div for ui-carousel, each time the div is displayed , ui-carousel will multiply the items inside of it.

this is the example of the code:

<div  ng-if="Dashboard.flag">
    <ui-carousel
        slides="Dashboard.slides"
        slides-to-show="3"
        slides-to-scroll="1"
        initial-slide="1"
        dots="true">
      <carousel-item>
        <h3>{{ item + 1 }}</h3>
      </carousel-item>
    </ui-carousel>
  </div>
  <button ng-click="Dashboard.showhide()">Click me</button>

any idea how to fix this?

this is the firs time:

this is after hiding and showing div:

how inject in app module in angular 4

Stop on hover for Autoplay mode

Could you please point me how to do it?
Slick has this feature by default, which is make sense.

Ui-Router Issue? Text Only Display.

I'm getting an error where only the text of an image url will display. Is it possible ui-router would be interfering?

Using ui-carousel with ngRepeat

I have a list of elements that are generated with ngRepeat. I can't figure out how to implement this. It seems like it would be a common scenario, but my slides' data isn't being passed to the children of the carousel-item directives.

Here's my original markup:

<content-card flex="50" flex-sm="33" flex-md="25" flex-gt-md="20" layout="column" ng-repeat="content in $ctrl.content" content="content"></content-card>

And here's what I'm trying to do:

<ui-carousel slides="$ctrl.content" slides-to-show="3" slides-to-scroll="1" initial-slide="1">
    <carousel-item>
        <content-card layout="column" content="item"></content-card>
    </carousel-item>
</ui-carousel>`

This throws an error because the 'content' attribute on the 'content-card' elements isn't being populated correctly.

Add new data doesn't work

Hii @mihnsen .
Thanks for this amazing carousel ,but i find some problem .

On "carousel-next" click my data is adding, but carousel doesn't show new slides (shows only olds) and works incorrectly . How can i solve that ?

<carousel-next>
<span ng-click="loadMoreSlides()">Add 5 slides</span>
</carousel-next>

Problem with uib-tabset

It's not loading when I put in inside of uib-tabset