Hello,

Im working on a wordpress website template which included a coda-slider.I was wondering on how I can add an effect on it.Like fade in and fade out.Here is the site http://plasticpallettechnology.com/ and the code at the wordpress for the coda slider is <script type="text/javascript">
var $j = jQuery.noConflict();
$j().ready(function() {
$j('#coda-slider-1').codaSlider({
autoSlide: ,
autoSlideInterval: ,
dynamicTabs: ,
dynamicArrows: ,
slideEaseDuration: ,
firstPanelToLoad:
});
});

Can you please help me how..??

Thank you...

I'm a bit confused by the included style.css. Why does it include the entire HTML5 boilerplate. If I'm using Twitter Bootstrap, I don't want to include H5BP twice. If this is a plugin, why all the dependencies in style.css? Also, it's totally cool that you're using SASS and I'm using LESS, but if your style.css was just a modular include that showed us only the styles that are dependencies of the plugin, then it would be a huge help and I could just throw the required styles for the plugin into my Bootstrap / LESS include. If you drop SASS then there would be no need for a SASS vs. LESS fork which I would create and maintain but would be a support nightmare since there should be no pre-processor dependency to begin with.

I want to fadeOut and fadeIn with Code Slider, is it possible and how ??

Hi,

First sorry for my bad english, i have update codaslider 2 to 3, but since i have a big problem with and i don't know a lot about php and css language.

I have install it on wordpress and i don't know how to do...

How can i resolve that problem (see this link: http://www.fal63.org) to have my slider working fine again please? can you explain me what file i have to modify and what i have to modifiy exactly to stop having what you can see (loading...) and have the slide working again when i click on second slide please?

I really hope that you can help me because i am really in need...

Hi Kevin,

Great work.

I have a feature request that I actually tweaked it myself for the first project I'm trying to use it, and wanted to share this over here.

All my slides are images, and the tabs nav, I would have liked to be alternate text from the images themselves....

So I've introduced a new parameter which can be called something like "panelTitleValue" with null default value.

In this case I use your default code....take the value from the specified selector object).

But if I specify something else in instance config (alt for instance) I take the attribute value of the specified selector object from your already existing "panelTitleSelector" parameter.

Regards,
Razvan

Hi.

I use this slider because its straight to the point and easy to use. However, I'm having a little problem:

So I have two slides and they are working fine but not until I activated autoslide where after it goes back to the first slide, the first slide will not be shown for about a second. In other words, after the second slide is shown and will go back to the 1st, it will show an empty slide and then pops out after a second.

What I have in mind is that it will just rotate from right and then left like a pingpong (like when you press the button) but this thing will go only on the right direction and make the first slide invisible for a while on the next loop.

Please see the site here:
http://graceandmark.us/

and navigate to "THE PARTY"

and you'll see how it has problems. On the section "ABOUT", I use the same thing but this one doesn't have the autoslide so it doesn't have the problem.

Here is my init code:

jQuery(function(){
  /* Here is the slider using default settings */
  // $('#slider-id').codaSlider();
   // If you want to adjust the settings, you set an option as follows:

      $('#party-slide').codaSlider({
        dynamicArrows: false,
        autoSlide:true,
        autoHeight:false
      });

});

Thanks!

Hi @KevinBatdorf ,
We are cdnjs team, we're going to host this library.
The git auto-updater in cdnjs relies on git tags so that it can recognize the correct version and automatically update the repo.
Could you please add git tags for the repo? Thank you.

cdnjs/cdnjs#10571

Hi there, we have an issue on our website www.gigster.co.za (using coda slider across the site) which the web designer can't seem to figure out. Basically the sliders work perfectly when first opening the site, but then if the user goers to a different tab or changes windows, and return to our site, the sliders go haywire and speed up to about 2 slides per second.

Can anyone help / advise?

Hello.
Would you like to add fade out / fade in, option as alternative to slide ?
It seems that this is an option, for which many people over the net are asking for.

Hi,
i have included codaslider at 3 places on the same page.
all sliders have different ids like slider-id1 ..id2 ..id3
wheren i init. the sliders i get 3 panels instead of 1.
or 6 instead of 4 etc
in the first example the other 2 new panels are clones of panel 1.
e.g. i get 3

Hi,

Your slider seems to be the only slider that fits what I need. However, when I put it inside Base Framework http://matthewhartman.github.com/base/ which I use to build responsive website, it seems to doesn't work.

Base uses jquery 1.8.2 and Coda Slider uses 1.7.. Will there be any problems if I use 1.8.2 in Coda? Or any other versions higher than 1.7? And what can be the problem to the Coda slider when attached to the Base framework?

Thanks for the help.

On your site: http://kevinbatdorf.github.com/codaslider/

On the "Installation", you list your code as:

</script>
  $().ready(function() {
    $('#slider-id').codaSlider();
});
</script> 

where the first line should be:

<script>

Also, under "dynamicArrows" and "dynamicArrowsGraphical", you have "arrows" misspelled as "aarows".

I love the slider!

im trying to change the active tab using javascript event which will call the following :

function navigateToTab(targetTab) {
$('.coda-nav').tabs({ selected: targetTab });
}

however this function is doing something which is blinking the tabs div put never navigating to the desired tab will you please help

Regards

I added a video to the first panel using the format below. I'm using the slider with autoHeight and after navigating to the next panel the layout breaks. Works fine in FF 13.0.1 but not in Chrome Version 20.0.1132.47.

`

Hi,

seems your slider have a little issue with autoheight in Safari? When the Page loads, the first panel is cutted at the bottom... Only when i click next panel it works fine. Any solution for that problem?

good day sir!!

ive found your liquid slider fascinating so i tried to use it on my current web project on my pc am using IE 10 and jquery 1.11.0

it works great just some minor problem when i try to view it on IE 8 or 9 it invokes an error at

$(function(){
$('#main-slider').liquidSlider();
});

btw keep it up..great slider

Hi,

I'm trying to put a slider in the middle of the page, and have it take 80% of the window width.

#container {
    position: fixed;
    top: 20%;
    left: 10%;
    width: 80%;
    height: 70%;
}

.coda-slider-wrapper {
    padding: 0px;
}

#showcase-wrapper #showcase {
    padding: 0px;
    width: 100%;
}

#showcase-wrapper #showcase .panel {
    position: relative;
    width: 100%; /* PROBLEM HERE */
}

But this doesn't work, since the panel itself is inside the panel-container.
I'm new to CSS and JS, how can I achieve what I want?

Hey Kevin,

Great work,

I have one problem, i try link one tab (#3) inside tab (#1), but dosen't works.
Link change, but slider still on the tab (#1).

Do you know how fix, this?

Sorry for bad english.

Greetings from Brazil.

I've got Coda Slider successfully implemented on a site I'm building, except that for some reason the slider ignores the first panel and treats the second as the first in the series. I can fix it by duplicating the first panel, but obviously that's not ideal. Right now I'm in local development or I'd give a link, but here are some details about my build:

I'm using these settings for the slider:
autoHeight: false,
firstPanelToLoad:1,
hashLinking: true,
dynamicTabs: false,
dynamicArrows: false,
slideEaseDuration: 500

I'm using the slider in a WP custom theme template that loads a series of seven posts within a WP loop. I did copy the outputted static html source into a separate page to test to make sure the dynamic nature of the loop wasn't at fault. The static html had the same issue of ignoring the first panel.

Any idea what's happening to that first panel?

I have an html slider for which I'd want the first panel to be a photo slider.

The code looks like this:

<div id="mainslider" class="coda-slider">
    <div>
        <h2 class="panel-title>Photoset</h2>
        <div id="photoslider" class="code-slider">
            <div>
                <span class="photo-title>photo 1</span>
                <img src=pic1.jpg"/>
            </div>
            <div>
                <span class="photo-title>photo 2</span>
                <img src=pic2.jpg"/>
            </div>
        </div>
    </div>
    <div>
        <h2 class="panel-title>Panel 2</h2>
        <div>
            <p> Some content ... </p>
        </div>
    </div>
</div>

If I set both #mainslider and #photoslider to continuous: true, the panels ofor #photoslider are repeated twice, resulting in the slider showing 4 panels instead of 2.

I suppose this is a problem with the panel cloning but couldn't find how to fix it :-(

Hi there - Coda slider 2 worked fine with our asp.net controls and we could add as many as we wished with no problems, dropdowns and button clicks worked as expected within an asp.net updatepanel.
However with version 3 we have lost this, particularly dropdowns have stopped working with postbacks not being registered server side at all - the dropdown simply resets to it's default option whether i set the autopostback to true or false and use a button click - nothing gets returned.

I like the new version 3 for what it offers regarding styling the tabs with my own images, but i cannot seem to locate the code or a how to regarding if this is possible with version 2.

Do you know if there is a significant difference between the versions that might be causing the problem and if i can work around it at all?

Thanks again for your help - If i can get this working properly then a christmas donation will be on it's way!

Regards
Ian

This is very interesting stuff I've just figured it out.

It took me half a day to debug this, and barely now I've concluded the cause of this particular issue.
Maybe somebody knows about this or maybe somebody else will hit over this thing....

I haven't found a solution yet, but I'll try

Scenario:

• IE7 browser (I'm using IE9 emulating IE7: browser mode IE7 & document mode IE7 standards)
• slides are consisting only of linked images:
• first slide link, pointing to a VISITED link
• slider configed to continuous & autoslide

Issue:

• whenever the slider has to loop (animate first slide, the one containing the visited link), during animation the image is not visible, blank background color, it appears only after animation has ended

Test case:

• I've prepared & tested this fiddle, where I've loaded your original coda-slider.css and js but from my domain because I've configed a little bit the CSS for wrapper width / padding and placed a full URL path to the ajax-loader.gif (causing errors on fiddle)
• it's configured with a link for the login page on jsfiddle, but you might play with it....

Steps for testing:

• open or setup browser to be IE7 standards
• clear your cache (visited pages) if you think you've visited the above link (jsfiddle.net user login)
• access the fiddle: http://jsfiddle.net/Pmw7g/7/
• everything it's ok, no blanks while loop (there are only 2 images)
• open in some other tab (same browser) the login page on fiddle: http://jsfiddle.net/user/login/
• run again the same fiddle...

Do you notice the difference ?

It was kind of complicated / time consuming and frustrating to narrow it down to this particular issue scenario....

Hi
Coda slider is the one i am looking for. great slider plugin!
I would liked to know how to pause autoslide when mouse cursor is on slide area.

Thank you.

Thank you for your great script.

I'm having a problem here. I want to mount googlemap V3 on coda-slider panel, but it doesn't work.
Can you please give me advice?

Hi!

Good work! I've found an issue, with this code:

body
div align="center"
... code ...
/div
/body

The Silder don't work on Safari.

Regards!!!

For iPads ect... could be a great feature!

Hi, I have the slides running through a loop in WordPress and I'm trying to dynamically add a class to each of the tabs. Is this possible?

In Google chrome only a long narrow strip from the top of the first slide/image is shown.
After the time elapses to move to the second slide everything works as it should.

See it here via this re-direct:
http://www.proc.cc/slider

Appears to work fine in IE and Firefox. It's using version 2.0 of Codaslider and we'd rather not have to upgrade to 3.0 if possible....I'm sure this is some small setting somewhere.

Any help greatly appreciated.

I'm not very much sure if this is intended or not. But the Coda Slider 3 is generating 2 more panel markup although this is not visible, but can be a potential issue with SEO.

You can check it on the Coda Slider 3 page well here: http://kevinbatdorf.github.com/codaslider/

There are only four visible slider, but the markup is generated for 6 slider panel. Have a look at this image:
http://imgur.com/liXef

it seems like coda-slider is NOT compatible with ie7. Isn't it?

Dear,
I haven't found title css. Please help me to add.

Panel2

Jewel

I have a website and different script of slide using jquery

i 'm trying to use coda-slider, following the instruction, but i still have this error : Microsoft JScript runtime error: Object doesn't support this property or method

$().ready(function () {
$('#slider-cms-privilege').codaSlider({ <=== object doesn't suppot this property
continuous: false
});
});

js are well import and css too, of course div tag with slider-cms-privilege are declare...

I'm using autoHeight: true. and when the page loads the content in the first panel is chopped off by the bottom margin of #coda-slider. If I click on the first tab to reload the panel it then adjusts to the correct height.
This is the content that is in the first panel. https://gist.github.com/3030059

I tested with the index.html supplied in the demo and the same issue happens across 2.0 and 3.0. I wonder if there is something that I'm doing wrong.

Hi,

I just installed the 3.0 Version and I would like to link from "external" pages to e.g. slider 4 directly. Like cross-linking, but coming from a different page. I tried links like but it would "only" open the page with the first slider.
Would it be possible somehow?

Thanks!

Emil

What is the best way to put two sliders on one page?
Im getting a couple of bugs. Deep linking doest really work, for example html#3 would be slide 3 for both sliders.

Thanks

In jquery.coda-slider-3.0.js one could change the second $(this).text() to $(this).html() in line 143 resulting in this line

$($(self.sliderId).parent()).find('.coda-nav ul').append('<li class="tab' + (n+1) + '"><a href="#' + (n+1) + '" title="' + $(this).text() + '">' + $(this).html() + '</a></li>');

This allows the interpretation of the content within the <a> element as HTML and thus adds support for e.g. line breaks, bold text and so on.

Thanks and kind regards,
Martin

It would be very usefull if you could add some events for it like: onSlide, afterSlide, beforeSlide. It also could have some method to manually slide it.

Would you consider making the plugin 1.9 compatible by replacing calls to jQuery.browser()? It has been deprecated since 1.3 and was removed with 1.9

http://jquery.com/upgrade-guide/1.9/#jquery-browser-removed

Dear kevin thanks for your great project, i was using to complete some jobs

i have a problem, can you give me instructions?

is in Coda Slider 3.0

i have some tabs, is creating dinamically with asp.net, i was have problems because every panel have asp.net controls and when the page update with autopostback, some controls loose their values, but i solve this put two extra panels in the slider, one at the begin of slider and another in the end of slider

can i disable the first panel and the last panel?, i want the user cant select them, only the middle panels,

EXAMPLE

1ST PANEL | 2ND PANEL | 3RD PANEL | 4TH PANEL

i want only are selectables the 2nd and 3rd panels, the 1st and 4th panels must not be selectables
even if i have the graphical arrows

sorry for my bad english, im from Mexico

i will aprecciate your answer, please answer me if you read this message

thanks for everything

The slider is jumping to the top of the page in Firefox and IE when it auto slides to the next slide, this is really annoying, any idea how to fix it?

I am using this slider here https://dev.sandiegovets.com/faq/ and when i click on tabs the slider is stucked and work so slow .. Can you tell me to make it speedy ?

I now have a page where I want to have numbered tab-navigation.

I don't want to add the number into the content as it as no value ...

Please add an option to just number the tabs if the option "panelTitleSelector" is empty.

Hello,
I have another problem, my coda slider informations are not centered and i want to modify the css files to do it, but i don't know what file(s) i have to update and what line?

Has you can see in the website it's not really great... http/:/www.fal63.org

Thanks again for your help

Hi, I am using coda-slider on a website.
One of the panels has an Ajax chat room log-in screen.
When I load the website, the cursor is locating to the first input box on chat room log-in screen and viewers are presented with half the chat log-in panel and half of the previous panel instead of the home page.

Could this be a code conflict between javascript and Ajax? Or maybe some setting in the coda js?

Any help greatly appreciated.

I'd like to have a tab with a caption like 'All' which displays all tabs in one.

I searched how to do that. But I didn't see how I can revert all changes made by code-slider easily.

Hello,

I've setup a slider to contain all the elements within the container, so the nav and arrows are not outside of the panels but over them. The paddings and margins are all set to 0, so as not to add to the defined size of the space it is required to be within. The slider works fine, however, the width of the wrapper seems to be getting changed to something different than what is used in the CSS. Attached is an image of what I'm seeing in Firebug.

Do you know where I can change this or turn it off? The width of the nav (tabs) is also being set to 96px, which I can deal with because it is not affecting the overall slider. If you need to see the live code, let me know and I'll put it up somewhere for you to see.

Hello,
I think there is a bug in your pluggin on line 231.
Here's the line:

The variable autoSlideStopWhenClicked doesn't exist so I get a reference error.
I think you wanted to write :
if (self.options.autoSlideControls && self.options.autoSlideStopWhenClicked) {

Regards