thanks for the fast replay. yes I checked the docs and I made some tests. The problems are two: 1. As you said I have to set width in px – if I set width to 100% the pictures’ height becomes 0. So how can I do to have fullwidth slideshow? 2. If I set width and height the pictures are stretched.

I will explain this moment!

1) When you set carousel item WIDTH (in css or using itemWidth option) it means that you set some “reference width”. This width helps plugin to determine how many carousel items you want to be visible – 1, 2 or 3! When plugin will know the number it will adjust every slide to fit exactly into the available space. For example if you create site using 960px grid, and if you want fullwidth slider then you need to set carousel item WIDTH to 960px or more. Everslider will figure out you want 1 slide to be visible.

2) Along with WIDTH you can set HEIGHT. This HEIGHT you can call also “reference height” and it serves only to get width:height ration to resize slides proportionally.

3) If you know that your carousel items will have different heights, you may set plugin option “itemKeepRatio: false” what will ignore width:height ratio, so your carousel items with have auto height.

If something isn’t clear let me know I will be glad to explain!

ok! I worked on it but: 1. I would like a really fullpage slider. Not 960px or 1100px. It should depend on the users sceen. I understand that is a ‘reference width’, but what I have to set? 1500px? 3000px? 2. If I set the height, as you said, the image will be resized proportionally, but I don’t want it. I want a fixed height. Really like the example I posted you. 3. If I set itemKeepRatio to false, my height will be ignored but I don’t want it.

/TEST 1/ maxVisible: 1, itemWidth: 3000, itemKeepRatio: false, itemHeight:300

/*TEST 2 */ maxVisible: 1, itemWidth: 3000, itemKeepRatio: true, itemHeight:300

Yes, I can help to integrate Everslider into your website!

for example; I have 5 slide(full screen). and my slide position is on the third slide. when I resize the screen, viewable area of slider display middle of 2 and 3 slides. when this happened I need to say “slideTo(3)”. if I say “slideTo(2)” its working perfect. but “slideTo(3)” not. sorry for my English.=) I hope explain myself..

I need to have a look on your site.. But slideTo(3) won’t move carousel if you are already on slide 3. Or! If plugin is in “carousel” mode (due to the internal implementation of carousel mode) if you are using slideTo() method, you won’t see items moving in “carousel fashion”, slideTo() will simply move to make slide you asked visible or will not move if it’s already visible. If you expect to make it first slide, then unfortunately in some circumstances you won’t be able to.

I have send you my test link, thank you

I replied, please check email!

No, your preview page is still not working for anyone that is using IE 10. We’ve emptied caches, etc… So, what is up with this? We buy from here with the confidence that these products are sufficiently vetted.

Ok, here is the problem with IE 10. When your preview page is within an iFrame (with CodeCanyon’s Iframe at the top), the sliders do not show. “Remove this frame” solves the problem.

Oh. Good that you have figured this out and shared solution with everyone. Thanks!

Thanks for contacting me! I see that height of slides in carousel has been calculated as 0px. That’s why it disappears shortly after start! In everslider css I see that you set carousel slides size as width:100%; height: 100%;. This is wrong. Carousel item width must be always in px! same for height, but if you use “itemKeepRatio” option you can leave height unset and it will be automatically set to “auto”.

<!- jQuery library and easing -> <script type=”text/javascript” src=”http://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.1/jquery.min.js”></script> <script type=”text/javascript” src=”http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js”></script>

<!- Everslider CSS and JS files -> <link type=”text/css” href=”css/everslider.css” media=”screen”/> <script type=”text/javascript” src=”js/jquery.everslider.min.js”></script>

• 
• 
...
• 

are these the only thing that you need?

No, you don’t! Looks like you did something wrong. I’d recommend you to contact me using mail form on my profile page and send me link to your html page. Thanks!

thanks for responding! I just figured out how to do what I want. I wanted to do simple slider, and it works great now!!

Hi!

First you need to disable internal navigation by setting ‘navigation’ option to false.

Then you need to place everslider div into relatively positioned div with 30px left and right padding (maybe you would need to set box-sizing: border-box; css prop). Then add two absolutely positioned links on either side of div. Next add following JS code to make links work as navigation for Everslider

$(function(){
 var es = $('.everslider').data('everslider');
 $('#next-link').click(function(){ es.slideNext(); });
 $('#prev-link').click(function(){ es.slidePrevious(); });
});

Hi again, firstly thanks for your response, secondly sorry but I am pretty much a n00b at all this and am a copy and paste expert.

What have i got going wrong here? Feel like I may be a couple of lines from glory!!!

<script type="text/javascript" src="/kCommerce/scripts/everslider/jquery.everslider.min.js"></script>
<link href="/kCommerce/scripts/everslider/everslider.css" rel="stylesheet" type="text/css" />  

<script type="text/javascript">  
$(function(){
 var es = $(\'.everslider\').data(\'everslider\');
 $(\'#next-link\').click(function(){ es.slideNext(); });
 $(\'#es-prev\').click(function(){ es.slidePrevious(); });
});
</script>

<div class="popularprods_head">Popular Products</div>

<a href="" class="es-prev"><span class="alt-arrow">Previous</span></a>
<div class="featured_slide">
<div id="mycarousel" class="everslider">  

<ul class="es-slides">
'.$featured_list.'
</ul>
</div>
</div>
<a href="" class="next-link" id="next-link"><span class="alt-arrow">Next</span></a>
<div class="popularprods_foot"> </div>

<script type="text/javascript">  
    $(document).ready(function(){  
    $(\'#mycarousel\').everslider({  
    mode: \'circular\',
    itemWidth: 275,                      
    itemHeight: 150,
    maxWidth: \'900px\', 
    moveSlides: 3, 
    maxVisible: 3,
    itemKeepRatio: true,
    syncHeight: false,
    keyboard: true,
    navigation: false,             
        });  
    });  
</script>';

Hello! Link that you provided does not load. But I may say that it’s possible to configure Everslider WP carousel to slide infinitely using 1) linear transition 2) animation time that is equal to timer delay

You need wordpress version of this plugin. But you have purchased JS version

You mean dynamically add slides?

$( ).append(); jquery

if you want to append slides to already running carousel it won’t work!

Hi! Plugin does not have such api method. But I can add it for you if you buy Everslider plugin

There is a problem with CSS3 animations on iOS7 that I’m working on. As temporal solution you can switch over to jQuery animations by setting useCSS option to false. If it’s not related to animations, then please send me privately a link to your site and I will check

You can do this with window.setTimeout() and slideNext() method that you can run as in example var s = $('.everslider').data('everslider'); s.slideNext();

Thank you

Ok. I will try to figure out what’s actually happening in iOS7 and will release update to my plugin.

Now regarding your problem. Could you give me URL to what you are doing so I could have a look. Please contact me privately with an URL

I have fixed iOS7 issue and uploaded update to my plugin a minute ago. You will be notified after it will be approved on Codecanyon.

Hi! Thanks for reporting this problem. I will try to fix it as soon as possible and will update you when Everslider update will be available to download form Codecanyon. Meanwhile I can suggest to set “useCSS” option to false as temporal fix.

I have fixed iOS7 issue and uploaded update to my plugin a minute ago. You will be notified after it will be approved on Codecanyon.

I have figured out the problem. There was division by 0 that was hanging site. I will upload bugfix for my plugin, but for now you can fix this in jquery.everslider.js. You need to replace

this.visible = Math.floor(this.visible);

with

this.visible = Math.floor(this.visible) > 0 ? Math.floor(this.visible) : 1;

in line 547

thanks a million, man. I appreciate your attention to this very much.

no problem!

Found it! Thanks to you, your code is well commented. I found the direction part pretty easily.

Thanks! Great that you figured this out!

Hello! You can add afterSlide callback which accepts array of slides (LI elements) as argument, that become visible after animation completes. Then you can find central LI element in this array and add class to it to highlight.