thiagosf / skitter Goto Github PK

Hi, are there any event handlers available for Skitter ?
I'd like to call a function after a slide is loaded for example.

this slideshow is best ever i get with lot of settings but i just miss one thing and thats responsiveness.

hope you can implement it asap

Thanks

Hi,

This is an amazing slider. Awesome effects.

Can you kindly guide me what code should I use if I only wish to use fixed settings on my website?
As in only HTML, Numbers, HideTools. Like on the top of a website as a slider with no options for user to change this.

Thank you for your consideration.

Cheers,
Hariharan

Hello,
I need to refresh skitter content when i change my mobile orientation to change under or side position.
Thanks

Hi,

thanks for the beautiful plugin. I am trying to achieve the sider with 100% width (not the fullscreen mode). Can I somehow how achieve it?

Enhancement request:

Image lazy loading.

Hi!

Adding bower.json could increase audience and make instalation easier.

Hi, a question,
It's possible to display Skitter slideshow with full width like Bootstrap carousel?
Thanks

Thanks. I tried this today loading many images. If any one image is not available this simply shows error message instead of continuing with subsequent images. Is there any perfect workaround?

Though not perfect i believe, i changed few things in the files jquery.skitter.min.js and jquery.skitter.js for now.

simply commented 2 lines inside error(function () {

//self.box_skitter.find('.loading, .image_loading, .image_number, .next_button, .prev_button').remove();
//self.box_skitter.html('

Error loading images. One or more images were not found.

Then added these 2 lines under above lines
self.nextImage();
return true;

I hope you will provide the right workaround for this.

Well, Skitter Slider is fine working in my CMS as plugin with content template "imagespecial".
But I think the JS-library has a little bug in first thumbnail control. (See line 288 and more)
I have activated these control.
Only the first thumbnail remains in an active mode by start of this script. When I hover on this first place with my mouse then going this thumbnail in a normaly modus.
Who can confirm that?

You can se this of my Testsite: http://www.franx.aero/leistungen-4.html

And at second: The thumbnial line under the slider does not roll over, when I use many more thumbs/ picture for slider. Only, when I put my mouse over will the thumb line it works correct

is it possible to replace it with on() or bind()?
thanks

Using Skitter in Safari I'm getting the error mentioned above.

Elements, such as .label_skitter, seem to be measured using .width(); this does not allow for alternative styling that changes measurements, such as padding and margin. Changing any width and height measurements to .outerWidth() and .outerHeight() would make this great slider more versatile and customizable.

Hello,

I was wondering if there is a way to programmatically stop the slider? Is there a function or settings that can be called?

I have tried to control changing of the slides by interval and using:
$('.skitter-large').skitter('next')
Apparently this starts the slider in auto-play mode again.

If starting it in autoplay mode is there an option to stop at the last image (not make it infinite or loop around on itself)?

Thank you.

Not sure if this is a bug or not but when I have the parameters set as follows, and I set hideTools to true, the thumbs do not show, only a black strip. If I set to false or remove hideTools: true, they show as they should.

$(function(){
    $('.box_skitter_large').skitter({
        velocity: 1,
        thumbs: true,
        interval: 3000,
        label: true, 
        numbers: false, 
        navigation: true,
        easing_default: 'easeOutBack',
        animateNumberOut: {backgroundColor:'#000', color:'#ccc'},
        animateNumberOver: {backgroundColor:'#000', color:'#ccc'},
        animateNumberActive: {backgroundColor:'#000', color:'#ccc'},
        fullscreen: false,
        hideTools: true,
        dots: false,
        width_label: '800px',
        xml: false,
        show_randomly: false
        });
});

Mike

If one centers the slideshow on a page ( gives it a width and margin-right and margin-left of auto) instead of having it float:left, the Dots with preview thumbnails are offset too far to the left. Many people want to center a slideshow on a page rather than float:left so this could be an issue.
I'm guessing this is due to the absolute positioning to the preview images? Any way to fix this with css?

Mike

I have a problem，The display is out of place

This is a demo：https://4a8aae90.webpack4-x.pages.dev/

in "http://skitter-slider.net/options.html"
it is mentioned that "navigation default" is "true" actually it is "false"
you can check it "skitter-master/dist/"
through the minify file "jquery.skitter.min.js"
or the original one "jquery.skitter.js" in line 45
" // Navigation display
navigation: false, "

The anchor tags doesn't work with the transition circles.

Visit http://skitter-slider.net/ and select on the left side the "circles" animation.

Try to click in the image, the link doesn't work.

I encountered an issue while working on my Angular application. When trying to resolve the 'node_modules/skitter-slider/dist/jquery.easing.1.3.js' module, I received an error message indicating that it couldn’t be resolved. This issue is preventing my application from building successfully.

Additional Information:

Angular CLI: 15.2.11
Node: 20.12.1

Is it possible to show pure DIV as slide without image?

forgive me if this isn't an appropriate place to ask, but i couldn't figure out where better...

i've been using Skitter for a few years now & love it. even had to figure out a hack/modification (http://stackoverflow.com/a/12029810/1247334) a while back that somebody helped me with; and it has worked great - until now.

so this post has a few questions...

1. with regards to the above mentioned mod, the replace...
   this.settings.images_links[initialIndex][1].replace("[initial]", "");
   ...isn't working anymore. any ideas why?

2. more than that tho, if you can provide a better way to indicate this "initial" rather than putting it in the "href", that'd be awesome. would prefer it in a "class" or something that wouldn't interfere with anything else.

3. and speaking of interfere, i see that in the later versions we can now remove the href altogether & just have the img (yay!). EXCEPT, then that doesn't work for this "initial" mod.

4. also, i find that i'm in the need now to add a video and a lightbox to the slider and can't get anything to work...
   4a) ideally, it'd be great to be able to embed the video (youtube, vimeo, iframe, custom, etc) directly in a slide, and have the rotation playback pause when the video is playing. but i recognize that may be too much to ask for. so...
   4b) if we can just somehow tie in a lightbox/modal on click, that would solve that plus other link-type issues/needs. i've tried several lightboxes and can't get them both to work. either one works or the other, but not when the lightbox is in the skitter. my latest attempt is with Featherlight (https://github.com/noelboss/featherlight); & again, it works on its own outside of the box_skitter div, but once i put its trigger (data-featherlight="#") in the href, it doesn't work.
   and i'm wondering if that's just because of the "initial" mod from above or not. i dunno.

so any guidance would be greatly appreciated. thanks!

"sprite-round" (no file extension) exists in a couple of places in the repository. "sprite-round.png" also exists.
I think "sprite-round" was saved in error then added to the repository.

Dear Friend
i would like to know that i want to comment on images over the arrow on slider but i am unable to get any slider from any sources ...so plz if any having idea please share with me in my Email Id= [email protected].................

Hi thiagosf,

When I declare Skitter like this :

$('.box_skitter_large').skitter({
    animation: 'fade',
    interval: 4000,
    velocity: 0.5,
    numbers: false,
});

On Firefox 5 and Internet Explorer 9, when I click on the "next" or "previous" arrows in skitter, I get a Javascript error, and the slide doesn't change. Also autoplay doesn't work.

Here's the error log :

Unable to get value of the property '0': object is null or undefined 
jquery.animate-colors-min.js, line 7 character 219

This error does not occur when I declare Skitter with thumbs, for example :

$('.box_skitter_large').skitter({
    animation: 'fade',
    interval: 4000,
    velocity: 0.5,
    numbers: false,
    thumbs: true    
});

Any idea where that could come from ?

@thiagosf how's it going?
Your plugin is awesome and I'm even considering to help with some money :-) Do you accept donations, patreon, etc?

I'd like to ask two questions:

1. Is there any option to show the dots links over the image, instead of below from it? Or, if I'm able to change that by some CSS?

2. I was looking at the full transition list and unfortunately I couldn't find a simple transition like the Bootstrap carousel:
   https://getbootstrap.com/docs/4.0/components/carousel/
   In other words, I'd like to just pull/push the image from left to right (or right to left) without any aditional effects :-)

I was trying to modify skitter.styles.css to add rounded corners to the slide show. If you add a border radius to .box_skitter .image img, the border works on the first image and then the corners are square again. The corners round again just before switching to the next image. Is there a way to apply the border radius to the images?

Also, I get a border on my images in IE that shows because of the link. I cannot figure out how to get rid of it.

Thanks.

jquery: 1.11.3
jquery-easing: 1.3.2
version： 5.1.4

The mobile side clicks the left arrow should be the previous one, but the actual situation is to jump to the next picture.

Hi Thiagosf,

I see on the skitter website :

08/09/2011

• New animations: circles, circlesInside and circlesRotate
• Callback onLoad: calling a user-defined function to load images
• Added rotate-scale plugin: to the effect of rotation

But when I download the github source there doesn't seem to be any changes in the code :

@Version 3.2
@Date August 04, 2010

Is the updated version not released yet ?

REALLY need help with these 2 issues:

1) randomized except constant start...

> http://stackoverflow.com/q/29480606

and

2) adding a video &/or lightbox...

> http://stackoverflow.com/q/29499496

@thiagosf - it's very important - PLEASE help.

Images within the label are omitted because of a CSS instruction. 👌

As I'm watching the Network panel in Chrome Dev Tools, it seems the plugin loads the image each time it is displayed, not just once. Am I right ? If yes, any way to fix this ? (or maybe add a caching option ...)

and that causes an issue in Chrome browser that when we change to next or prev images the images gets fluctuated means if i click next image then it shows the prev image from current then the next one.

this issue is in chrome only working fine in IE and Firefox.

need help ASAP

The slideshow script doesn't work properly with jQuery 1.8.0.

Could you please make this package available on npm please?

Hi. My skitter slideshow just stopped working. www.blackbirdphotography.co.za.

I have no clue why this happened?

Thanks

Francois

support jquery 3 please

when i use variable image src in vue2.0, it cames an error

i cant resize the images width and height i cant rewrite the css it dosen't work so pls tell me how do i change the image width and size i just went to make ti the width of the image 100% and the height 520px. so pls help me with that

Jquery throws a TypeError "t.browser is undefined" when clicking on the penultimate button in the demo page.

Browsers

• Firefox 30 (TypeError)
• Chrome (35.0.1916.153 m): Uncaught TypeError: Cannot read property 'mozilla' of undefined

Hi,
When I tried to set the animation of "circles" and "hideBars", I can see that image links donot work. In other words, when I click on the image, it does not redirect me to the target link.
However, other animations can still work properly, so I am wondering if this is a bug?
And could you please show me how to make it work for animation "circles" and "hideBars"?