Jump to content
Sign in to follow this  

Slider Recommendation (Slider Pro)

Recommended Posts

Hi Guys

Since I nearly always needed a Slider for my websites, I've searched for a Slider which I could use for every Project or better said for different scenarios. So It had to be a rich-feature, responsive and customizable Slider which could be adapted/changed hassle-free to different needs of customers. In the end I found this nice jQuery Slider Plugin called "Slider Pro" (don't worry, it is MIT licensed :)) which I think fulfills all expectations above and it also works very well for me. Perhaps it is also useful for you.

Github Link: https://github.com/bqworks/slider-pro/

PS: What kind of Sliders are you using for your projects? Do you build your Sliders from scratch?

Greetings Nukro

Share this post

Link to post
Share on other sites


If you care about accessibility (and I think you should), stay away from Slider "Pro"... it's an accessibility nightmare. DIV-soup, no semantic markup, you can't navigate with keyboard, and screenreaders will most likely be confused.

I'm a big fan of Slick. Highly configurable and lightweight.


Edited by dragan
re-phrasing / -wording
  • Like 1

Share this post

Link to post
Share on other sites

I am using owl carousel since many years and it never disappointed me.
You can build some crazy shit with it. slick is great, too.

some requirements for me are:
lazy load for background-images and <img>, events, multiple synced sliders, smooth animations, touch & drag friendly


Share this post

Link to post
Share on other sites
4 hours ago, dragan said:

I'm a big fan of Slick. Highly configurable and lightweight.

I once was a fan of slick too, but I do remember I had some problems with it - I wanted to build a fade transition and the images didn't cleanly cross-fade from a certain build on anymore (I think it was > version 1.5). I switched to Swiper (http://idangero.us/swiper/) since then.

Share this post

Link to post
Share on other sites
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By hacsor
      I have a existing project in Foundation 6 with some jQuery plugins,  and I'm try to move to Processwire, but  it shows a Revolution Slider Plugin error when I open index page .
      How can I solve this?

    • By EyeDentify
      Hello again. Thought i share my way of creating sliders in my ProcessWire websites, by using the images field type and some HTML, JavaScript, CSS and a pinch of love.

      Step One:
      Go to http://flickity.metafizzy.co/ and download Flickity slider. They also have a CDN option for thoose who prefere that. Also have the page handy cause it has alot of usefull info for configuring the slider and such.

      Note: In my example i use jQuery to initialize Flickity but you can use it without, see the website for more info.
      So you need to load jQuery before flickity in the header section for my example to work.   Step Two:

      Here is an example of how you could write some code and HTML for your template file where the slider should render. This code assumes your images field is named images.   <div class="slider-container"> <?PHP /* check if there is any images to display */ if(count($page->images) > 0) { /* render out the images and resize to 700 pixel width */ foreach($page->images AS $key => $image) { echo('<img src="' . $image->width(700)->url . '" class="slider-container-item" alt="' . $image->description . '">'); } } else { echo('<p>Houston we have a problem...there are no images to see here...</p>'); } ?> </div> Also lets put together some simple CSS for our container and items. Alter it to your own needs and preference. For the Flickitys sliders default CSS and configuring see the website.

      .slider-container { position: relative; display: block; overflow: hidden; width: 100%; max-width: 700px; padding: 0; margin-bottom: 15px; clear: both; } .slider-container-item { position: relative; display: block; width: 100%; height: auto; max-width: 700px; } Step Three:
      Put the default CSS and also Flickitys JS files and load jQuery before Flickity in the header of your site so that flickity works as intended. Or use the CDN option mentioned on the flickity website.   <link rel="stylesheet" href="/path/to/flickity.css" media="screen"> <script src="/path/to/jquery.js"></script> <script src="/path/to/flickity.pkgd.min.js"></script> Don´t forget to put the Flickity JavaScript initalization code at the bottom of the template file. For all the Options and configuration see the website: http://flickity.metafizzy.co/   In the example code below i use just a few of the many options.   <script type="text/javascript"> /* initiate Flickity Slider JS */ $(document).ready(function(e){ $('.slider-container').flickity({ // options cellSelector: '.slider-container-item', cellAlign: 'center', imagesLoaded: true, percentPosition: true, contain: true }); }); </script> Note: This is my prefered way of doing it. But there are alternative ways to initialize Flickity if you read the info on the website.   This should be enough to get you started. And with a little imagination i think you could see the potential. Good luck with all your Slider making dreams
    • By lord_dupalski
      I made an image field name slider1 with max of 3 images. uploaded the 3 images for my slider to use on my slider in my homepage.
      but how do i call it one by one? for ex.

      ignore the code for my first item it doesnt work
      but how do i make my slider work? have 3 images uploded on a single image field called slider1
      how do i call each of them , what is the code to be put on img src for each item
    • By suntrop
      Hi! This is my first posting at this forum and I am on my first PW website. The CMS looks pretty cool and I like its approach of handling data. Well, there is just one thing I don't understand or perhaps that way is new to me. The assets management.
      My website (about 100 pages) has a slider with 3 images in its header. As I understand I have to attach an image always to a particular page. If I want to use the same image on another page, I have to upload it again. Right? I can't access it from a field on another page (beside access via TinyMCE).
      Thanks for help!
    • By photoman355
      I've been trying to make a carousel with a repeater field that has an "active" class on the first div.  I found a similar thread here but still can't get it to work.  Most likely me having a dumb moment
      Here's my code:
      <div class="carousel slide <?=$page->position?>"> <h4><?=$page->heading?></h4> <!-- Carousel items --> <div class="carousel-inner"> <?php $output = ''; $class = 'item'; foreach($page->testimonials as $testimonial) { $status = ''; if ($testimonial === $page->testimonials->first()) $status .= ' active'; $class .= $status; $output .= "<div class='{$class}'> <img class='quotes' src='{$config->urls->templates}assets/img/quotes.png'> <p>{$testimonial->body}</p> <h6>{$testimonial->person_name}</h6> </div>"; } echo $output; ?> </div> </div>   Any ideas where I'm going wrong?  
  • Create New...