Discussion on CodeSlider - Touch Responsive Multi Slider


thystudio supports this item


20 comments found.

Is this written in a way that more than one slider can be installed per page? If so, I’m buying…thank you.

Yes, in per page, you can be installed more than one slider. You can find an example in the downloaded file (example / function.multislider.html). Sorry for late reply, next time I will respond faster :)


I’d like to know the best way of getting the cordinates within the slider element. On slide 3 within the demo you have a feature of a love heart which injects dots across a X / Y position, I’d like to know how you go around getting the positions as I can’t find this in the documentation anywhere.

I’m hoping you have something in terms of the API when you click an area within the console it reports the X / Y or if you can provide information how I go about making my own jQuery script that’d be great.

Furthermore I’ve tried to register on your site but sadly it says my code is wrong which is strange because as you can see I’ve purchased the item and simply copy and pasting from the license file….

Thanks in advance.

I just added new options x/y position reports. But i can not find your email, can let me know your email, i will email to you with codeslider latest.

Hey thanks again for the super quick responses. You can email me on simon@bybe.net thank you.

I just send you an email included ‘codeslider.js’ latest with that options and test file to description ‘click reports’ working.

wait so is there an admin panel? or do we hand code the slides+transitions?

This version is jQuery plugin, so you only hand code. The version admin panel will be available in the future.

My site broke after implementing this slider on my site. i think this can be some css issue. Is there any light version for classic slider?

My site broke after implementing this slider on my site. i think this can be some css issue. Is there any light version for classic slider?

The part script, i’m planning to split into modules to reduce code size, but in next month.

As part css, you can leave me your email, i will send you core css, it work only in layout line, no layer, no style for navigation…

You can take your web address, let me know exactly where the problem.

Thank you for purchased!

thanks for the reply. please email me minimum version of classic slider at mkop_dave@yahoo.com

I have sent the file via your email address.


How do I integrate this to Wordpress?

Hi nhyiradesignstudio,

Because this is jQuery version, not wordpress version, so you want integrate to wordpress, you must have to manually (I setup on the default theme twentytwelve) :

1. In your hosting server, upload folder ‘code’ into the your theme folder with path (or wherever you wish):
wp-content > themes > yourTheme > code

2. In your hosting server, open file ‘head.php’ in your wordpress themes, insert main js, css codeslider into bottom tag <head>:

<!-- The plugin requires jQuery 1.7+, If you do not have jQuery, you add it to your page, from Google hosted jQuery --> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </ script> 

<!-- Main codeslider style, codeslider js --> 
<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>code/codeslider.css"> 
<script src="<?php bloginfo('template_url'); ?>code/codeslider.js"> </ script> 

<!-- Initialize the slider --> 
<script type="text/Javascript"> 
     jQuery (document). ready (function ($) {
         $ ('. cs'). codeslider (); 
</ script>

—> save and close file.

3. Check codeslider by add simple html slider to your page. In browser—> login to backend site wordress. Open any page -> edit page -> choose ‘view’ -> insert html:

<div class="cs cs-default">
       <a class="cs-img" href="imgs/img0.png">[img0]</a>
       <a class="cs-img" href="imgs/img1.png">[img1]</a>
       <a class="cs-img" href="imgs/img2.png">[img2]</a>

—> save and check in browser.


  • ‘href’ of image is absolute path (have ‘http[s]’).
  • tag in wordpress can auto css style ‘max-width: 100%’ -> affect the height of the slider, so remove that style in codeslider.css .canvas img {display: block; max-width: none;}
  • Write html in the backend site can automatically add every time down the line -> create an empty slide.

Kind Regards.

I am using the twenty ten theme and these instructions are not working. Is there a different way for me to integrate this into Wordpress?

Sorry, at the above, due to lack of ’/’ in front of ‘code/codeslider’ and residual gap between the tag at part2—> slider not work. You can try again, or you can try other way:

On wordpress, you can use the ‘insert code manager’ plugin (or similar plugin) to simplify the steps above:

1. Add codeslide js / css into the header (or footer)
<link rel="stylesheet" href="<?php bloginfo('template_url');?>/code/codeslider.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>  
<script src="<?php bloginfo('template_url');?>/code/codeslider.js"></script> 

<script type="text/javascript"> 
     jQuery(document).ready(function($) {
         $ ('.cs').codeslider();


2. Add slider in html page.
<div class="cs cs-default">
       <a class="cs-img" href="http://yoururl/img0.png">[img0]</a>
       <a class="cs-img" href="http://yoururl/img1.png">[img1]</a>
       <a class="cs-img" href="http://yoururl/img2.png">[img2]</a>


3. Copy and paste the shortcode into the any page.
[include id="2" title="slider on page"]

4. And done! wp-insert4

If the slider is not working anymore, please give me the web address, so I know exactly where the problem.

Hi, I’m trying to get the slides to fade between each other, not having any luck. Thoughts? http://www.poweredanimals.com/

Not fading in Firefox by css line in ‘stylesheet.min.css’
img { max-width: 100% }

Add css into file ‘codeslider.css’ to fixed
.cs-canvas img { max-width: none !important; }

I also tested your slider on this page

I really appreciate your help on this. But the images are still way bigger than they should be.

image big—> totally depend on your image, you can crop and down size your image.

I try crop your image resize image to 1920×700px, only 1mb (before 4.2mb). DEMO

Dear Thystudio team, 

I would like to ask if it was possible to expand the simple slider into a slider with the following properties:
  • Full width
  • Showing one or two partial slides on the right (but none on the left) as in this example. If the number of slides is less than 3, only one partial slide should be shown.

I looked at the simple slider, but I could not figure out how the partial slide effect was implemented. 



Your code works perfectly, thanks a lot!

I would only be curious if it was possible to show an arrow-shaped cursor pointer over the large image and an hand-shaped cursor pointer over the partial slide, as to make it clear to the user that a click action on the partial image is required.

As for the swipe gesture, I don’t need it on the desktop, but it would be great if it would work on tablets and mobile phones. However, as I could not find any option to apply different actions on desktop and mobile devices, I think it is not possible.

1. Change cursor—> First, remove style ‘Grab pointer’ in codeslider.css (codeslider.src.css), and add new style cursor:

/* Grab pointer */
.cs-slide {
    cursor: pointer
.cs-slide.cs-cur {
    cursor: url(yourCursor.png), e-resize;

2. Swipe gesture have 2 options, isDrag for desktop and isTouch for mobile. Default, two options are turn on.
If turn off swipe gesture on desktop, setup option:

isDrag : false

I set isDrag to false and went with this CSS for the pointers:

.cs-slide {
    cursor: pointer

.cs-slide.sl-cur {
    cursor: default;

Works like a charm! Again, thank you very much for your help!

Wow, your demo is very amazing, is it easy to make a transition like your demo :) I will definitely try it when I have time!

Thank huykhong.

Hallo, my question is: Can the Code slider slide any HTML content or only images? Regards – Ulrich

Thanks! One more question: I would like to turn all PHP pages in one folder into a slider. Automatic editing with AWK is no problem. But the height of some pages exceeds the viewport width so that scrolling on the smartphone by swiping up and down will be necessary. Is this possible? (Maybe swiping left and right to page the content hijacks swiping up and down for scrolling.)

Of course must read: ”... exceeds the viewport height …”.

On mobile devices, codeslider not hold swipe up or down to scroll page, it just hold swipe left or right to swap the slide.

So I am trying to add this on top of foundation and it is completely breaking my site. Do you have a lighter version? I want it to look like your slider.simple example.


Lighter version is currently not available. Your site on the host or not, please give me the web address so I can detect specific problem.

I like this. Can I code it into WP without going crazy? :) Can a full screen slider carousel with no space between images and center images that are current possible (except the 1st) Like this: http://fashionicon.me/elizaj/lookbook4.html The problem with this is the code conflict with the nav bar not working. Looking for a fix.

Dear, consider to buy extended license for my template on Themeforest. Could you please send me documentation or api description for slider? I need to see it first.

please send me your email to vanthy.designer@gmail.com

Where do I can change tl slider size 500×600 ?


Great product, really flexible with what you can do with it.

I have one issue though and I was hoping you may be able to help. When using the slider within a Zurb Foundation package I come across a problem. This is because you use ‘data-slider’ to set options and so does the Foundation package.

I was wondering if there is a simple way to sort out this conflict through your code? I’ve had a look at the source code but I am unsure what parts would need to be changed.

Are you able to help?

Thanks, Andy.

Is it possible to use the slider in web templates that we sell, when we purchase an extended License?

hello, is it possbile to apply an overlay effect with a slide show loop the slide that are left and right? thank you

nice script

but can i add navigation to a basic slideshow? is there an easy way to do this? Would i update the div tag? thanks

thank you for the awesome script, but i cant click over any link that included inside the tab content.


I am having issues getting this to show up, all the scripts are in stalled and nothing is appearing. Can someone help me?