Question

edit
Re-writing most of this post as I’ve made some improvements to the code and wrapped my brain around the issue… This slider is meant to be responsive and fluid, which the sliding elements are, however during resizing the active element is out of alignment.

To see the issue:

1. select the number 2 menu item
2. wait for slider to move to the second scene
3. resize the screen. You’ll notice the second and third scene are both visible!

jsfiddle here

I can’t seem to figure out how to move the margin by the amount of pixels resized. I’m about to start looking for a resize(window).before & resize(window).after! Maybe there is a better way… Please let me know.

Thanks.

HTML:

<div id='main'>
    <div id="introAnime">
        <div class='sliderNav prevNext'>
            <button data-dir='prev' class='left'><span><</span></button>
            <button data-dir='next' class='right'><span>></span></button>
        </div>

    <div class='sliderNav sceneBtns'>
        <button data-dir='1'>1</button>
        <button data-dir='2'>2</button>
        <button data-dir='3'>3</button>
    </div>
        <div class="sliderContent">
            <ul>
              <li class="">1<div class="showScene"></div></li>
              <li class="">2<div class="showScene"></div></li>
              <li class="">3<div class="showScene"></div></li>
            </ul>
        </div>
    </div>
</div>​

JS:

$(window).resize(function() {

  grabVars();
  $('.showScene').css({
    'width' : contWidth + 'px'
  });
  naviSetup();

});

$(document).ready(function(){
    grabVars();
    naviSetup();
    animeSetup();

    $('.sliderNav').find('button').on('click', function(){
        moveTo = $(this).data('dir');
        move(moveTo);
    });
});

function grabVars(){
    introAnimeWidth = $('#introAnime').width();
    contWidth = $('.sliderContent').width();
    contHeight = $('.sliderContent').height();
    numScenes = $('.showScene').length;
    sceneMarginLeft = $('.sliderContent ul')
        .css('margin-left').replace('px','');
}
function naviSetup(){
    $('.sliderNav').show();
    $('.prevNext .right').css({
        'left' : ((introAnimeWidth - 43) + 'px')
    });
    sceneBtnsLeft = (introAnimeWidth - $('.sceneBtns').width())/2;
    $('.sceneBtns').css({
        'left' : sceneBtnsLeft
    });
}
function animeSetup(){
    $('.sliderContent').css({
        'overflow' : 'hidden'
    });
    $('.showScene').css({
        'width' : contWidth + 'px',
        'height' : contHeight + 'px'
    });
}
function move(moveTo){
    grabVars();
    if (moveTo == 'next')
    {
        if ( sceneMarginLeft <= (-1) * ((1*numScenes) - 1) * (contWidth*1) )
        {
            moveValue = 0;
        }
        else
        {
            moveValue = sceneMarginLeft - contWidth;
        }
    }
    else if (moveTo == 'prev')
    {
        if ( sceneMarginLeft >= 0 )
        {
            moveValue = (-1) * ((1*numScenes) - 1) * (contWidth*1);
        }
        else
        {
            moveValue = (1*contWidth) + (1*sceneMarginLeft);
        }
    }
    else
    {
        moveValue = -((moveTo-1) * contWidth);
    }

    $('.sliderContent ul').animate({
        'margin-left' : moveValue + 'px'
    }, 'slow');


}​

CSS:

#main{
    width: 80%;
    margin: auto;
}
#introAnime{
    width: 100%;
    position: relative;
    height:300px;
    border: 2px solid #cccccc;
    margin-bottom: 5%;
    margin-top: 2%;
    border-radius: 20px;
      box-shadow:
        1px 1px 0 0 #014D06,
        2px 2px 0 0 #014D06,
        3px 3px 0 0 #014D06,
        4px 4px 0 0 #014D06,
        5px 5px 5px 0 #000000;
}
.showScene{
    height: 200px;
    width: 680px;
}
#introAnime ul li:nth-child(1){
    background-color: #669900;
}
#introAnime ul li:nth-child(2){
    background-color: blue;
}
#introAnime ul li:nth-child(3){
    background-color: orange;
}
.sliderContent{
    overflow: scroll;
    margin: 50px;
    color:#ffffff;
    text-size: 3em;
}

.sliderContent ul {
    width: 10000px;
    height: 100%;
    list-style: none;

}
.sliderContent ul li{
    float:left;
    list-style-type: none;
}
.sliderNav{
    position: absolute;
    display: none;

}
.sliderNav button{
    cursor: pointer;
}
.prevNext {
    top: 255px;
}
.prevNext button{
    width: 40px;
    height: 40px;
    color: #ffffff;
    font-size: 1.5em;

}
.prevNext .left{
    position: absolute;
    border-bottom-left-radius: 20px;
    border-top-right-radius: 20px;
    left: 5px;

}
.prevNext .right{
    position: absolute;
    border-bottom-right-radius: 20px;
    border-top-left-radius: 20px;
    left: 737px;

}
.sceneBtns{
    border: 2px solid #cccccc;
    padding: 5px;
    border-top: 0px;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    left: 195px;
}
.sceneBtns button{
    background-color: #ffffff;
    border: none;
    font-size: 10pt;
    color: #669900;
    padding-left: 10px;
    padding-right: 10px;
}
.sceneBtns button:nth-child(1){
    border-right: 2px solid #669900;

}
.sceneBtns button:nth-child(2){
    border-right: 2px solid #669900;

}​

Answer 1

Fixed and updated fiddle!

Key was to keep track of the active sliding element and call a function from the window resize that sets the ul margin based on the new width and active slide as below:

function resizeMargin(){
    $('.sliderContent ul').css({
        'margin-left' : -1*(activeSlide-1)*contWidth + 'px'
    });        
}