Returning method?

JavaScript
21

@Pullo ;
@ralph_m ;
@ronpat ;
@chris_upjohn ;

The not so DRY method works, I don’t care if it’s wet.
http://myonlinesmallgroup.com/warren/bxslider/index7.htm

Thank you, ralph.m (The original adviser of bxSlider)
Thank you, ronpat (The very good hint, without his hint I might not proceed tweaking bxSlider)
Thank you, chris.upjohn (Thanks dude)
Thank you, pullo (The Angel)

Without you this will take me 1 month to tweak it alone.

Thanks guys!!!

22

Hey man,

Thanks for the thanks :slight_smile:

I had a look at the code from your final version and felt compelled to rewrite it somewhat to reflect a couple of best practices.

Here’s what I came up with:

<!DOCTYPE HTML>
<html>
  <head>
  <base href="http://myonlinesmallgroup.com/warren/bxslider/">
    <meta charset="utf-8">
    <title>Testing bxSlider</title>
    <link href="jquery.bxslider.css" rel="stylesheet" />
    <link href="css/cw.css" rel="stylesheet" />
    <style>
      h2{ text-align: center }
      .cw-wrapper{ padding-top: 60px; }
    </style>
  </head>

  <body>
    <h2>Tweaking bxSlider...</h2>

    <div class="cw-wrapper">
      <ul class="bxslider1">
        <li><img src="images/chocolate.jpg" /></li>
        <li><img src="images/cotton.jpg" /></li>
        <li><img src="images/marble.jpg" /></li>
        <li><img src="images/icecream.jpg" /></li>
        <li><img src="images/chocolate.jpg" /></li>
        <li><img src="images/cotton.jpg" /></li>
        <li><img src="images/marble.jpg" /></li>
        <li><img src="images/icecream.jpg" /></li>
        <li><img src="images/chocolate.jpg" /></li>
        <li><img src="images/cotton.jpg" /></li>
        <li><img src="images/marble.jpg" /></li>
        <li><img src="images/icecream.jpg" /></li>
      </ul>    
    </div>

    <div class="cw-wrapper">
      <ul class="bxslider2">
        <li><img src="images/chocolate.jpg" /></li>
        <li><img src="images/cotton.jpg" /></li>
        <li><img src="images/marble.jpg" /></li>
        <li><img src="images/icecream.jpg" /></li>
        <li><img src="images/chocolate.jpg" /></li>
        <li><img src="images/cotton.jpg" /></li>
        <li><img src="images/marble.jpg" /></li>
        <li><img src="images/icecream.jpg" /></li>
        <li><img src="images/chocolate.jpg" /></li>
        <li><img src="images/cotton.jpg" /></li>
        <li><img src="images/marble.jpg" /></li>
        <li><img src="images/icecream.jpg" /></li>
      </ul>    
    </div>
    
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script src="jquery.bxslider.js"></script>
    <script>
      (function(){
        function getSliderOpts(){
          return {
            minSlides   : getMinSlides(),
            maxSlides   : 4,
            slideMargin : 4,
            slideWidth  : 250
          }
        } 
  
        function getMinSlides() {
            var width = $(window).width(),
                noSlides = 3;
         
            if (width < 583) {
              noSlides = 2;
            } else if (width > 942) {
              noSlides = 4;
            } 
            
            return noSlides;
        }
        
        function reloadSliders(){
          slider1.reloadSlider(getSliderOpts());
          slider2.reloadSlider(getSliderOpts());
        }
     
        var slider1 = $('.bxslider1').bxSlider(getSliderOpts()),
            slider2 = $('.bxslider2').bxSlider(getSliderOpts()),
            doit;
        
        $(window).resize(function() {
          clearTimeout(doit);
          doit = setTimeout(reloadSliders, 200);            
        });
      })();
    </script>
  </body>
</html>

If you have any questions, just let me know.