Swiper: How to make "mySwiper.swipePrev()" & "mySwiper.swipeNext()" to goto slide which is not visible?

[sackIndian]

I have a problem,

Kindly look here for my codes:

https://github.com/sackIndian/swiper-problem3

(set your browser width to: 900px or less)

For the first swiper:
if i press on next button it should pull all "swiper-slide-visible" slides and stop at next slide which does not have "swiper-slide-visible" class?

How can i implement this? Any idea.

At second swiper:
I have added all my contents inside a single slide to achieve this, but how can i make "swiper-slide" to set(get content width) according to its content width?

Confused iff have any direct solution?

[nolimits4web]

For the first swiper:

$('.next').click(function(){
  var index = $('.swiper-container .swiper-slide-visible').eq(0).index();
  mySwiper.swipeTo(index);
})

For second swiper just set its wrapper default width high as possibe:

.swiper-container2 .swiper-wrapper {
  width:20000px;
}

[sackIndian]

Hi @nolimits4web , thanks for the idea.

For the first swiper:
I think we need to make few changes to your code to make it work perfectly:

For next click,

var lengthOf = $('.swiper-container .swiper-slide-visible').length;
var index = $('.swiper-container .swiper-slide-visible').eq(lengthOf-1).index(); 
mySwiper.swipeTo(index+1);

And for prev click,

var xWrapperTrans = (mySwiper.getWrapperTranslate("x"))
var widthOfContainer = $(".swiper-container > .swiper-wrapper").css("width").slice(0, -2);
var visibleAreaWidth = ($(".swiper-container").width()); //total area
var xposition = ((xWrapperTrans+visibleAreaWidth)<=0)?(xWrapperTrans+visibleAreaWidth):0;

mySwiper.setWrapperTranslate(xposition,0,0);

Will there be any improved solution you would like to mention.

[sackIndian]

.swiper-container2 .swiper-wrapper {
width:20000px;
}

is solved my second problem.