$("li").remove(); //to all

$("#active").remove(); //to active

I've tested with "left_sided: true" and the "click to slide" doesn't work.

My code:

<script src="jquery-3.0.0.min.js"></script>
<script src="itemslide.min.js"></script>
<script src="jquery.mousewheel.min.js"></script>
<script>
var carousel;

$(document).ready(function () {
    carousel = $(".images");

    carousel.itemslide({
        left_sided: true
    }); //initialize itemslide

    $(window).resize(function () {
        carousel.reload();
    }); //Recalculate width and center positions and sizes when window is resized
});
</script>

Width default "left_sided: false" everything is fine.

Hello there!
Itemslide works great with all devices i've tested except Nokia Lumia 800's IE. Is there any JS workaround to detect wether it is compatible with current device?

Hi

Is there any way to enable pinch to zoom on mobile devices? In my application, my users sometimes want to zoom into an image in the itemslide carousel. I notice that this is not possible. I've tested on Android and iPhone.

Take for example https://itemslide.github.io/ If you try to zoom in, it will not work. Any idea's?

My HTML is

<div id="frame">
            <ul>
                <li>
                    <div class="content"></div>
                </li>
                <li>
                    <div class="content"></div>
                </li>
            </ul>
        </div>

And the Javascript code is:

var carousel;
        $(document).ready(function () {

            carousel = $("#frame ul");

            carousel.itemslide({
                disable_scroll: false,
            }); //initialize itemslide

            $(window).resize(function () {
                carousel.reload();

            }); //Recalculate width and center positions and sizes when window is resized
        });

But no matter what direction I do the double finger swipe, the

'addSlide(data)' does not seem to be working as expected.

1. When a line "carousel.addSlide("TEST");" is added to sliding.js, the
2. element with "TEST" is appended as a child of the last
3. element.
4. An error occurs, and it says that b.reload (carousel.reload in itemslide.js) is not a function.
   Would you be able to take a look ?
   Thank you.

To fast scrolling with wheel, specialy when using trackpad on macOS. You just can't to scroll 1 slide, allways 2 and more.
I propose to look at our solution wheel-indicator. One movement = one slide.

According to the MIT license in your License file, "The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software", but the uglified versions you list for download do not include the notices. Does this mean that I am in violation of the MIT license if I distribute those files as part of my application?

Don't work.
Also demo on site looks bad.

Hi.
I am pretty sure that you need to add "reposition" event.

Explaining why:

At my webapp, by selecting slider item its load content to another window, which has an ifarme inside (youtube video).
1st i tried to use Slider.reload() on window.resize() event
But i met a problem after i opened my video at full screen. It called window.resize() event. And slider did reload, and my ifame with my video just gone.

So i found solution by myself, and hope you add this event, because i like your lib!

let width = 0; this.Slider.find("li").each(function(){ width+= $(this).outerWidth(); }); this.Slider.css("transform", translate3d(($(window).width() - width - this.Slider.find(".itemslide-active").outerWidth())/2 + "px, 0px, 0px)");`

npm release old

Hey there,

if you try to apply the itemslide on a container without any children you get the error:

Uncaught TypeError: Cannot read property 'offsetWidth' of undefined

Patch (check length):

// Stuff to add for compatibility with Zepto
$.fn.outerWidth = function () {
if (this.length) {
var el = $(this)[0];
var width = el.offsetWidth;
var style = getComputedStyle(el);
width += parseInt(style.marginLeft) + parseInt(style.marginRight);
return width;
} else {
return 0;
}
};

P.s: Sorry for not using git correctly :(

change names for "next()" & "previous()" due "next()" has conflict with "jquery.next()"

do somthing like
nextSlide()
prevSlide()

I'm trying to make itemslide work within a vue.js app.
I used npm in order to install itemslider, then with browserify I tried

var itemslide = require("itemslide")

but it didn't work because I don't use/need jQuery.

So i did copy the itemslide.vanilla.min.js inside my app and tried to

var itemslide = require("./itemslide.vanilla.min.js")

but it failed because itemslide is not a function.

I tried

global.itemslide = require("./itemslide.vanilla.min.js")

and

module.exports = require("./itemslide.vanilla.min.js")

but none works.

Did I miss somethnig ? Is there any clue on using vanilla itemslide and browserify ?

The demo on your site works like a charm. The files downloaded from GitHub are not working. I will let you know if I can figure anything out.

Is there anyone who uses prev and next buttons in itemslide.js?

Need help.

Each of my li tag item has variable height(more than window height). So using overflow: scroll. And it works fine in browser. But when i emulate , the vertical scroll touch is not listened by the plugin.

The plugin overwrites jQuery's outerWidth function and does so without replicating all its functionality. Which is bad. Real bad. The code has to check the existence of the function:

// Stuff to add for compatibility with Zepto
if (!$.fn.outerWidth) {
    $.fn.outerWidth = function () {
        if($(this)[0] instanceof Element){
            var el = $(this)[0];
            var width = el.offsetWidth;
            var style = getComputedStyle(el);

            width += parseInt(style.marginLeft) + parseInt(style.marginRight);
            return width;
        }
    };
}

When installing with bower, wrong version is downloaded!

Bower downloads the state of Apr 30 2015
https://github.com/itemslide/itemslide.github.io/tree/442dcfb9528bb832891e795e404e92bb2f49a138

What is the best way to implement multiple instances of itemslide on the same page? Currently all instances scroll together, they need to scroll individually.

My current initialization:

var carousel;
carousel = jQuery(".post-image-container ul");
carousel.itemslide();

In a lot of circumstances id=active is not ideal. The most simplest case as having multiple sliders on the page: 2 DOM-elements end up getting id=active which is not compliant.

What about a way to overwrite this behavior, or (and this may work well enough) generate some id's and keep a list of those generated. I.e.: itemslide-1, itemslide-2. etc.

Thanks for a superb carousel. I revisited the docs and determined that to re-set the default active slide I have to add "start: '2', ( or whatever the slide number is, counting from 0). This is not working as expected- dunno if I did something wrong. The advantage of being able to set an altered view is that the visitor likely will end up swiping in both directions and hopefully, linger longer. Thanks for any pointers about how this can be done. My settings:

I found that transitions between elements doesn't work as spected on Internet Explorer Windows Phone.
Nokia Lumia. Lumia Denim 8130.71

I am using this in an hybrid mobile Application. When converted into corresponding native app, It works a bit ok in top end mobile such as nexus and all. But When it comes to a bit normal mobile, the transition is very slow. The feel of touch looks clumsy. Can you please suggest some ways where transition does not slow. I am really in need of this.(duration is already set 25ms)

pan event , changeActiveIndex event is not triggered.
And changePos event is triggered infinitely.
Can u fix soon.

Hi There,
I tried this but seems not working with multiple slider.

Thanks,
Kiran Gopal

Would it be possible to loop slides as a continuous carousel?

I was wondering if someone know how to make the first item stick to the left instead of the middle when selected (same for the right). I found a way to do it but it cut the velocity to 0 when the animation reach the limit.

Thank you.

Currently, the CSS class is set when the movement is done.
I need a CSS class which is updated while dragging so the user can adjust the exact position before releasing his finger. This might be another CSS class like .itemslide-currently-active if you wish to.

Hi,

I would like to totally destroy() the slider (I only use the slider on a specific screen-size), to avoid issue on screen resize. I would like to destroy the slider, and reinit it on a other breakpoint.

But I don't found any .destroy() method?

Any idea ? Plan to implement one ?

Thanks.

The docs says that the needed base css is this one :

ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    position: absolute;
    -webkit-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

li {
    float: left;
}

Meanwhile this line https://github.com/itemslide/itemslide.github.io/blob/master/src/itemslide.js#L81, says otherwise.
You actually need to put at least left: 0; in your css otherwise initialLeft is NaN (because the default css value is auto) and therefore every calculation fails afterwards.

Took me a while to figure this one out, if you could update the doc to prevent somebody else running in the same issue it would be great :)

I have a mains scripts managing my javascript, using the jQuery.noConflict() to make sure there is no conflict with any other librairies loaded (and I don't have the total hand on which libraries are loaded).

When I initialize itemslider it throw this error

Uncaught TypeError: Cannot read property 'extend' of undefined

There is an example of my code.

var noConflictjQuery = jQuery.noConflict();
(function ($) {
    $(function () {
       'use strict';

       var carousel = $("#categoryFilterList");
       carousel.itemslide();
    });
})(noConflictjQuery);

If I remove the var jQuery.noConflict(); everything work's, but I can't really afford that. Any idea ?

Sometimes this limitations complicate development. Maybe just root and .children() matching?
I think the semantics are not necessarily the slider must be a list.

e.g. my builder builded so:

$(function(){
    $('.slider').itemslide();
});
...
$(function(){
   $.fn.itemslide = function(){
    ///...
   }
});

And i get error itemslide is not a function. So itemslide requires to be included before all, which is not always feasible. The above example actually happened to me. I think plugin users should make a decision about how to initialize itself. You don't think so?

It works only in one direction.
Tested in Lumia 532, WP8.1

Hi, I'm working on a project in which I have several itemslides on a page. Right now, I've been working with this workaround, but it's giving me some issues:

var carousel_1;
var carousel_2;
$(document).ready(function() {
    $('.outfit a').on('click',function(e) {
        e.preventDefault();
        $(this).toggleClass('liked');
    });


    carousel_1 = $("#outfit_1");
    carousel_1.itemslide();
    carousel_2 = $("#outfit_2");
    carousel_2.itemslide();
});
$(window).resize(function () {
    carousel_1.reload();
    carousel_2.reload();
});

The problem is that the second carousel is causing the page to be very wide, which just scrolls the whole page on iPhone4.

See a demo here:
http://beta.jackie-lee.com/mcgregor/during.html

Do you have any suggestions for multiple carousels on one page?

Hi,
I have installed this plugin with bower, but I found that there isn't left_sided option in the code.
Thnx
J.

Hi

I'd like to include an event on tapping / clicking on a slide.
In my setup, I have a list of images that I'd love to enlarge upon click.

As of now, swiping also triggers the onclick event, so I have to include another button, which complicates things.
You can see an example here: http://beta.jackie-lee.com/mcgregor/during.html

Is there any way to programmatically find the difference between swipe and click?
Thanks in advance for your remarks. Everything works very nicely I might add.

The smallest of movements on a macbook touchpad swipes 2 or more slides at a time. A debounce should fix this so it only reacts to every x events fired.

IPhone 4 doesn't work (as advertized on the home page).
Using Safary on stock iOS 5.1
No errors in debug console, but the slide container is empty.
Maybe it's better to say smth like "works on Mobile Safary 7+", than ambiguous "iPhone 4".

See the bug in action:
http://codepen.io/szegheo/pen/RadbRe?editors=1111

Scripts, html, css are the same versions that you use on your demo page (http://itemslide.github.io/index.html)

However typing this code to the console on your demo page it works as excepted.

$("ul").on('changePos', function(e) { console.log(e.timeStamp) });

strange...

when I scroll with touchpad or scroll wheel i does not work

Hey guys, I want to install in plugin like a bower component.

Please, add this feature!

Because of the tanslate3d, text is very blurry. Isn't it possible to translateX and translateY to avoid this?

HTML:

Javascript:

$(document).ready(function () {

$("#blogslide ul").itemslide({
    one_item: true //Set this for proper full screen navigation
}); //initialize itemslide

$(window).resize(function () {
    $("#blogslide ul").reload();

}); //Recalculate width and center positions and sizes when window is resized

$('#blogslide a').click(function(e){
        e.preventDefault();
        console.log("this is the click");
    });

});

Test Link 1 is working.
Test Link 2 is not working and MouseOver, Click event is not fired

Jquery version: 1.11.2

It would be great to have the option of setting the width of each panel to be the width of a container (e.g.: the parent of ul) . This would allow a single panel to always show completely filling said container.

The items will clamp to the half width if the outer container contains (in the visible part) an even number of elements. If its uneven it works perfect.

Did anybody encounter this problem before?

When the first item with small width, slide will display strange

HTML:

<div class="itemSlider">
    <ul>
        <li style="width:299px;height:500px;background:#000;"></li>
        <li style="width:599px;height:500px;background:#F00;"></li>
        <li style="width:499px;height:500px;background:#0F0;"></li>
        <li style="width:699px;height:500px;background:#00F;"></li>
    </ul>
</div>

JS:
itemSlider.itemslide({ disable_clicktoslide:true, left_sided:true, disable_scroll:true });
result :

If im adding slides (because i have to load them...) they dont have the events for dragging...

The relead function didnt update the events at all.

Sorry i'm not able to make a nice fix for this. I had to patch it very hard in your code :/