NextGEN Flex Image and Content Slider Template

This plugin adds “sliderview” template for the NextGen gallery. Use the shortcode [nggallery id=x template="sliderview"] to display images as the slider. You can visit Settings -> NextGen Slider to select theme, toggle between image and content slider and change width of the image or content area. You can download plugin from WordPress Plugin Repository.

wordpress nextgen flex content slider

Content Slider

Use the shortcode [nggallery id=x template="sliderview"] to display images as the slider.

wordpress nextgen flex image slider

Image Slider

Available additional attributes are (these will work on post/page contents only)

theme:
(string) (optional) Theme of the slider
Possible Values: ‘black’, ‘blue’ or ‘grey’

display_content:
(boolean) (optional) Toggle between content and image slider.
Possible Values: 0 or 1

order:
(string) (optional) Select order of the images.
Possible Values: empty or “random”

slideshow_speed:
(numeric) (optional) Delay in animation
Possible Values: Any numeric value

direction_nav:
(boolean) (optional) Enable or disable next/prev navigation arrows
Possible Values: 1 or 0

pagination:
(boolean) (optional) Enable or disable pagination bullets at bottom
Possible Values: 1 or 0

image_width:
(string) (optional) Set width of the images
Possible Values: 100px or 100% or 80% etc

text_width:
(string) (optional) Set width of the content area (in case of content slider)
Possible Values: 100px or 20% etc

link_title:
(boolean) (optional) Enable or disable whether title should be linked or not (for content slider). Please follow this tutorial to set it up
Possible Values: 0 or 1

link_image:
(boolean) (optional) Enable or disable whether image should be linked or not. Please follow this tutorial to set it up
Possible Values: 0 or 1

link_new_window:
(boolean) (optional) Enable to open slider url to be opened in a new window. Please follow this tutorial to set it up
Possible Values: 0 or 1

background:
(string) (optional) Set background color of the slider
Possible Values: Any valid HTML Code. #fff or #23423f or white or black

use_width_for_img_slider:
(boolean) (optional) To use the specifed img_width for image slider too.
Possible Values: 0 or 1

disable_img_stretching:
(boolean) (optional) Images in image slider are set to 100% width which may cause stretch for small or portrait size images. Please enable this option to fix it.
Possible Values: 0 or 1

You can set theme (blue, grey or black) and toggle the image and content slider from WordPress Admin.

Administration Setting Panel

Administration Setting Panel

You set image text for the content slider in NextGen image description and alt attributes as shown in picture below.

wordpress nextgen flex slider content population

Slider Content Population

Please note few things about this plugin:

Please leave comment for any suggestions or report a bug.  If you like it please let other know by rating it on WordPress Repository.

You may also want to check out our 3D and 2D Animated Flux Slider.

Update 1: NextGen Flex Slider now has “Grey” theme.

Update 2: NextGen Flex Slider now allows multiple sliders on single page or post. Please use attributes listed above to change the settings for each individual slider. cheers!

Update 3: Due to time constraints, I am not able to update or fix issues. So, I decided to host it on GitHub. If anyone fixes an issue, please take time to update the repository. Thanks
https://github.com/mohsinrasool/NextGEN-Flex-Slider-Template

82 Responses to NextGEN Flex Image and Content Slider Template

  1. I love your slider! My concern is that I need to use your slider without the .flexslider .slides 15px padding (in the black.css file).

    Since I started using this last week you have updated it twice (great!) but then I need to go in and change the css code to remove the padding. Not a problem while I am still in test mode, but will become an issue for ongoing maintenance. Is it possible you could create an option for “no theme” or do you have a suggestion on how to best change my code so future updates don’t break my design? Thank you so much!

    • Mohsin Rasool says:

      Linda, it is never been a good idea to change the core files of plugins or WordPress. Always use CSS overriding to accomplish you customization. For example, to remove padding you can put following rule in your theme’s style.css

      .flexslider .slides {padding:0 !important}

      !important make your style a top priority and it will be applied all the time no matter how many times you upgrade.

      Cheers!

  2. Loi says:

    This looks very good, I am trying to install it on my Blog now, because I already use the NextGEN Gallery Plugin. However I can’t get it to work! I noticed at the bottom that you say it is built on FlexSlider 2, does that mean I need to somehow be using that, or install that somewhere on my site? After downloading the file I am confused on how I would install something like this, it isn’t the same as other plugins I have used.

    Thanks for your help.

    • Mohsin Rasool says:

      Loi, You do not need anything except NextGen Gallery plugin and this slider plugin. Once you have both of these installed (just like any plugin) and activated, Please insert [nggallery id=YOUR_GALLERY_ID template="sliderview"] in the page or post where you want to show the slider.

  3. Babak says:

    Hi
    My contents are not alighned. what should I do?
    Thanks

    • Mohsin Rasool says:

      Hey Babak, what you mean by not aligned? Can you show us a test page?

      • Babak says:

        Hi Moshin
        You can see it in http://www.hbsystem.likesyou.org/. As you may see the text beside of the picture are not aligned or I think they are center aligned. I need to change them to justify. I put the HTML tag in text box in setting , but it does not solved my issue. it aligned it, but put some spaces between words
        Thanks for helping

        • Mohsin Rasool says:

          As I suspected, one of your theme’s CSS rule is conflicting with the slider CSS. Please add following CSS rule in your theme’s style.css to fix it.

          .flex-caption p {
          text-align: left !important;
          padding: 0 !important;
          }

          Thanks

  4. Sam says:

    Hi, I love your plugin and it is working great.
    My only concern is that when i use the slider, it displays the images from NextGEN Gallery Plugin which contain various dimension and size. Is it possible to make the slider display the Thumbnail images from NextGEN Gallery which has already been cropped to a fix dimension?
    Thanks.

    • Mohsin Rasool says:

      Sam, this plugin does not have any feature related to using thumbnail because this you wont be having control over picture’s dimension. I suggest to resize images either in the same gallery or to a new gallery and use it for flex slider.

  5. Chris says:

    Hello,
    is it possible to link (and manages links in the gallery) each slide (image) of the NextGen Slider, in order to place the slider in the homepage and open differents pages of the website through the images of the slider ?

    If not, could you indicate me which WP plugin is able to do that correctly ?
    Thx a lot //
    Chris

  6. Flavio Sales says:

    Hello, this is an excellent plug-in, congratulations! Just one question: if I have created several galleries (eg drinks, watches, perfumes, etc) how do I show them all at once?

    Thx a lot.

    Flavio

    • Mohsin Rasool says:

      Flavio, Do you mean all galleries in one slider? If it is, this slider does not support it. It is not a limitation of slider but the NextGen’s shortcode. You surely can create a new gallery and copy some or all images in that gallery to show up in a slider.

  7. Liz Martinez says:

    I’d like to display the slider in a widget area, but I’ve put the shortcode into a text widget and it isn’t showing on the page – am I missing something?

    Thank you!

    • Mohsin Rasool says:

      Yes, I believe, you are. Please paste following code in your theme’s functions.php

      add_filter('widget_text', 'do_shortcode');

      This code lets you execute shortcodes in your widgets.

      • Liz Martinez says:

        That was it, thank you! I forgot that shortcodes aren’t executed in widgets by default.

        Thank you so much for your extremely prompt response!

        Liz Martinez

  8. Josh says:

    I am having trouble getting the directional navigation to appear on the sides of the slideshow.

    Is there a certain place where that portion of the shortcode needs to be entered?

    • Mohsin Rasool says:

      Nop, nothing special. Make sure you enabled it in the admin settings.

      • Josh says:

        I have it enabled, so that’s good to go. Here is how I have the shortcode entered: [nggallery id=1 template="sliderview" directionnav="setting"]

        Is that wrong? Should it be entered differently?

        • Mohsin Rasool says:

          Correct format will look like following, Please note the “_” and the value to “1″. Put “0″ to disable it.

          [nggallery id=1 template="sliderview" direction_nav="1"]

          Thanks

  9. Kerri says:

    Hello, love your plug-in. Just a couple of things I could not figure out code for:

    1. remove border
    2. have the image stretch with no padding left or right in the div

    I’ve been guessing quite a bit. I am not an expert in code, but here is what I’ve tried:

    .flexslider .slides {padding:0 !important;
    image_width:100%;
    float:left;
    margin: 0em;
    border: 0px;
    }

    Thanks for your help

    Kerri

    • Mohsin Rasool says:

      Hi Kerri,
      I am not sure why you have float:left in the code. You can add it if you want it. The following CSS would remove both padding and border.

      .flexslider {border: 0 !important; box-shadow: none !important;} // Removes border and shadow
      .flexslider .slides{padding 0 !important; } // Removes padding around image

      Hope it will help.
      Cheers

      • Kerri says:

        Thanks for the quick reply. I removed the I sent to you in the original post, and replaced it with the code you sent me, however nothing changed. Not sure what I did wrong.

  10. babak says:

    Hi,
    When I add the slider in my theme, then it does not look good in mobile screen (I am using Iphone). The text will exceed the border. DO you have any idea?
    Thanks

    • Mohsin Rasool says:

      Babak, sorry for the late reply. I noticed text is is at bottom because of the fixed width of contents. If you move to percentage(may be 40%) width as well as smaller font size for the mobile devices. I believe, it would fix the problem. You can use CSS media queries for that purpose.

  11. David says:

    Thank you for this excellent plugin which I use on two sites. On one site it works perfectly on the other it dosen’t work. If you look at this page you will see what I mean – http://holidayletts.com/?page_id=61

    I have checked both sites and they have the same versions of WordPress and Plugins. Thanks for your help

    • Mohsin Rasool says:

      I see four 404 errors and 2 javascript errors when page loads which I believe, stopped the further execution of the javascript code. If you fix them, slider will work as expected.

      GET http://holidayletts.com/js/jquery-1.2.3.pack.js 404 (Not Found) (program):34
      GET http://holidayletts.com/js/jquery.metadata.min.js 404 (Not Found) (program):34
      GET http://holidayletts.com/js/jquery.maphilight.js 404 (Not Found) (program):34
      GET http://holidayletts.com/js/easyTooltip.js 404 (Not Found) (program):34
      Uncaught TypeError: Cannot read property 'length' of undefined jquery.min.js:32
      Uncaught TypeError: Object # has no method 'maphilight' holidayletts.com:187

      Thanks

  12. mwusaw says:

    Hello, I added the shortcode to the front-page.php coding where I need the slider to appear, and it does not display, it just shows the actual shortcode. The line I am replacing is

    What is the php function to call to get this to load on on the home page?

    Thanks

  13. Jahzara says:

    Hello. I am using your slider with a gallery that contains over 200 images but only about 20 images are showing. Is there a limit to the number of images that can be displayed? Also, is there a way to make all the images the same height as opposed to the same width?

    • Mohsin Rasool says:

      There is no specific limit on number of images. I guess, It is either imposed by the NextGen Gallery or the WordPress.

  14. Micrantha says:

    Hello Mohsin, thank you very much for this realy responsive slider.
    I wonder if there could be a possibility to show captions?

    Regards

    • Mohsin Rasool says:

      Yes, with some modifications. I guess, with caption you mean an overlay over the image. Hints:
      1. Use content slider
      2. adjust width of both image area and content area (I guess, 100%). use .feature-image and .flex_caption classes
      3. Use Position absolute for the content area and move it over the image area (if that is you want). Use .flex_caption class
      4. Style the new caption

  15. Matt M says:

    I have installed the WP plugin and added the following shortcode to my site, but it does not work:

    [nggallery id=2 template="sliderview"]

    Here is the page this is displayed on: http://www.zoefitness.com/slider-test-page/

    Do I need to manually move a php file so that NGG will recognize the theme?

    • Mohsin Rasool says:

      You do not need to move any file.. Just install the plugin and activate it. If the plugin is already activated, I guess, some other plugin is conflicting and overriding the template.

  16. Slawka says:

    Hi, what a beautiful plugin, it made my day! Thanks for sharing it.
    Unfortunately I have two problems with the customization.
    http://www.volpeuva.com/

    1) For some reason the text appears below the photo and not on the left. I tried to add the strip of code you mentioned above but it didn’t help.
    2) Is there any way to fix the height of the photos, and not the width?

    Thanks in advance!

    • Mohsin Rasool says:

      Slawka, I noticed you set the wrong width of contents. Instead of “300″ you should set “260px” for content width. Please do not forget to add “px” at the end.
      Secondly, There is no way to fix the height yet. We will try to add it asap. but I am afraid it wont be available in near future.

      • Slawka says:

        It worked, what a silly mistake, thanks so much :))))
        Keep up with the good work, I look forward to see your next developments (height included). Thanks again!

  17. Hello,

    I have install your plugin but it’s only 4 photos in the slider and i have 6 photos in my nextgen gallery.
    Is it a place to indicate the number of pictures in the slider.
    Thank you for your answer.

    Yours.
    Fabrice Henry.

  18. Jarod says:

    This has been a great and easy to use plugin, but I seem to be having trouble with the “Disable image stretching” option. Neither the check box under the settings option makes any difference, nor does the short code. I’m using a width of 100% for my horizontal images, but vertical images appear too large and even a smaller sized photograph is stretched to the same width. Ideas?

  19. Jarod says:

    Could you tell me how to make the content go below the image? Right now, if I turn on both content and image, I have to specify a large image width to make the content sit below the image, but this then stretches the size of vertical images, even if the disable image stretching box is checked.

    • Mohsin Rasool says:

      Yes, using the CSS. May be something like this.

      .flex-caption {float: none !important;}

      *It is not well tested.

      • Jarod says:

        Thanks, but that didn’t seem to do the trick. However, I did realize that in the css files, you have this:

        .flexslider .feature-image {
        width:50%; }

        I’d like to change the width to 90%, but every time I do, it seems to switch back. What am I doing wrong?

  20. Phill says:

    Hi There,

    First, many thanks for this plugin – it’s been an absolute god send!

    I do have an issue, how do I stop the slideshow pausing when the user hovers over the image/ content area. I am happy to edit the core files if needs be :-)

    Many thanks in anticipation.

    Phill

    • Phill says:

      Hello Again,

      I’ve actually answered my own question – if anyone else comes across this in the future, I opened the file called nextgen-flex-slider-template.php and on line changed ‘pauseOnHover:true’ to ‘pauseOnHover:false’.

      Thanks again for this plugin – it’s great!

  21. Susa says:

    Hi Mohsin,
    this is indeed a great slider – thanks a lot for it!

    I would like to use it both on my homepage (600px image-width and right justified) and on a normal page (300px and centered).

    Is there any way to have individual settings of the slider on each page?

    Thanks a lot in advance for your support.

    Susa

    • Mohsin Rasool says:

      Susan, We are glad that you liked this plugin.

      You can use additional shortcode attributes outlined above to change any default settings of flex slider for individual sliders (You would change width here). You may also want to change CSS (for centering or alignment, in your case) using the body_class feature (I believe, “.home” and “.page” in your case). I hope it makes sense for you.

  22. Patrick says:

    Hi, thanks for your plugin. I have some strange behaviour: When I put the shortcode on a page which is not linked in a menu, the slideshow is not displayed. The source code shows that the li-elements are missing the inline style information. After linking the page to a menu, the inline styles are there and the slideshow is displayed. Any thoughts? See here, the slideshow should be under the single image: http://www.torsten-warmuth.com/exhibitions/past/wintersalon-2012/

    Thanks for your help!

    Best
    Patrick

    • Mohsin Rasool says:

      Your page raising a javascript error “Cannot read property ‘left’ of undefined” in file “navigation-border.js” at line 20 which stops further execution. That is why you are not seeing slider. You need to fix this error.

  23. Phill says:

    Hi Mohasin,

    Thanks again for the plugin. There appears to be an issue when viewed on an ipad. If you click on the slideshow, it just halts. I notice that you can ‘swipe’ through the images, but there is no indication that this functionality is available.

    Is there any way to stop it from pausing when the image/ slideshow is touched? I’m happy to edit the JS if needs be.

    Many thanks in anticipation.

    Phill

  24. Randy says:

    I read all the comments and none have addressed the issue I have, which is concerning. I’ve sized all of my images to 645(w)X400(h). I created a new NG gallery and imported my images into that gallery. The slider does appear, however when each new image displays it seems to move the page down maybe 200px then display the image. Somewhat hard to explain in text [http://frupmle.net/pks/weddings]. My shortcode looks like this: “[nggallery id=3 template="sliderview"]”
    I have also ticked this box “Disable image stretching. If images are pixelated pease check this option.” For “Content Width” in the set-up screen I have 400px, however this doesn’t seem to make any difference if it’s set or not. Does anyone have any suggestions?
    Thanks!

    • Mohsin Rasool says:

      The link you provided is not working. I guess, Theme or Plugin is interfering with the slider

  25. Federica M says:

    hello!
    I am using the plugin Responsive NextGEN Flex Slider Template with the code [nggallery id=x template="sliderview"] this plugin is perfect for what I need but I can’t make it work. I have follow the tutorial above and read all the file necessary to use it but when I copy and paste the code into my page nothing appear, there is no gallery. The strange thing is if I use the code [nggallery id=x template="3dfluxsliderview"] i am able to see my gallery.
    Can you please help me? What can be the problem?

    thanks

  26. linda says:

    Hi
    I read all the comments and none have addressed the issue I have, which is concerning.
    i want to have the photo and text with together just like this picture (http://s-plugins.wordpress.org/nextgen-flex-slider-template/assets/screenshot-1.png?rev=670289) but i cant manage it and it doesn’t work i want pagination shows on slider and have control on slider moving with pagination (next,prev). would u plz help me? what should i do?

    • Mohsin Rasool says:

      Please make sure your theme or other installed plugins are not interfering with slider’s Javascript and/or CSS.

  27. Pär says:

    Is there any way to make a slideshow based on a certain tag?

    I am looking for something like:
    [nggallery tag=x template="sliderview"]

    This would be very useful if you have a lot of galleries but only want a selected few in the slider at the front page. Instead of making duplicates of your images to a new album, you could just give some images a tag.

    Thanks for a great plugin!

  28. Deba says:

    Hi Mohsin,

    Thanks for this nice plugin.

    May we have more control buttons like Play/Pause, Fullscreen etc. appear as an overlay on the slideshow?

    Thanks.

  29. Hi,
    I’m using the slider with the Maximus theme, and cannot seem to get the padding removed from the top and left. Any suggestions? I’ve added the following to the css:

    .flexslider {border: 0 !important; box-shadow: none !important;}
    .flexslider .slides{padding 0 !important; }

  30. that still doesn’t seem to remove it :/ Any other ideas?
    http://obisig.co/

    • Mohsin Rasool says:

      Amanda, part of previous code is working for me. I have added additional tweaks to make it look better

      .flexslider {box-shadow:none !important;}
      .flexslider .slides{padding 0 !important;background-color: transparent !important; }

  31. should i add all of these? or just the new ones?
    .flexslider {border: 0 !important; box-shadow: none !important;}
    .flexslider .slides{padding 0 !important; }
    .flexslider {margin: 0 !important; padding:0 !important;}
    .flexslider .slides {margin: 0 !important; padding:0 !important;}
    .flexslider {box-shadow:none !important;}
    .flexslider .slides{padding 0 !important;background-color: transparent !important; }

  32. Fiefscent says:

    any chance you will be updating the plugin to work with the ‘new’ nggallery (Version 2.0.40) and WP 3.8?

  33. Genesis says:

    how can i include this without using the shortcode? i want to put it inside my working file. Thanks.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>