Code

Discussion on Everslider - Responsive jQuery Carousel Plugin

Discussion on Everslider - Responsive jQuery Carousel Plugin

Cart 600 sales

flGravity supports this item

Supported

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

97 comments found.

Good luck with your sales

Hey,

The default size setting in the slider now is : 1) Screen less than 825px show 1 item in slider. 2) Screen Between 825px to 1350px show 2 item in slider. 3) Screen Between 1350px to 1885px its show 3 item in slider. 4) Screen between 1855px to 2415px it show 4 item in slider.

I wanna be also in point 2+3 4 item in slider not less. and less than 825px to be only 1 photo like the settings now.

Hi, just purchased it, can’t make it work at all. The documentation is not as clear and specific as it could be. I put it online anyways so you can check it out and see what’s going on (seems to be loading perpetually). Thank you

Please, I really really need support, bought the plugin a week ago, still waiting for response.

How to minimum slide 2 item? i want 2 slide item at screen size mobile.

How to minimum slide 2 item? i want 2 slide item at screen size mobile.

Hi there. Thanks for the plugin.

I followed the instructions in the doc and examples page but I am getting the following error:

TypeError: undefined is not an object (evaluating ‘data.data0’)

Here’s the page:

http://bjornfloki.com/dev/wn/feed.html

Here’s the script snippet I’m using:

var feed1 = {
    "accesstoken": "1640169175.1677ed0.6823176d6f574ba48f33a120271d12c9", //Separate multiple Access Tokens with commas. Get your Access Token here: https://smashballoon.com/instagram-feed/standalone/token/
    "type": "user", //Type of feed
    "num" : "20", //Number of posts to display
    "ID" : "1640169175" 
};

Please advise, thank you!

Hi!

this error is coming from “http://bjornfloki.com/dev/wn/js/instagram-feed/js/sb-instagram-standalone-2.7.1.min.js” script which is not Everslider script. Unfortunately I don’t support someone’s else plugins/scripts. Sorry

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

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.

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

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, 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;
}

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

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

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

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!

Hi,

Is there a way to offset when the carousel starts from? I’m making one large carousel which contains the very most recent post, and then another to sit next to it which starts from 2nd most recent and so on.

I know this would involve probably making a new carousel via templates.php which is fine, just don’t know how or where to define the offsetting of post start.

Sorry for the double reply but I figured out how:

everslider.php – line 201, add this: ‘offset’ => ‘1’,

However I would like to do this to only one particular carousel, any idea on this to be achieved? Would be good from the admin too eventually as a recommendation.

Hi! You can check $slider_id and only add offset for this particular slider. $slider_id will match ID in [everslider] shortcode

Hey!, I’m looking for a carousel like this but when reaching the end of the thumb it needs to stop.

Is it possible to stop when you reach the end of the thumbs with this script?

Not “everslide” :)

Yes, it’s possible. My carousel has 3 modes – ‘normal’, ‘circular’ and ‘carousel’. In ‘normal’ mode carousel will stop when last slide will become visible.

Is there any way to add caption text below the images instead of inside the images on the bottom?

Yes, you can either modify existing template in wp-content/plugins/everslider/templates.php or create your own Custom Slide Template using html and css

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