Thanks for a great script.

I have one question. I am trying to implement 2 swipers on my page. The first one works great but when i try copy the same code for my second swiper it wont work.

The 2 swipers should look the same so i use the same css.

So the html for the slider is the same.

This is my jquery code:

var mySwiper = new Swiper('.swiper-container', {pagination:'.pagination-sd'}, {
speed: 750,
mode: 'horizontal'
})

Here is my code: http://m.vasabladet.fi/new/jm/

How can i accomplish this?

Hello,
When I try to create a new slide, from an Ajax request.

The ajax returns me all the html content of a section (only the contents of the body)

success: function (data) {
vertical.createSlide newSlide = var (data);
newSlide.append ();
vertical.swipeTo (newSlide.index ());

The text is blurred.

searching I found that this is a common problem when using
-webkit-transform: translate3d (0,0,0);
That is why the following line comment
. swiper-slide {
float: left;
/ *-webkit-transform: translate3d (0,0,0) * /

and now the text is displayed normally.

I mention this as something you could consider.

related:
http://code.google.com/p/chromium/issues/detail?id=83475
http://stackoverflow.com/questions/6411361/webkit-based-blurry-distorted-text-post-animation-via-translate3d

Greetings!.

Hope following helps for cross browser support =) Also thanks heaps for new looping support, is great.

firefox doesn't support .outerHTML, polyfill below with others

code for ie8
getTranslate method, append following

 || window.getComputedStyle(el, null).getPropertyValue("transform").replace("translate(", "matrix(1, 0, 0, 1,");

setTransform method

            es.webkitTransform = es.MsTransform = es.msTransform = es.MozTransform = es.OTransform = es.transform = 'translate(' + x + 'px, ' + y + 'px)';
            if (ie8)
                es.filter = 'progid:DXImageTransform.Microsoft.Matrix(Dx=' + x + ',Dy=' + y + ')';

and have the following polyfills

// polyfills
if (!window.addEventListener) {
    if (!window.Element)
        Element = function () { };

    Element.prototype.addEventListener = HTMLDocument.prototype.addEventListener = addEventListener = function (type, listener, useCapture) { this.attachEvent('on' + type, listener); }
    Element.prototype.removeEventListener = HTMLDocument.prototype.removeEventListener = removeEventListener = function (type, listener, useCapture) { this.detachEvent('on' + type, listener); }
}
if (document.body.__defineGetter__) {
    if (HTMLElement) {
        var element = HTMLElement.prototype;
        if (element.__defineGetter__)
            element.__defineGetter__("outerHTML", function () { return new XMLSerializer().serializeToString(this); } );
    }
}
if (!window.getComputedStyle) {
    window.getComputedStyle = function (el, pseudo) {
        this.el = el;
        this.getPropertyValue = function (prop) {
            var re = /(\-([a-z]){1})/g;
            if (prop == 'float') prop = 'styleFloat';
            if (re.test(prop)) {
                prop = prop.replace(re, function () {
                    return arguments[2].toUpperCase();
                });
            }
            return el.currentStyle[prop] ? el.currentStyle[prop] : null;
        }
        return this;
    }
}
var ie8 = (function getInternetExplorerVersion() {
    var rv = -1; // Return value assumes failure.
    if (navigator.appName == 'Microsoft Internet Explorer') {
        var ua = navigator.userAgent;
        var re = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})");
        if (re.exec(ua) != null)
            rv = parseFloat(RegExp.$1);
    }
    return rv != -1 && rv < 9;
})();

Is there any way to Destroy the slider?
I want to add new content to the slider, thought about destroying it and afterwards create it once again.

Any other way to add slides?

I would be nice to be able to use the slider as a carousel. Having options to set the number of items to slide at a time :)

could be nice to have an option to specify for RTL pages or it could even auto recognize it...

Is it possible to use the slider without the swiper class?

I'm trying to implement the slider into a CMS system and the best way to use it for my client would be to have the images within a ul, with each img inside an li.

It isn't really practical to ask them to add a class to each new slide they add.

I have tried adding the class at page load but this is just too slow and all the images are visible until the slider kicks in.

Can you help me to understand what I'm experiencing?

idangerous.swiper-1.5.css
Slider size defined as 100% wide by 260px tall

mypage.html (temp inline styles)
body width matching slider width
.myslide class 300px wide by 148px tall with margins 20 10 20 0

What I get:
slides variable width wide by 240px tall with a 20px margin above (and presumably below), and 10px margin between slides

If I define the slider width & body width as 640px wide instead of 100% I get
213px wide by 240px tall with a 20px margin above (and presumably below), and 10px margin between slides

I'm wondering whether it is possible to make all slides bidirectional and infinite at the same time

Hello
What is the way to make the slider turn right to left
can you help me?
Nice work

When loop mode is active and swipeTo is called after initialization it resets back to 0 index.

imageSwiper = new Swiper('.swiper-container',{ loop: true, simulateTouch: true });
imageSwiper.swipeTo(active); //active is at index 7

This will send it to index 7, however the if( params.loop ) condition is met and the slide is reset to 0 again which trumps the explicit index setting because it executes

setTimeout(function(){
_this.swipeTo(0,0);
},0)

I have

<div class='swiper-slide'>
    <div>Image</div>
    <div>Description</div>
</div>

Following setup for the responsive Swiper, the height no longer works.
If I set height to 100%, then I get whitespace caused by the slides stacking.
Height:auto , same result. It seems that a pixel value is always set, locking the height.
Am I missing an option or css that allows the height to flex?

var newSlide = mySwiper.createSlide(data);
if (mySwiper.slides.length >= 3) {
console.log("before remove : " + mySwiper.activeSlide);
mySwiper.removeSlide(0);
newSlide.append();
console.log("after remove : " + mySwiper.activeSlide);
} else {
newSlide.append();
}

I'm testing to apply your swipe plugin on my mobile board. Everything is perfect, but I have just one problem.
I want to maintain just three sliders for paging. So onSliderChangeEnd event called, I removed the first slider and appended new slider at the end of sliders. Problem is that mySwiper.activeSlide property is still point at the same index(it's next page) after removing the first slider. Do you have any solution for this case.
I really appreciate nice swipe plugin. Thank you :)

There is no touch support that I can see working, swipe only works with the mouse which is not intuitive. Would love to use my touch screen to swipe to the next slide. Internet Explorer 10, Windows 8

Hi,

And thanks for your plugin which is the best i've tried (and I tried a lot of them).

This behavior can be seen when slides are larger than the screen in portrait. I know i can resize them with media queries, but I need the full background for design purpose.

On ipad :

Load slides (1024px width and a centered background) in landscape : it's fine. Turn your device in portrait, still fine, background is centered (btw thanks, not a lot of slider can do this without failing in a way or another).

Load slides (1024px width and a centered background) in portrait : slides are not centered, we can see the left part.

Is it a normal behavior ?
Thanks !

Great work here overall!
Just wondering if you were planning to implement the initialSlide parameter a little more? I see that it works fine with the Slider script on its own, but breaks when used in coordination with the 3D Flow plugin. I get the following JS error on line 75 of the 3D Flow script file:

Uncaught TypeError: Cannot read property 'length' of undefined

Hi, i'm trying to bind a jquery click/tap event on an element inside "swiper-wrapper" but i not had success. I'm trying to use this swiper for make a menu, so i'm trying to bind the event on each item/slide of the swiper. The callback event onTouchStart not satisfies my needs, because on a swiper with "slidesPerSlide" in 2, the callback return the same index for both items as 1 slide.

Hi everyone,

I develop this spyke:
http://edjansantos.com/teste/slider.html

Work fine in all browsers, except Android (Android Native or Chrome).
If you start the aplication and slide the box to right, all right, but, if you slide to down and after to up and slide to right the slider doesn't work anymore.

It happens because I start the scrolling of the page from the swiper container, if I use the margin outside the container to scroll to down or up the app work successfully.

I'm still working to discover this problem, but any help is welcome!

Thank you!

Edjan

I seeing this Swiper is useful. But It's not really good.
I want create next/prev arrow, And scrollCount
ex:
slidesPerSlide : 1 --> scrollCount: 1
slidesPerSlide : 2 --> scrollCount: 2
slidesPerSlide : 3 --> scrollCount: 3
.....
best regards

It might be a general mobile devices bug, but still.
Swiper works only if you have 'focused' it (clicked on it before you scroll it sideways).
For example, if you scroll the page and then try to scroll the swiper, it won't respond, which would seem as if it is broken. But if you tap on it and then scroll, it responds.

Hope there is a way to fix it.
Your swiper is great though, thanks. :D

Why prototype is used for checking the touch and 3D capabilities ?

i new to Jquery. When i read the code, I got to know that u used prototype for testing touch and 3D features.

Does they provide any performance upgrade or can we do that in native jquery ...

With options set as:
var options={
speed : 600,
autoPlay : 5000,
loop : true,
slidesPerSlide : 1
}

The slides auto advance and loop; however, with a set of 3 slides, it advances from slide 1 to slide 3, skipping over slide 2.

I am developing a website and need to use the image slider(that movie one) inside my horizontal slider. Presently, it is not allowing me to do so functions are same. Is there any way around to achieve the same.

This might be a niche case but I needed the option to disable the automatic resizing of the slider on browser resize. I have amended the source, just wondered if you wanted me to fork the project or merge the changes into your release.

Great script by the way, thanks

replace line 449 with this
if (params.mode == 'horizontal') {
_this.setTransform(newPosition, 0, 0)
}
else {
_this.setTransform(0, newPosition, 0)
}

I have no idea why I can't get the slider to start.

Currently, if you drag an element on the swiper and release the mousebutton of the element, the swipe action is not being released. This can be fixed by adding a document mouseoutlistener when drag Starts

Currently the events attached to the DOM elements that the plugin uses are not being released. This could cause memory leaks because the garbage collector is not able to recover the memory while there's still binded events.

Great plugin, thanks for making this available for free.

As title states, end event is not firing. This is verified on the sample /swiper-demos. In js/script.js add the following line to the first demo. "end" logs correctly in Firefox and Chrome, but not in IE.

function slideChangeEnd(){
  console.log("end");
}
$(function(){
  /* Main Slider */
  swiper = new Swiper('.swiper1', {
    pagination : '.pagination1',
    onSlideChangeEnd: slideChangeEnd
  });
});

How make click navigation bullets to swipe next/prev slide?

After using swipeTo, swiper does swipe to the requested slide but the transform coordinates are left (0, 0) so I can't swipe back (I can pull a bit and see that the slide does exist, but the slide jumps back)

I'm using History, to allow slide transitions through the address bar.

Following is the relevant code:

$(window).bind('hashchange', function(event) {
var hash = window.location.hash.slice(1);
var index = $(".swiper-slide").index($("#" + hash));
if (index != swiper.activeSlide) {
swiper.swipeTo(index, 500, false);
}
});

swiper = new Swiper('.swiper-container', {
speed: 250,
freeMode: false,
onSlideChangeEnd: function() {
History.pushState(null, null, "#" + $(".swiper-slide").get(swiper.activeSlide).id);
}
});

Your assistance will be much appreciated.

Thanks,
Ofir

Hello I'm getting a lot of problems on IE 8 with version 1.8, with 1.6 it was ok.
By tte way I made a small change on 1.8 version, I added _this.currentDirection so I can know the direction of the slide [toNext or toPrev].

Bug can be viewed at http://novo4.clinicasaleiro.com, my slides are 100% width.

Any tip?

Best regards

Can you please add a feature to inherit window height?

Hello
First of all, is an excellent plugin!. thank you very much for taking the time to share this plugin!

Designing a website, I had to add support for keyboard and do the following.

/* iniciacion swiper */
var horizontal = $('.horizontal').swiper({
simulateTouch:false, //evita que bloquee el input buscar
speed:1000

  });

var vertical = $('.vertical').swiper({
    mode: "vertical",
    simulateTouch:false, //evita que bloquee el input buscar
    speed:1000

  });

$(document).keydown(function(event) {
    if (event.which === 37) {
        horizontal.swipePrev();
    }
    if (event.which === 40) {
        vertical.swipeNext();
    }
    if (event.which === 39) {
        horizontal.swipeNext(); 
    }
    if (event.which === 38) {
        vertical.swipePrev();
    }
}); 

Works great in all browsers except Google Chrome on Linux.
When I try to go down to a third level vertically, it gets stuck on the second level.

It would be good to have native support for keyboard

Keyboard: true,

Sorry for my English.

Thank you!.

There is an issue with the swipeTo function not updating the internal position properly. This causes the slider to get out of sync when the swipeTo function is called. E.g.

Slider is on slide 1
Use swipeTo to change to slide 3
Click previous button to go to the previous slide and you are returned to slide 1 and not slide 2 as I expected

I have fixed this by adding: _this.positions.current = newPosition;

When dragging with a mouse, if the current slide has a href it will then click through to that link when mouse up. Would love to see a return false; when the mouse has been clicked a dragged to fix this issue.

Thanks

this is mostly a feature request...

*In my case i need to return the current class , or the current id.
they way i am doing it now is by grabbing the active slider id (slider.activeSlide)
then get the active slider $('.swiper-slide:nth-child('+slider.activeSlide+')') and then whatever i need, the id, class, value..

*also there needs to be a way to disable touch. ( never mind, i use onlyExternal:true)

var mySwiper = new Swiper('.swiper-container', {

simulateTouch:true,
onSlideChangeEnd : function() {
    if(mySwiper.activeSlide == 8){
     mySwiper.simulateTouch = false;   
    }else{
      mySwiper.params.simulateTouch = true;  
    }
    }

})

why do not run ? :/

I recently issued a pull request regarding the the swipeTo function.

Whilst the code I submitted fixed the issue with the swipeTo function is breaks the swipeNext function. Can you please investigate this further please as I can't figure out how the two are linked.

For the time being I recommend that you remove the line of code I added.

If you need anymore information just let me know.

Thanks

hello,

thak you for your amazing work.

Is it possible to insert horizontal swiper into slide of vertical swiper and still have ability to swipe this parent vertical swiper. Because when I'm on slide with horizontal navigation i lost vertical vertical touch events.

Is there some way to make work horizontal and vertical events on same slide?

Thank you for your help.

Martin

So I added swiper to my html page and tested in a Chrome browser. Everything went perfect until I tested it in the Android emulator. Any idea why this is not working? What information can I provide you so you can debug it?

If I append new div elements with class swiper-slide on the div with class swiper-wrapper...
the slider does not seem to recognize them, I can not scroll to the new ones.., it stop on the one that was the last one before I appended the new ones..

However.., for some reason, if I just resize the browser window a little bit, the width parameter on the style attribute for the div with class swiper-wrapper gets updated, and then I can slide to the next one..

Any ideas on why this is happening and how to fix it?' Im using an ajax call to get the new data and append the new div elements.., I'm thinking I need to bind an event or something after the ajax call?' I couldn't find anything about this on the documentation..

Thanks a lot!

Hi,
In my app I am loding the slider conent thru ajax.. so I want to destroy to slider when there is no slider content on the page to fix the following error in my browser console..

Uncaught TypeError: Cannot read property 'className' of null swiper.js:858
_this.updatePagination swiper.js:858
_this.updateActiveSlide swiper.js:837
_this.swipeNext swiper.js:698
(anonymous function)

-- I am using the slider like this:

var animationSpeed = 750;
var timeinterval = 5000;

    var projects = $('#projectsSlider').swiper({ 
        speed:animationSpeed, 
        mode:'horizontal',
        autoPlay: timeinterval,
        loop: true,
        pagination: '.projectsPagination',
    });

but when I do projects.distroy(); after the slider content removal from the page, nothing happenes. Please help!

Is there a way to know what the current slide or index is via the api? I'm not seeing anything being set in the dom nor is there anything obvious in the documentation. Let me know if I am missing something.

Paul

Running swiper on Windows Phone 8.
When appending a slide in code, the scrolling behaviour is not updated. So if I start with 1 slide hard-coded in the html and then append another slide in code, the scrolling behaviour still works as though there's only one slide - i.e. I can't scroll to the second slide.

Currently, although IE9 supports 2d transforms, the plugin does not work for this browser. The reason is that the plugin includes MS (notice the uppercase) notation which will be present on IE10. You can provide IE9 basic support by simply adding the additional ms (lowercase) notation to this lines :
Line 564

es.webkitTransform = es.MsTransform = es.msTransform = es.MozTransform = es.OTransform = es.transform = 'translate3d('+x+'px, '+y+'px, '+z+'px)'

Line 567

es.webkitTransform = es.MsTransform = es.msTransform = es.MozTransform = es.OTransform = es.transform = 'translate('+x+'px, '+y+'px)'

Line 574

es.webkitTransitionDuration = es.MsTransitionDuration = es.msTransitionDuration = es.MozTransitionDuration = es.OTransitionDuration = es.transitionDuration = duration/1000+'s'

Line 544

var transformMatrix = window.getComputedStyle(el, null).MozTransform || window.getComputedStyle(el, null).OTransform || window.getComputedStyle(el, null).MsTransform || window.getComputedStyle(el, null).msTransform || window.getComputedStyle(el, null).transform

Line 490

var events = ['webkitTransitionEnd','transitionend', 'oTransitionEnd', 'MSTransitionEnd','msTransitionEnd'];


Hello
I have a Slider 2

$(function(){
    /* Carousel mode: */
    var swiperCar = $('.swiper-car').swiper({
        pagination : '.pagination-car',
        slidesPerSlide : 1
    });
    swiperCar.swipeTo(7);

    var swiperCar = $('.swiper-car2').swiper({
        pagination : '.pagination-car2',
        slidesPerSlide : 3
    });
    swiperCar.swipeTo(7);

})

What is the method to determine the height of each Slider alone, for example,
swiper-car high 100px
swiper-car2 high 300px

This (CSS) determine the height of each slides

/* Specify Swiper's Size: */
.swiper-container, .swiper-slide {
    width: 100%;
    height: 100px;
    text-align: right;
}

This assistance old

#30

Hi folks,

Would be fantastic to have an option to make an image in the div full screen on click. I realize that your swiper is general purpose, but having the image be full screen would make it a most excellent photo gallery.

I've cobbled up my own using this: http://tutorialzine.com/2012/06/quick-tip-fullscreen-backgrounds/ and adding and removing classes, but I still need to figure out how to make it swipeable.

Just a feature request, definitely not a bug report.

Thanks.
Dan

When using the swiper with the first slide having a canvas, the canvas is not displayed when moving to the right, however it works when moving to the left. The slide with the canvas appears blank, touching over it will make it to appear again. Sample code:

  <script>
    function initialize() {
        initializeScroll();
        drawCircle();
    }  
    function drawCircle() {
        var c=document.getElementById("myCanvas");
        var ctx=c.getContext("2d");
        ctx.beginPath();
        ctx.arc(100,75,50,0,2*Math.PI);
        ctx.stroke();
    }   
    function initializeScroll() {
        var swiper = new Swiper('.swiper-container', {
        loop: true});
    }
    document.addEventListener('DOMContentLoaded', initialize, false);
</script>

<div class="swiper-container">
    <div id="swiperWrapper" class="swiper-wrapper">
        <div class="swiper-slide">
            <canvas id="myCanvas" width="320px" height="160px"></canvas>
        </div>
        <div class="swiper-slide">
            <img src=".\images\image1.jpg"/>
        </div>
        <div class="swiper-slide">
            <img src=".\images\image2.jpg"/>
        </div>
    </div>
</div>

Is there a way to change to certain slide when clicking on the corresponding pagination button?
I couldn't find it in the api docs.

If there isn't, I can do it and submit a pull request.