treehouse : what would you like to learn today?
Web Design Web Development iOS Development

AnythingSlider with expand: true not resizing for wider screen

  • Hi all,

    I've got a slider here: http://www.trismi.com/so/index.html

    I've initialized the slider with the following parameters:

      {
                 mode: "horizontal",
                 expand: true,
                 resizeContents: false,
                 buildNavigation:false,
                 buildStartStop: false,
                 onInitialized: function()
                 {
                  var slideTemp = $('#mobile-slider').data('AnythingSlider');
                   $('.page-counter').text( slideTemp.currentPage + " / " + slideTemp.pages  );   
    
                 },
                 onSlideComplete: function()
                 {
                   //sets up the x of x pages count
                   var slideTemp = $('#mobile-slider').data('AnythingSlider');
                   $('.page-counter').text( slideTemp.currentPage + " / " + slideTemp.pages  );   
    
                 }
           }
    

    When I make a screen smaller, the slider resizes appropriately and gets smaller. However, when I make the slider wider (basically, mimicking a phone flipping from portrait to landscape), it doesn't widen to fill the screen, and looks weird because the rest of the screen has a fluid layout that expands to fit the screen. I see the expand demo and it works the way I would expect, so I'm wondering why this doesn't and how to fix it?

    Thanks!