Discussion on Everslider - Responsive jQuery Carousel Plugin

flGravity

flGravity supports this item

Supported

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

92 comments found.

How do i make this only show posts from the past 30 days lets say

I bought this on my other account .. there’s no option for this and i dont want it showing posts that are a year old…

See my reply in another comment from you. Thanks!

*Updated sorry. Meant to post in the WP version.

Hi, i love this. I wonder if you can help. i have 3 states, desktop (4 slides / portrait ) tablet ( scales nicely to 3 / portrait ) however on mobile it shows only one, I am looking to have 3 with landscape css, is this possible?

Hi! You can try to set min-width for ‘everslider’ container to prevent it from switching to smaller amount of slides on mobile. Also you can play with itemWidth/itemHeight options and try to make them as small as possible to display 4 slides on desktop.

http://joxi.ru/BA04QgDtPe6KAy Hello. Just today, faced with a problem. Navigation arrows do not go beyond area.

How to move the arrows over the area?

By design all controls are located inside of everslider container which has overflow: hidden. So it’s not possible to move them outside.

What you can do is

- disable default navigation via plugin options
- add your own next/prev buttons where you want them to be and link with plugin api methods slideNext() & slidePrevious()

Hi, I am having an issue with iframe. When this slider sits in an iframe, it doesn’t work in IE 10 and 11. (Didn’t check it on 9)

There’s a situation that this slider should be within an iframe, but only IE has this issue.

Do you know how to fix this issue?

Thank you so much for your support in advance!

D

Hi! Just checked it and it can be due to the fact that page (in iframe) loads jquery from http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js. Try to download jquery from http://code.jquery.com/jquery-1.11.3.min.js to the server and then link it to page. It can be some security restriction in IE.

Thank you so much for your support! It works like a charm! :)

No problem!

Hi, there! After updating Mac OS to the latest version, it shows weird blue border inside the left arrow as you can see in the link below.

https://dl.dropboxusercontent.com/u/5481849/screenshot.png

The screenshot is from your demo slider.

Do you have a fix for this?

Thank you, Daniel

Hi! Maybe this is outline. Try to open css/everslider.css file and add “outline: none;”

.es-navigation a {
 …
 outline: none;
}
hu8035

hu8035 Purchased

Have you come up with a solution for the weird blue border around the left arrow yet? Your method doesn’t work on Safari Mac OS X..

Have you had a chance to set “outline: none;” as I have suggested in my previous reply? Also please give me URL to your site to check

Hi, Can you tell me if Everslider will work with jQuery version 1.5.1?

Hi! Just checked and Everslider works OK with v1.5.1

Hi For everslider . I want to use images vertical and horizontal in the same slide so that they have the same height (ie different width) : how should I do ?

Hi! Everslider is designed so that all items in carousel have exactly the same width. Unfortunately it’s not possible to make items different widths unless you will add some white space to the image themselves.

Hello! I can not resize the image of ” Image slider,” which is the css attribute to resize ? Thank you so much.

Hello!

You should use next few options to configure size and amount of visible items in carousel:

    itemWidth: false,                   // slide width, px (or false for css value)  
    itemHeight: false,                  // slide height, px (or false for css value)  
    itemMargin: false,                  // slide margin, px (or false for css value)  
    itemKeepRatio: true,                // during resize always retain side ratio of a slide  
    maxWidth: '100%',                   // max container width, px or %  
    maxVisible: 0,                      // show only N slides (overrides maxWidth, 0 to ignore)  

By default Everslider will expand to 100% of it’s container (maxWidth). So you can leave this as is.

Next you should set “initial” item width using itemWidth option. Depending on this value plugin will figure out how many items to display and will automatically reduce them when you resize browser window. Let’s say Everslider container is 800px. And you want to show 4 items in carousel. So you should set itemWidth to 200px or even less. You can try different value to get feeling how it works.

If you want items to retain fixed proportion, like 5:3 then you should set itemKeepRatio option to “true” and use itemHeight option. for example: itemWidth = 500px, itemHeight = 300px, itemKeepRatio=true. In this case even when you will resize to mobile view, carousel items will be 5:3 ratio.

Please let me know if you have any questions!

Hi,
I get the ‘TypeError: $(...).everslider is not a function’ error.
This is my code:

<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>  

    <!-- Carrousel -->
    <!-- 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>

    <script type="text/javascript">
        $(document).ready(function(){
            $('#mycarousel').everslider({
                mode: 'carousel',
                moveSlides: 2
            });
        });
    </script>

I’m missing something?
Thanks,
Antonio B.

Hi! Make sure you don’t link jQuery library twice. Also <link> tag should have rel=”stylesheet” attribute.

Hi,
This was the problem.
Thanks,
Antonio B.

Was disappointed I couldn’t get this to work at all. Don’t think I’m doing anything wrong but must be. It just shows up as a large blank white space on my homepage.

<!- 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=”CustomPages/css/everslider.css” media=”screen”/> <script type=”text/javascript” src=”CustomPages/Scripts/jquery.everslider.min.js”></script> <style> .inner-slide{padding:0 10px;} #mycarousel .caption { position: absolute; top: 10px; left: 10px; background: #fff; padding: 10px; } #mycarousel .es-before-slide .caption { opacity: 0; }

#mycarousel .es-after-slide .caption { opacity: 1; } </style> <script type=”text/javascript”> $(document).ready(function(){ $(’#mycarousel’).everslider({ mode: ‘carousel’, moveSlides: 2 }); }); </script> <script type=”text/javascript”> $(’#mycarousel .es-slides > li’).bind(‘es-after-slide’, function(){ $(this).find(’.caption’).fadeIn(500); }).bind(‘es-before-slide’, function(){ $(this).find(’.caption’).hide(); }); </script>
  • Gifts for Girls \\
  • Gifts for Home \\
  • Gifts for Guys \\
  • Personalized Party Napkins \\
  • Custom Printed Cups \\
  • Personalized Gift Bags \\

Hello! It’s very hard to understand where you made mistake. Could you give me link to your site?

Thanks. It’s not live right now because it’s not working so you won’t be able to debug. Do you have any other suggestion?

First you should check markup. Maybe you have missed a tag. Secondly, check JS error console in your browser (Firebug in FF, Web Inspector in Safari).

bvonline

bvonline Purchased

This comment is currently being reviewed.

by
by
by
by
by
by