Swiper slides: remove method ? is there any method for removing slides?


#1

Swiper slides: is there a method like swipeout delete to delete a slide between a slider?
so i can detect when start deleting and finishing deleting etc…

this is useful because in my case I use swiper to show cards of preferences places with images in the user profile inside a swiper slider mode horizontal and the user must remove the slides he does not want be part of his favourites anymore…

any method to delete a slide in swiper like swipeout ? in this case after delete the slides must move accordingly to the position available to there is no gap made after deleted…

thanks for any tip!


#2

Hi,
To delete a slide you can use

mySwiper.removeSlide(slideIndex);

I made an example, you will have to adapt the code to your needs, in case you need to delete the slide your own way.
jsfiddle
And here you have the swiper API
http://idangero.us/swiper/api/


#3

Thank you for your help!!!

i saw that for swiper only… but not inside framework7 swiper options!!!

I think swipeout events are mostly the ones I would really will like to be implemented inside framework7!!! I will try that too… check also swipeout the concept i think it will be great for implementing it in framework7 swiper options to have this event for delete slides!!!

:slight_smile:
thank you for your time to help!!! appreciate it a lot! :slight_smile:


#4

Great sample!!! thank you so much for the hard work!!! I saw the sample now i did not see the link previously i do not know why!! oops!! :slight_smile:


#5

it will be nice swiper to have some transitions when hiding / removing the slide like in swipeout events…

:slight_smile:


#6

Hi @rapgithub , i update the jsfiddle to set a transition before the slide is removed
jsfiddle

JS:

swiper.on('click', function(e, s) {
  var el = e.target || e.currentTarget
  var self = this
  el.classList.add('fade-out')
  setTimeout(function(){
  self.update()
	el.remove()
	},1500)
})

CSS:

.fade-out {
    -webkit-transition: opacity 2s ease-in-out;
    -moz-transition: opacity 2s ease-in-out;
    -ms-transition: opacity 2s ease-in-out;
    -o-transition: opacity 2s ease-in-out;
     opacity: 0;
}

#7

Appreciate your time to reply!! big thanks for the new ideas :slight_smile:


#8

seeing your sample again I realized that in my case the update() function does not work when using it with a onclick event not depending on swiper…

in your sample:

swiper.on(‘click’, function(e, s) {
var el = e.target || e.currentTarget
el.remove()
this.update()
})

this gives not error on update. but if you use it like me:

$(’.remove-slide’).on(‘click’, function(indexId) {

$(’.swiper-container [id="’ + (indexId) + ‘"]’).remove();
swiper.update(); // in this case the console gives me an error: update is not a function

});

on click a div with class remove-slide i pass the indexId of the slide to it, after deleted the update gives me the error “update is not a function” very strange…

have you try doing the delete using a class to delete the slide instead of clicking on slide?
:frowning: trying to find the solution …