Swiper: how to stop swiper change the width of the swiper-slide?

[calidion]

i have style the swiper-slide to my need.

but after i inited the swiper, the swiper-slide's width is changed.

to the following.

how can i avoid width changes in swiper?

[nolimits4web]

enable slidesPerView:'auto' parameter

[calidion]

thanks, but it doesn't work for me.

I need all the features:

var mySwiper = new Swiper('.swiper-container',{
cssWidthAndHeight: true,
slidesPerView: 4,
visibilityFullFit: true,
autoResize: false,
loop: true
});

if i add

slidesPerView:'auto'

it can not loop and unable to swipe

[nolimits4web]

But if you set slidesPerView:4, its width always will be slider width / 4. To make loop work with "auto" mode use also loopedSlides parameter

[calidion]

thanks, i tried this
var mySwiper = new Swiper('.swiper-container',{
cssWidthAndHeight: true,
slidesPerView: 'auto',
visibilityFullFit: true,
autoResize: false,
loopedSlides: 4
});

and it doesn't work.

don't know if i use correctly.

[nolimits4web]

Look here, maybe it will help http://jsfiddle.net/EPUBw/1/

[calidion]

thanks.
but it seems they have many differences.
i can make it run, but it can't run as the following code do.

var mySwiper = new Swiper('.swiper-container',{
cssWidthAndHeight: true,
slidesPerView: 4,
visibilityFullFit: true,
autoResize: false,
loop: true
});

maybe i just need the ability to set the width of the swiper-slide node.

[nolimits4web]

With this code it will not run. Try to disable cssWidthAndHeight and set slidesPerView should be 'auto'. With fixed slides per view you will never get required slide width. And try to set big loopedSlides value, for example 10 or more

[calidion]

thanks, with this code:
var mySwiper = new Swiper('.swiper-container', {
slidesPerView : 'auto',
initialSlide : 2,
loop : true,
loopedSlides : 20,
});

it is working ,but still unable to loop

[nolimits4web]

Could you make a JSFiddle so i can take a look?

[calidion]

very strange...
JSFiddle works very well.

[calidion]

JSFiddle:

http://jsfiddle.net/renwx/7GNdr/

[calidion]

the only difference is that i must include the scripts from web. instead of the file

working way:

       <script type='text/javascript'
        src='http://code.jquery.com/jquery-1.10.1.js'></script>
        <script type='text/javascript'
        src="http://www.idangero.us/sliders/swiper/js/idangerous.swiper.js"></script>

not working:

  <script src="../../../js/libs/jquery-1.10.1.min.js"></script>
  <script src="../../../js/libs/idangerous.swiper-2.1.min.js"></script>

[nolimits4web]

Don't include scripts from our site, they may change in any moment!
As i see you are trying to include version 2.1, use latest version

[calidion]

i don't know why should swiper set new width to swiper-slide?
style="width: 297.5px; height: 160px;"

[nolimits4web]

If you don't need it, you can set slidesPerView:'auto' or CSSWidthAndHeight: true

[MoAsmar]

Hi guys, I have read this beautiful conversation and thanks to both of you I was able to solve the issue with swiper slide width using swiper API in SharePoint 2013, but still have a problem with making the swiper slide automatically; after adding slidesPerView:'auto', visibilityFullFit: true, & autoResize: false, it stopped.

I'm using this js code:

var swiper = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination',
        paginationClickable: true,
        spaceBetween: 0,
        autoplay: 4500,
        autoplayDisableOnInteraction: true,
        speed: 1400,
        slidesPerView:'auto',
        visibilityFullFit: true,
        autoResize: false,
        initialSlide : 2,
        loop : true,
        loopedSlides : 20,
});

for width issue I have added width inline on the div with class="swiper-slider";

<div class="swiper-slide" style="width: 1349px!important;background-image:url('/Style Library/images/slider.png')">

this is the first time I use swiper API and it seams that it add styles to the html using jquery because there is transform:translate(3d) whish I cannot control in being rendered on div with class="swiper-wrapper" on top of "swiper-slide".

I hope we can find a better solution.
Thanks

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.