Tuesday, February 4, 2014

How to create multiple row carousel on FlexSlider

I am using flexslider on one of the page I'm working on but got in to problem when the carousel would need to be in two(2) rows. The problem is that there's no available option on flexslider to do it. So, what I did is to do a work around on my own. Please see below of what I did.

First, I set the basic carousel config on flexslider, this is the carousel in one(1) row. Please take note that you need to load the flexslider plugin on your page, you can download it here - http://www.woothemes.com/flexslider/.

$(window).load(function() {
    var itemCnt = 5; // this will be the number of columns per row
    var iWidth = parseFloat($('.flexslider').width() / itemCnt);
    $('.flexslider').flexslider({
        animation: "slide",
        slideshowSpeed: 1000,
        animationSpeed: 300,
        animationLoop: false,
        directionNav: false,
        slideshow: false,
        touch: true,
        itemWidth: iWidth,
        minItems: itemCnt,
        maxItems: itemCnt
    });
});


Next, is to create a function that will create 2 rows from the basic 1 row slider carousel and this will be called on start function of the slider.

function make2Rows(iWidth) {
    var iHeight = parseFloat($('.flexslider .slides > li').height());
    $('.alliance-list .slides > li').css('width', iWidth+'px');
    $('.alliance-list .slides > li:nth-child(even)').css('margin', iHeight+'px 0px 0px -'+iWidth+'px');
}

$(window).load(function() {
    var itemCnt = 5; // this will be the number of columns per row
    var iWidth = parseFloat($('.flexslider').width() / itemCnt);
    $('.flexslider').flexslider({
        animation: "slide",
        slideshowSpeed: 1000,
        animationSpeed: 300,
        animationLoop: false,
        directionNav: false,
        slideshow: false,
        touch: true,
        itemWidth: iWidth,
        minItems: itemCnt,
        maxItems: itemCnt,
        start: make2Rows(iWidth)
    });
});


That's it and hope this would help anyone who are using flexslider as carousel.

46 comments:

  1. Hello Paul,
    I have tried your approach, and I am sorry that it does not seem to work just fine: if you group the n slides in 2 rows, then you will have half the navigation steps... For example: with normal flexslider, if you count on 4 slides and "move: 1" (sliding one each time "next" button is pressed), you will b able to press it 3 times. With your approach, yes, you will get 2 rows, but if you press the "next" button 2 or 3 times, you will get an empty area as there are not more slides to show...

    Have you done a workaround on this issue??
    Nice job, by the way.

    ReplyDelete
  2. Yes, and that is why you need to set the directionNav to false and set manualControls so you have control over it. What I did is to set manualControls: ".flex-control-nav li a" then manually populate the control nav based on the number of slides I have.. On your example, your control nav would have 1 slide and it will look something like this..

    <ol class="flex-control-nav flex-control-paging"> 
    <li class="visible"><a class="flex-active">1</a></li> 
    </ol> 

    then you need to set your directionNav to check on what is active on your manualControls as below.

    $(function() {
            $('.flex-next').click(function(e) {
                e.preventDefault();
                $('.flex-prev.flex-disabled').removeClass('flex-disabled');
                $('.flexslider').flexslider('next');
                if ($('.flex-control-nav li.visible a:last').hasClass('flex-active'))
                    $(this).addClass('flex-disabled');
            });

            $('.flex-prev').click(function(e) {
                e.preventDefault();
                $('.flex-next.flex-disabled').removeClass('flex-disabled');
                $('.flexslider').flexslider('prev');
                if ($('.flex-control-nav li.visible a:first').hasClass('flex-active'))
                    $(this).addClass('flex-disabled');
            });
        });

    Hope this help a lot.

    ReplyDelete
    Replies
    1. The script above will check whether your manual control is already on the last slide by checking if the element hasClass('flex-active'). Thanks!

      Delete
    2. I have issue on this step. I can able to see two rows. but, my some of slides are empty.

      Delete
  3. do either of you have a working example I could look at.

    ReplyDelete
    Replies
    1. I do have but it's not accessible publicly and sorry I can't give you credential to get in. thanks!

      Delete
  4. strange, have 12 images and 6 column in a row, it should show 2 rows with 6 images each row but it shows all in first slide and then have empty slide next. What is it that I miss?

    ReplyDelete
    Replies
    1. Can you give me the URL to your site so I can check what's missing?

      Delete
  5. Hey, is your itemCnt set to 6? What are the changes you did from the post I have in here?

    ReplyDelete
  6. Same problem as all, the pagination of the carousel continue like there's no double row, so if i have 20 element with itemCnt=5 (so i have 10item per page) i see 2 page with all item and another 2 empty page

    ReplyDelete
  7. Thanks paul...Its working for me..

    ReplyDelete
    Replies
    1. great to know that i was able to help. thanks!

      Delete
  8. Hi

    How I can make flex-direct-nav ?
    because the default arrows scroll too much.

    ReplyDelete
    Replies
    1. Not sure of your question but please see below, this might help..

      Yes, and that is why you need to set the directionNav to false and set manualControls so you have control over it. What I did is to set manualControls: ".flex-control-nav li a" then manually populate the control nav based on the number of slides I have.. On your example, your control nav would have 1 slide and it will look something like this..

      <ol class="flex-control-nav flex-control-paging">
      <li class="visible"><a class="flex-active">1</a></li>
      </ol>

      then you need to set your directionNav to check on what is active on your manualControls as below.

      $(function() {
      $('.flex-next').click(function(e) {
      e.preventDefault();
      $('.flex-prev.flex-disabled').removeClass('flex-disabled');
      $('.flexslider').flexslider('next');
      if ($('.flex-control-nav li.visible a:last').hasClass('flex-active'))
      $(this).addClass('flex-disabled');
      });

      $('.flex-prev').click(function(e) {
      e.preventDefault();
      $('.flex-next.flex-disabled').removeClass('flex-disabled');
      $('.flexslider').flexslider('prev');
      if ($('.flex-control-nav li.visible a:first').hasClass('flex-active'))
      $(this).addClass('flex-disabled');
      });
      });

      Delete
  9. Great artical, I unfortunately had some problems printing this artcle out, The print formating looks a little screwed over, something you might want to look into. sf design agency

    ReplyDelete
  10. Hey, you used to write wonderful, but the last few posts have been kinda boring… I miss your tremendous writings. Past few posts are just a little out of track! come on! iphone device template

    ReplyDelete
  11. Thank you a bunch for sharing this with all folks you actually recognise what you’re speaking approximately! Bookmarked. Kindly also discuss with my website =). We will have a hyperlink change arrangement between us! ipad sketch

    ReplyDelete
  12. I want to start a blog written by a fictitious character commenting on politics, current events, news etc..How?. https://technologyrest.com/how-to-find-a-village-in-minecraft/

    ReplyDelete
  13. I am typically to running a blog and i actually admire your content. The article has really peaks my interest. I am going to bookmark your site and preserve checking for new information. cell phone hacking services

    ReplyDelete
  14. living rooms should be decorated with style that is why i always get some living room decoration idea on the internet* cash for xmas payday loan from UnitedFinances

    ReplyDelete
  15. You could not enter into great depth, however you presented the necessities I desired to get help me thru. Was I ever really surprised to locate your blog. Please continue on your quest. patente di guida italiana

    ReplyDelete
  16. The Most Important information. 100% Privacy Protected!. Buy USA Passport 99% Match on Second Passport

    ReplyDelete
  17. Heya i’m for the first time here. I found this board and I find It truly useful & it helped me out a lot. I hope to give something back and help others get now safe from UnitedFinances bad credit personal loans guaranteed approval $5,000

    ReplyDelete
  18. La nostra specialità nella produzione di patenti di guida in Italia è organizzata e specifica in questo modoAcquista la Patente a Europea C1
    Patente categoria C1 a Verona senza esame
    Comprare patente Categoria C1 a Napoli

    ReplyDelete
  19. Being realistic, there are many successful "commercial" print models that would have really loved to have been a high fashion editorial model, but they never had that opportunity. Once again, models are subject to other's opinions and standards that control their career's general success. There are things that models can do to increase their "editorial" skills and "look", though, but there are just some models who will never get their chance at editorial modeling even though they may be uniquely beautiful, outwardly gorgeous, or even perfectly reach the standard sizes required of editorial models. It's not easy to compete with the concept of "editorial" beauty, so your modeling career should be balanced if you strive for such a "prestigious" role. If the editorial modeling style is what you think you really want to do, you need to remember that those editorials may not pay your bills alone in itself, so that's an area where a model should be well-rounded and versatile in many other types of modeling that can help supplement their income. There usually is no time for a busy fashion editorial model to have another job because a model has to be very flexible with their time for going on bookings, go-sees, fittings, etc. Establishing a back-up savings of money even in the early stages of a modeling career is crucial to hold you over as you build your career. Celina Landari

    ReplyDelete
  20. Birds For Sale

    Birds For Sale Online. Birds For Sale

    Ostrich For Sale. Orders Based On The Current Market Demand In Each Country. Ostrich For Sale

    Chicken For Sale. Orders Based On The Current Market Demand In Each Country. Chicken For Sale

    Falcon For Sale Online. Falcon For Sale

    ReplyDelete
  21. commence flooding your current inbox as well as snail-mail box having hundreds of no interest APR credit card offers right after the holiday season https://saratogapartnership.org/

    ReplyDelete
  22. It has been found out, that the more a person delays the treatment for his sexual problems, the more complicated they start to become. WHERE TO BUY ORAL AND INJECTABLE STEROIDS ONLINE

    ReplyDelete
  23. *Spot on with this write-up, I truly think this website needs much more consideration. I’ll probably be again to read much more, thanks for that info. paragard iud removal side effects

    ReplyDelete
  24. People visit one or more casinos to play poker and over the years, advancing technology has improved the popularity and platform of the game. Luckyland Slots Free SC

    ReplyDelete
  25. You got a very excellent website, Glad I noticed it through yahoo. UnitedFinances most trusted 500 dollar loans

    ReplyDelete
  26. There were countless one liners that made me chuckle or laugh. Travel From Lima To Cusco

    ReplyDelete
  27. oh i just hate the fat pads that i got, my fat pad is just genetics so i can’t do anything about it** ラブドール

    ReplyDelete
  28. i love to receive birthday cards specially if they are custom built birthday cards** Premier Protein Shakes

    ReplyDelete
  29. i have a brother that is autistic and we love him so much and gave all of our support on him., What is Roulette

    ReplyDelete
  30. Thank you a lot for sharing this with all people you actually recognise what you are talking about! Bookmarked. Kindly also discuss with my website =). We will have a link trade arrangement between us! leganes actualidad

    ReplyDelete
  31. This is a great blog and i want to visit this every day of the week .    VICTORIA FAKE DRIVERS LICENCE

    ReplyDelete
  32. Exceptional brief and this post helped me a lot. Give you thanks We looking for your details?-. send flowers Greece

    ReplyDelete
  33. Traditionally growing mushrooms inside is a faster process, however it can be done outdoors successfully too. Some folks prefer to create a "mushroom house" similar to a chicken coop, or a mini greenhouse. Mushrooms do best in a darker and cool, moist and humid environments; so a basement is often an option. But make sure it is not in a draft, a direct line of the heat (or AC) when it kicks on, or direct sunlight. Most grow best at 55 to 60 degrees F, and some species like the Enoki do well with even lower temperatures, down to about 45 degrees F. Some people even prefer to grow their mushrooms in the kitchen, in the cupboard underneath the kitchen sink. Depending on the temperatures, you really can grow mushrooms year round, and have a fresh supply for your cooking, salads and sauces.. Shafaa Macrodosing Magic Mushroom Milk Chocolate Edibles

    ReplyDelete
  34. You made some decent points there. I looked online for that problem and found most people goes coupled with with all your website. Ac repair Las Vegas

    ReplyDelete
  35. My friend first found your blog on Google and she referred your blog to me.,”..’ MRF Tyre Dealership

    ReplyDelete
  36. Real instructive and excellent complex body part of written content , now that’s user friendly (:. pencil packing job

    ReplyDelete
  37. the table beds which we have a year ago had already broken down, it is mostly made up of plastic,. One Pearl Bank Showroom

    ReplyDelete
  38. we love watching Dancing with the stars, the actresses and actors that joins it are nice- Sky Eden

    ReplyDelete
  39. Interesting blog! Is your theme custom made or did you download it from somewhere? A theme like yours with a few simple tweeks would really make my blog jump out. Please let me know where you got your design. With thanks Sophia Regency showflat

    ReplyDelete
  40. The when I just read a weblog, I really hope who’s doesnt disappoint me about that one. After all, I know it was my option to read, but I personally thought youd have some thing interesting to state. All I hear is often a lot of whining about something you could fix if you ever werent too busy looking for attention. reef at king's dock

    ReplyDelete

Leadership 101


  • Leadership demands sacrifices for the near-term to receive lasting benefits. the longer we wait to make sacrifices, the harder they become. Successful people make important decisions early in their life, then manage those decisions the rest of their lives.
  • Growth does not happen by chance. If you want to be sure to grow, you need a plan something strategic, specific, and scheduled. it's a discipline that would need incredible determination from us.
  • Success comes by going the extra mile, working the extra hours, and investing the extra time. The same is true for us. If we want to get to excel in any segment of life, a little extra effort can help. Our efforts can go a long way if we only work a little smarter, listen a little better, push a little harder, and persevere a little longer.
  • Making a difference in your work is not about productivity; it's about people. When you focus on others and connect with them, you can work together to accomplish great things.
  • Envision a goal you'd like to reach. Make it big enough to scare you a little. Now write down a plan for moving toward it. Create mini-goals within the big goal, to set yourself up for continual progress. And include some risks, too. Set yourself up for success.
  • Leaders build margins, not image. A leader may be forced to take unpopular stands for the good of the company. Popularity isn't bad, but decisions made solely on the basis of popular opinion can be devastating. So take courage and make the right though sometimes painful choices.