Code

Discussion on Everslider - Responsive jQuery Carousel Plugin

Discussion on Everslider - Responsive jQuery Carousel Plugin

Cart 606 sales

flGravity supports this item

Supported

This author's response time can be up to 5 business days.

98 comments found.

Have just noticed some starnge behaviour – any text placed underneath the slider fades very slightly, only during a slide transition. Do you know why this might be happening? Thanks

I think it’s related to css3 transitions and how browser handles screen redraw. You can switch transitions to jquery by setting useCSS to false.

That worked great, thanks

Any chance to disable responsive and set the images a width?

You need to place .everslider into some div with fixed width and it won’t be responsive. Then set slide width using itemWidth plugin option

Thanks! Next thing I want to do is as the user before. I need the controls next/prev outside the div. I am totally lost here. Can u help me please? maybe private link?

thanks

You create a link, for example “next” and place it where you want. Then add click handler that calls slideNext() API function using trigger(), like so

<a id="next-link">Next</a>
<script type="text/javascript">
$('#next-link').click(function(){
   $('.everslider').trigger('everslider', 'slideNext');
});
</script>

Hi. Great plugin. Just have 1 query – is it possible to move the next/prev arrows so they are outside the container? I need them to be before and after the first and last slide. Thanks

Hi! Everslider container has css overflow:hidden, so you better turn off navigation controls and add your own next/prev buttons outside everslider div and bind them with API functions slideNext() & slidePrevious()

Perfect, Thanks

hello , I just did it for wordpress ’ the latest articles’ but I get just two featured projects (used fullwidth project) and the width is 580px for each , I want to display 3 , any help please ?

solved , thx for that plugin bro !

How can I modify the JS so that the animation only starts when the item is hovered over.

OK. Great!

Sorry I think you misunderstood, the 3rd line of the above snippet, carousel.tickerPlay(); does not trigger the animation.

BUT, carousel.slideNext(); does work if I replace the tickerPlay, so I know my code works and can access .

There seems to be an issue with calling carousel.tickerPlay(); any suggestions on getting tickerPlay to work in the above instance?

Sorry. Please look in your Everslider init and tell me if “ticker” option set to true and “tickerHover” to false. Also carousel “mode” should be any except “normal”. When this is done, your custom code should look like this:


$('#carousel161').mouseenter(function(){
     $('#carousel161').trigger('everslider','tickerPlay');
}).mouseleave(function(){            
     $('#carousel161').trigger('everslider','tickerPause');
}).trigger('everslider','tickerPause');

Pay attention to the fact that I call tickerPause outside the hover functions.

When I installed it, I only get the preloader. I’m using the project carousel, I sent you a PM with the URL.

I sent you another message.

Was wondering if anyone reading this had any issues when using iPad that make the other elements on the screen flicker. Also, when the ticker / animation is turned on, if you scroll the images disappear.

This I figured it out, the <header> was the one that was flickering, I added the below to the css style:

-webkit-backface-visibility: hidden;

And that did the trick

Ok, great!

Hi,

Iam using the “Fullwidth Carousel”. How can I add the navigation arrows to be on top instead of left/right of the carousel. I want to place them just how you have it in the sample.

Hi!

you need to override following styles:

.es-navigation a {} 
.es-navigation .es-prev {} 
.es-navigation .es-next {}

Hi, Do you have this for Wordpress? If so, I’d like to order it.

Not yet! I’m working on wordpress version of this plugin.

Hi,

I’m sure it’s something very simple (as it usually is!), but I can’t get the navigation graphics, etc., you included to show up (play/pause, Prev/Next text do). I verified the path and it’s correct I also tested one with a simple img tag in the body and that works, so it must be the css.

(Note: I added an ID before your CSS so it wouldn’t conflict with mine, but the nav only displayed as text before that and I didn’t notice any conflicts with it and my link formatting for your Nav works.)

Test page - enjoy ;)

Thanks!

Also, maxWidth or maxVisible are not working for me; the slides are still 8 slides across the page. The navigation recognizes my div width but the slide number across the page are not changing (I want 3 slides at a time in a right col div). Thx!

First of all you have included jquery easing before jQuery itself. Please correct this and get back to me. But please use mail form on my profile page

Firstly, thanks for this great responsive carousel plugin. It’s the best I’ve found.

I am just hoping to dynamically set the ‘moveSlides’ option to equal the number of currently visible slides: getVisibleSlides().length

So if 4 slides are visible – 4 will scroll. If the window size is reduced and only 3 slides are visible – 3 will scroll.

Are you able to help me with the syntax for this please? I’m not sure how to update the ‘moveSlides’ option once the slider has initialised.

Thanks again,

CJ

Thanks for using my plugin! Here is quick recommendation what I think might do what you need. In plugin js file there is prototype function “resizeSlides”. This function when window is resized re-calculates this.visible (amount of visible slides). As soon as this value is calculated you need to assign it to this.settings.moveSlides

Trying to make this expand the full width of my page. Tried the width to 100% and making the height auto (see below) but if I change things it causes a script error when the page loads on a small width screen size.

.everslider .es-slide { float: left; padding: 0!important; border: 0!important; width: 100%; height: auto; margin: 0 10px 0 0; }

Hello! May I have a look on your site?

can I send you a private link?

Yes, sure. Write me using mail form on my profile page.

Hi! I’m having trouble implementing this into my jquery mobile site. Seems like putting this image slider inside a data-role=”collapsible” div causes the site to crash. Any ideas how to fix this? Thanks…

Hi! Well, I need to have a look. Please give me URL to your site.

Hi – I don’t have a URL for my site yet. I’m still working on it, but trying to implement this.

Sorry, I cannot help you without taking a look.

How difficult it is to change the next/prev arrow position?

It’s not difficult. Next/Prev controls are absolutely positioned elements. To change position you can modify following styles .es-navigation a, .es-navigation .es-prev, .es-navigation .es-next in everslider.css

Wow! pretty good effect. Added to bookmark, will definitely purchase when i come across a project needing this.

Hi there,

I have followed the installation instructions as far as I can tell, could you have a look at my test site to see what I have done wrong?

Test site

Apologies if I’m just being stupid, thanks in advance for any help!

Ross

Hi, thanks a lot for the help so far. One more question – is the hover effect on the featured carousel example included in this plugin?

Sorry, found it – works great

I have been desperately trying to make Everslider work in my Wordpress theme. Is there something that bars it from working there?

No, it should work fine. Please give me URL of your site and I will check

Thanks Tean!!

This is stunning – Wordpress please!

Thanks! WP plugin will come shortly :)

Great consider this your first pre-order.

by
by
by
by
by
by

Tell us what you think!

We'd like to ask you a few questions to help improve CodeCanyon.

Sure, take me to the survey