ksachdeva / angular-swiper Goto Github PK
View Code? Open in Web Editor NEWAngular directive for nolimits4web/Swiper
License: Apache License 2.0
Angular directive for nolimits4web/Swiper
License: Apache License 2.0
Hello.. thanks for this plugin, i've been using this in my project.
I do have trouble to do .getElementsBy, which is inside the active slide on the swiper container. Have tried many options but the return always value from the last or the first slide. One of the code i've tested
swiper.on('slideChangeEnd', function () {
var swTest = document.getElementsByClassName("swiper-slide-active");
if (swTest = 'swiper-slide-active'){
var swName = document.getElementById("name").textContent;
console.log (swName);
}
});
Anyone can help me on this ? Thanks
solution : var swTest = document.querySelector('.swiper-slide-active h1').innerHTML;
Any plans to make it compatible with the new angular version??
Hi guys,
Small question, does this directive support Thumbs Gallery from demo http://idangero.us/swiper/demos/?
I was trying to listen to an event, so I first tried the example:
<ks-swiper-container swiper="rosesSwiper" loop="true" slides-per-view="1">
<ks-swiper-slide class="swiper-slide" ng-repeat="rose in roses">
<div class="imgFullWu" style="background: url(img/roses/{{rose.id}}.jpg);"></div>
<div class="t_rose">
<h1>{{rose.title}}</h1>
<p>{{rose.description}}</p>
<button class="boton_g" ng-click="selectRose(rose.id)">
Regalar
</button>
</div>
</ks-swiper-slide>
</ks-swiper-container>
.controller('RosesCtrl', function($rootScope, $scope, $ionicModal, $state, generalService) {
$scope.rosesSwiper = {};
generalService.GetRoses(function (roses) {
$scope.roses = roses;
});
$scope.rosesSwiper..on('slideChangeStart', function () {});
})`
And I get TypeError: $scope.rosesSwiper.on is not a function
I was trying this directive out for integration into an Ionic app for iOS, and while doing so I encountered an odd issue: when using the directive with an ng-repeat that was using data from an $http service, the initialized Swiper slides didn't move properly. You can drag a slide a small distance, but it will always snap back into its original position, and never transition to the next slide. Autoplay doesn't work either.
I first noticed it on iOS 9, but I wasn't sure where the problem was, so I investigated further. I was able to recreate the problem outside of an Ionic app, using the demos page that's part of the repo.
First, I created a simple test JSON file:
[{
"items": [1,2,3,4,5,6,7,8,9,10,11,12,13,14]
}]
Then I added a data service:
module.factory('dataService', function($http) {
var service = {};
service.getJSON = function($scope) {
$http.get('data.json').then(function(response){
$scope.remoteData = response.data[0];
},function(error) { });
}
return service
});
Then modified the supplied controller:
module.controller('TestCtrl', function($scope, dataService) {
dataService.getJSON($scope); // <-- line added
$scope.swiper = {};
$scope.next = function() {
$scope.swiper.slideNext();
};
$scope.onReadySwiper = function(swiper) {
console.log('onReadySwiper');
swiper.on('slideChangeStart', function() {
console.log('slideChangeStart');
});
};
});
This recreated my issue. However, this further testing revealed that the issue is only in certain browsers and platforms.
These devices/browsers had the issue:
These devices/browsers were always fine:
I was just double-checking things, and in the situations where the issue exists, repeated page refreshes can result in a successful issue-free instance. But keep refreshing, and the problem returns.
I don't think it's an issue with Swiper itself, because if I substitute my own simple directive for this one, it works in all of the above situations.
Has anyone else seen this issue?
Hi,
I am trying to use breakpoint object but its not working for me. Can you please tell me how to use it.
Here is my code
<ks-swiper-container
initial-slide="1"
loop="true"
show-nav-buttons="true"
slides-per-view="3"
space-between="5"
autoplay="2500"
pagination-clickable="false"
override-parameters="{'centeredSlides':'true','breakpoints': {'320': {'slidesPerView': '1'}}}">
<ks-swiper-slide class="swiper-slide" ng-repeat="slide in slides">
<img ng-src="{{slide.image}}">
</ks-swiper-slide>
</ks-swiper-container>
Not able to scroll horizontally using mousewheel
Hi,
In a multipage angular application scenario,
I noticed that when leaving a page that had a directive that contained angular swiper on it, and browsing to a new page that does not have angular swiper on it, a change in orientation will force the resize even to occur which in turn will cause an exception.
I suspect that it happens due to the fact that angular swiper double registers all the events and only deregister them once.
Might be worth looking.
Thx.
M
I am trying $scope.swiper.slideTo(4); but it says slideTo is not a function
any idea what am I missing
I have configured in my view file as below
<ks-swiper-container initial-slide="0" speed="3000" loop="true" autoplayStopOnLast="false" autoplay="3000" centeredSlides="true" show-nav-buttons="false" slides-per-view="1" loopedSlides="5" space-between="0" pagination-clickable="false" override-parameters="{ effect: 'coverflow', coverflow: {rotate: 50,stretch: 0,depth: 100,modifier: 1,slideShadows : false} } "> <ks-swiper-slide class="swiper-slide" ng-repeat="s in [1,2,3,4,5]"> <img ng-src="img/slider{{s}}.jpg" width="100%"> </ks-swiper-slide> </ks-swiper-container>
where is it?
the swiper is not responsive.
help me out making its responsive for mobie view
thank you
Hi all,
I think it would be very useful to implement an ngModel attribute on the directive. Something like:
<ks-swiper-container ng-model="selectedSlide"......
So you can have in the "selectedSlide" the object that swiper is currently shown into their activeIndex.
Swiper API offers onSlideChangeEnd(swiper) callback. It's possible to use this callback to retrieve current slide object with something like mySwiper.slides[mySwiper.activeIndex] and set this object into ngModel.
I actually would need this feature...
thanks a lot
I'd like an attribute so I can set the nav arrows to "swiper-button-white". I'll try to make a pull request soon.
I have a slider on my page and cannot get autoplay to work even though I have added it to my slider. Is there anything more required to get it working?
<ks-swiper-container speed="2000" autoplay="1000" initial-slide="0" style="border-bottom: 1px solid #ccc!important;" loop="true" show-nav-buttons="true" class="swiper-button-white" slides-per-view="1" space-between="1" pagination-clickable="true" on-ready="onReadySwiper(swiper)">
<ks-swiper-slide class="swiper-slide" ng-repeat="topstory in topstories">
<a ng-href="#/app/topstories/{{topstory.id}}">
<img ng-src="{{topstory.thumbnail_images.td_533x261.url}}" width="100%">
<img src="img/notFound.jpg" ng-if="!topstory.thumbnail">
<h6 style="font-weight: 300;font-size: 18px;letter-spacing: 1pt;top: 139px;text-align: left;position: absolute;display: block;width: 100%;color: #fff;background: #222;padding: 9px 8px 28px 8px;" ng-bind-html="topstory.title"></h6>
</a>
</ks-swiper-slide>
</ks-swiper-container>
when mouse in,how to stop it?
Good day. I am using angular-swiper in an Ionic application. I have noticed that there is an issue when loading images from an external source and then repeating them. The carousel opens with the main image and only starts working as expected when the page resizes? It seems that the slider initialises before the images have loaded. I followed an example that suggests to create a directive:
.directive('imageonload', function ($rootScope) {
return {
restrict: 'A',
link: function(scope, element, attrs) {
element.bind('load', function() {
$rootScope.swiper.updateSlidesSize();
});
}
};
});
however I keep getting 'Uncaught TypeError: Cannot read property 'updateSlidesSize' of undefined' so not too sure how to fix the issue?
Assuming that I'm using ng-repeat="photo in photos" to generate the slides.
After photos changed, the slider became buggy. (i.e. cannot swipe to the next slides)
passing an object scope variable to the 'swiper' attribute doesn't work.
It seems that updating parent scope's variable by setting it to an object in a child scope does not seem to change the parent scope, but rather creates a new variable on the child scope and pass the object to it.
I've looked at the source and modified the related part like this:
swiper = new Swiper($element[0].firstChild, params);
for (var attr in swiper){$scope.swiper[attr] = swiper[attr]}
I see that you are very active on this repo and am sure you would spot this in no time or may have already fixed this while I was figuring out using your old version of code. In any case, hope this thread contributes a bit.
Hi,
Does anybody know how can I modify the template of the bullet?
Is there any way to update the slider with new data after a $http request? I am using ng-repeat to iterate through the data i get from the $http request, however the view doesn't get updated after the initial request.
I'm trying to put the data from $http.get to a slider but in the first load the at pagination dots and the view only the first slide appears I cannot swipe to others, also the data are loaded into DOM but doesn't appear on web. After some time they show up but when I refresh the data still the same result.
<ks-swiper-container autoplay="3000" show-nav-buttons="false" pagination-is-active="true" direction="vertical" swiper="swiper">
<ks-swiper-slide ng-repeat="item in news">
<a href="{{item.url}}">
<img src="{{item.attachments[0].url}}">
<h3 class="slide-Caption"> {{item.title}} </h3>
</a>
</ks-swiper-slide>
</ks-swiper-container>
Hello,
I need to add zoom functionality but how can achieve in angular-1.
I go through this doc.
and
<ks-swiper-container initial-slide="1" **zoom=true** speed="2000" loop="true" show-nav-buttons="true" slides-per-view="1" space-between="5" pagination-clickable="true" on-ready="onReadySwiper(swiper)" >
But still not got.
Please reply
Hi, I am trying to use the set the option preloadImages
to false, it seems not to be working. Watching the debugger I can see all imagens being downloaded.
Has anyone tried to use it?
hi there, trying to use the swiper in my home view with some pictures. the thing is this app uses a side menu. so .. when scrolling the swiper area.. it also pulls the sidemenu..
is there a way to prevent the sidemenu from opening or closing while interacting with the swiper ?
Changing the example to:
<ks-swiper-container initial-slide="3" loop="false" show-nav-buttons="false" slides-per-view="4" space-between="5" pagination-clickable="false">
<ks-swiper-slide class="swiper-slide">
<img ng-src="http://api.randomuser.me/portraits/thumb/men/1.jpg">
</ks-swiper-slide>
<ks-swiper-slide class="swiper-slide">
<img ng-src="http://api.randomuser.me/portraits/thumb/men/2.jpg">
</ks-swiper-slide>
<ks-swiper-slide class="swiper-slide">
<img ng-src="http://api.randomuser.me/portraits/thumb/men/3.jpg">
</ks-swiper-slide>
<ks-swiper-slide class="swiper-slide">
<img ng-src="http://api.randomuser.me/portraits/thumb/men/4.jpg">
</ks-swiper-slide>
<ks-swiper-slide class="swiper-slide">
<img ng-src="http://api.randomuser.me/portraits/thumb/men/5.jpg">
</ks-swiper-slide>
<ks-swiper-slide class="swiper-slide">
<img ng-src="http://api.randomuser.me/portraits/thumb/men/1.jpg">
</ks-swiper-slide>
<ks-swiper-slide class="swiper-slide">
<img ng-src="http://api.randomuser.me/portraits/thumb/men/1.jpg">
</ks-swiper-slide>
<ks-swiper-slide class="swiper-slide">
<img ng-src="http://api.randomuser.me/portraits/thumb/men/1.jpg">
</ks-swiper-slide>
<ks-swiper-slide class="swiper-slide">
<img ng-src="http://api.randomuser.me/portraits/thumb/men/1.jpg">
</ks-swiper-slide>
<ks-swiper-slide class="swiper-slide">
<img ng-src="http://api.randomuser.me/portraits/thumb/men/1.jpg">
</ks-swiper-slide>
</ks-swiper-container>
Only shows one slide
Hello.
We're using ng-animate to fade from the index to the gallery view and when we use an ng-hide statement, Swiper doesn't work. Any idea why that might be happening?
Hi, is posibility or how i can use the parallax example of the official swiper, thanks.
Hi Kapil, I would like to ask you the best way to access the nolimits4web/swiper API directly from an angular controller. Thanks for your attention. Enrico.
I want to add breakpoints
in angular-swiper
, and I use the example of the API and some previous issue. but the code not work Correctly if i use override-parameters
with breakpoints
, different if i use effect cube
it's work correctly. can you give me the demo about how to use breakpoints ? thanks 👍
<div class="myslides" ng-controller="TestCtrl">
<button ng-click="back()" ng-disabled='disabled(0)'>Back</button>
<ks-swiper-container swiper="swiper" slides-per-view="5"
override-parameters="{ 'breakpoints': { '320': { 'slidesPerView': '1' }, '640': { 'slidesPerView': '2' }, '768': { 'slidesPerView': '2' }, '1024': { 'slidesPerView': '3' } }}">
<ks-swiper-slide ng-repeat="s in [1,2,3,4,5,6,7,8,9,10,11,12,13,14]">
<img ng-src="http://api.randomuser.me/portraits/thumb/women/{{s}}.jpg">
</ks-swiper-slide>
</ks-swiper-container>
<button ng-click="next()" ng-disabled=disabled(1)>Next</button>
</div>
Is there any way to override the next and prev functions for the slider and call the next and prev of slider on satisfying the condition from the overridden method else undo the slide event?
Well as the title says, can you add the support for centeredSlides parameter?
How can i add the pagination bullets? currently i am only see the arrows pagination. thanks.
I'm trying to add breakpoints into my slider. I want the slider to have 6 slides per view on desktop but only 2 slides on mobile. If I use the override parameters like this
<ks-swiper-container loop="false" pagination-is-active="false" pagination-clickable="false" show-nav-buttons="false" space-between="0" swiper="swiper" override-parameters="{'breakpoints':'640: {slidesPerView: 2, spaceBetweenSlides: 20 },1200: {slidesPerView: 6}'}">
Swiper.js throws an type error.
TypeError: Cannot use 'in' operator to search for 'max' in 640: {slidesPerView: 2, spaceBetweenSlides: 20 },1200: {slidesPerView: 6} at Object.b.setBreakpoint (swiper.js:300)
I'm guessing the error is a string is getting passed over and it should be an object. Is there a better way to try to accomplish this?
if I have more than one swiper, and I want them to stay in sync, how do I do that?
Hi!
Clear all attribute. I do not change from controller the initialSlide value. Always jump it to the first slide.
<ks-swiper-container on-ready="onReadySwiper(swiper)">
<ks-swiper-slide class="swiper-slide" ng-repeat="todo in todos track by $index">
<div class="imgclass-container">
<img class="imgclass" ng-src="{{todo.pix_url}}">
</div>
</ks-swiper-slide>
</ks-swiper-container>
and controller:
**$scope.n = 3;**
var params = {
slidesPerView: $scope.slidesPerView || 1,
slidesPerColumn: $scope.slidesPerColumn || 1,
spaceBetween: $scope.spaceBetween || 0,
direction: $scope.direction || 'horizontal',
loop: $scope.loop || false,
**initialSlide: $scope.n || 0,**
showNavButtons: true
};
or how to?
When I try to pass slides-per-view param with value "auto" I get the default "1" because there is an "=" on the directive scope param.
https://github.com/ksachdeva/angular-swiper/blob/master/src/angular-swiper.js#L31
The slide can't swip before I resize the browser window.
Once I resize the brwser window, then it can work very well.
Why?
I used angular-swiper in my project, but AutoPlay dosen't work. My code follow:
Please suggest me how i can make it work, thanks!
<ks-swiper-container slides-per-view="1" slides-per-column="1" space-between="0" pagination-is-active="true" pagination-clickable="true" show-nav-buttons="false" loop="true" autoplay="2000" initial-slide="0" direction="horizontal"> <ks-swiper-slide class="swiper-slide" ng-repeat="list in listBean"> <a ng-href="{{list.companyURL}}"> <img ng-src="/{{list.companyImg}}" alt="{{list.companyName}}" class="img-responsive"> </a> </ks-swiper-slide> </ks-swiper-container>
tested in local and in your demo code, autoplay='1000' not working
Hi,
i have a hidden slider that appears on click.
On web version this can be rightly done using observer="true" observe-parents="true", which are available for web apps.
Is it possible have those params also for this plugin?
Thank you and best regards
Is it possible to have both scroll and swiper with touch?
Is it possible to have a scroll with mousewheel if cursor under swiper (disable mousewheel events doesn't help)?
Hello,
Thank you for making this cool directive! I have a problem making the slider responsive. I've had a look at the previous issues, and took this as an example, but it did not seem to work.
This is my code:
<ks-swiper-container override-parameters="{ 'breakpoints': { '320': { 'slidesPerView': '1' }, '640': { 'slidesPerView': '2' }, '768': { 'slidesPerView': '2' }, '1024': { 'slidesPerView': '3' } }}" initial-slide="0" loop="false" show-nav-buttons="true" slides-per-view="3" space-between="50" pagination-hide="true" grab-cursor="true" >
I'm hoping you can help me with a solution.
Hi Guys,
I have used the fix noted in #25
I am calling my data from a server json request using ng-repeat to display in my swiper. I know there is a previous issue using ng-repeat data with swiper, so I used the above fix. Most of the issue now is because I am using slides-per-view to try to create a 3 x 2 tiled effect of the data on screen. If I select 1 slide per view it is fine but when i select more than 1 slide per view the slides load correctly but default to the last slide, making the user then swipe back to the first slide. Once the user selects one of the slides it all works perfectly, this is just a problem on initial load, or reload.
This is my html view:
<ks-swiper-container initial-slide="0" slides-per-view="3" slides-per-column="2" slides-per-group="3" space-between="20" swiper="swiper" on-ready="onReadySwiper(swiper)" pagination-is-active="true" >
<ks-swiper-slide ng-repeat="cat in cats">
<a href="#/juice/{{cat.catid}}">
<img ng-src="{{ cat.imgpath }}" width="363" height="195" alt=""/>
</a>
</ks-swiper-slide>
</ks-swiper-container>
<div class="swiper-pagination"></div>
This is my Controller
angular.module('App.Controller', [])
.controller('CatController', ['$scope', 'categories', function ($scope, categories) {
categories.success(function (data) {
$scope.cats = data;
$scope.onReadySwiper = function (swiper) {
swiper.initObservers();
};
});
}])
I am very new to coding and forum etiquette, so if i haven't put enough information please let me know.
Thanks in advance for any help.
Is it possible to get autoHeight="true" to work (from swiper api: http://idangero.us/swiper/api/#.VuVpepwrLIV)?
Set to true and slider wrapper will adopt its height to the height of the currently active slide
I'm migrating from the https://github.com/revolunet/angular-carousel to Swiper. One nice feature of angular-carousel was the ability to buffer elements in ng-repeat. You can see the demo here: http://blog.revolunet.com/angular-carousel/
The idea is if you have 50 elements in your array, with the butter feature there is going to be only 5 elements in the DOM at any time, not 50. When you navigate to the next element, the buffer updates DOM to include the next elements. Internally it is implemented via ng-repeat filter.
I've tried to replicate the experience with ng-repeat filter, but failed so far. Do you have any guidance how to add support for buffering?
Hi people,
i use the angular-swiper directive in my project.
Here a codesnippet:
<ks-swiper-container class="teaser-slider" swiper="$ctrl.swiper" override-parameters="$ctrl.swiperSettings" pagination-is-active="true">
<ks-swiper-slide class="swiper-slide" ng-repeat="slide in $ctrl.slides track by $index">
<h4>{{slide.headline}}</h4>
<p>{{slide.subheadline}}</p>
</ks-swiper-slide>
</ks-swiper-container>
When I add or remove some slide objects from the $ctrl.slides array in my controller the slider won´t apply the changes.
Whats wrong or how can I fix this?
Thanks for your help!
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.