创建使用jQuery但不使用插件单击“下一个/上一个”时移动的响应式滑块

Question

I've been trying to make a responsive slider and changes the image in the viewport when a user clicks the "next" or "previous" buttons. I also have dots indicating which picture the user is looking at, and I've been able to get that to change properly on click (though, it's certainly not the most "dry" code).

I'm stumped on how to move the "innerCaro" the proper amount when someone clicks either "previous" or "next." I've tried a few things (trying to figure out the position of the caro at any given time and moving it depending on the position.), but nothing has worked.

Also, I can't use any plugins for this.

Here's a Codepen of what I have so far.

And here is the code:

CSS

.outercaro {
  width:66vw;
  overflow:hidden;
  position:relative;
}
.innerCaro {
    list-style:none;
    position:absolute;
    top:0;
    transition:all 1s ease;
    width: 700%;
    }
.dotContainer {
  width:21vw;
  margin:0 auto;
  height:3.91vw;    
}

.caroIMG {
    width:100%;
    float: left;
}

.innerCaro li {
    width: 66vw;
    float: left;
}

.dot {
  height:1vw;
  width:1vw;
  border-radius:50%;
  float:left;
  margin:1vw 1vw;
  background-color:#fff;
  cursor:pointer;
}

.dot:hover {
  background-color:#4D4D4E;
}
.activeDot {
    background-color:#4D4D4E;   
}

HTML

<div class='outerCaro' style='width:66vw;overflow:hidden;position:relative;'>
        <ul class='innerCaro'>
            <li>
        <img class="caroIMG" src="//images.crateandbarrel.com/is/image/Crate/dHP_NwArrvls2trSrv_160701?wid=1228&qlt=50,0" alt=''>
            </li>

            <li>
        <img class="caroIMG" src="//images.crateandbarrel.com/is/image/Crate/dHP_NwArrvlsCeleste_160701_JL16?wid=1228&qlt=50,0" alt=''>
            </li>

            <li>
        <img class="caroIMG" src="//images.crateandbarrel.com/is/image/Crate/dHP_NwArrvlsEgypt_160701?wid=1228&qlt=50,0" alt=''>
            </li>

            <li>
        <img class="caroIMG" src="//images.crateandbarrel.com/is/image/Crate/dHP_NwArrvlsGeoffrey_160701_OMN16?wid=1228&qlt=50,0" alt=''>
            </li>

            <li>
        <img class="caroIMG" src="//images.crateandbarrel.com/is/image/Crate/dHP_NwArrvlsMarin_160701_OMN16?wid=1228&qlt=50,0" alt=''>
            </li>

            <li>
        <img class="caroIMG" src="//images.crateandbarrel.com/is/image/Crate/dHP_NwArrvlsSonata_160701?wid=1228&qlt=50,0" alt=''>
            </li>
            <li>
        <img class='caroIMG' src="//images.crateandbarrel.com/is/image/Crate/dHP_NwArrvlsSrvng_160701_JL16?wid=1228&qlt=50,0" alt="">
            </li>
        </ul>
        <div style='width:66vw;height:3.42vw;bottom:2%;position:absolute;'>
            <div class='dotContainer' style='width:21vw;margin:0 auto;height:3.91vw;'>
                <div id='dot1' class='dot activeDot'></div>
                <div id='dot2' class='dot'></div>
                <div id='dot3' class='dot'></div>
            <div id='dot4' class='dot'></div>
            <div id='dot5' class='dot'></div>
            <div id='dot6' class='dot'></div>
            <div id='dot7' class='dot'></div>
          </div>
        </div>
        <div style='width:66vw;height:3.42vw;bottom:40%;position:absolute;'>
            <div class='prevBtn' style='display:inline-block;float:left;cursor:pointer'>
                <img src="//images.crateandbarrel.com/is/image/Crate/arrow_Gray_LEFT?&fmt=png-alpha" alt="" />
            </div>
        <div class='nextBtn' style='display:inline-block;float:right;cursor:pointer'>
            <img src="//images.crateandbarrel.com/is/image/Crate/arrow_Gray_RIGHT?&fmt=png-alpha" alt="" />
        </div>
      </div>
    </div>
</div>

jQuery

var $caroHeight = $('.caroIMG').css('height');
    $('.outerCaro').delay(1000).css('height', $caroHeight);

$(window).resize(function() {
      $caroHeight = $('.caroIMG').css('height');
      $('.outerCaro').css('height', $caroHeight);
    });

$('#dot1').click(function(){
      $('.dot').removeClass('activeDot');
      $(this).addClass('activeDot')
      $('.innerCaro').css('margin-left', '0px');
    })
    $('#dot2').click(function(){
      $('.dot').removeClass('activeDot');
      $(this).addClass('activeDot')
      $('.innerCaro').css('margin-left', '-100%');
    })
    $('#dot3').click(function(){
      $('.dot').removeClass('activeDot');
      $(this).addClass('activeDot')
      $('.innerCaro').css('margin-left', '-200%');
    })
    $('#dot4').click(function(){
      $('.dot').removeClass('activeDot');
      $(this).addClass('activeDot')
      $('.innerCaro').css('margin-left', '-300%');
    })
    $('#dot5').click(function(){
      $('.dot').removeClass('activeDot');
      $(this).addClass('activeDot')
      $('.innerCaro').css('margin-left', '-400%');
    })
    $('#dot6').click(function(){
      $('.dot').removeClass('activeDot');
      $(this).addClass('activeDot')
      $('.innerCaro').css('margin-left', '-500%');
    })
    $('#dot7').click(function(){
      $('.dot').removeClass('activeDot');
      $(this).addClass('activeDot')
      $('.innerCaro').css('margin-left', '-600%');
    })

Any help is greatly appreciated!

Answer 1

Here's a Codepen with the working arrows.

Could also be more dry!

Here's the code:

CSS unchanged

HTML changes:

<div class='dotContainer' style='width:21vw;margin:0 auto;height:3.91vw;'>
  <div dot-index='1' class='dot activeDot'></div>
  <div dot-index='2' class='dot'></div>
  <div dot-index='3' class='dot'></div>
  <div dot-index='4' class='dot'></div>
  <div dot-index='5' class='dot'></div>
  <div dot-index='6' class='dot'></div>
  <div dot-index='7' class='dot'></div>
</div>

Js changes:

Added maxDotIndex to check if our target will be past the last picture

var $maxDotIndex = $('.dot:last-child').attr('dot-index');

Clicking on a dot...

$('.dot').click(function(){
  var currentDot = $('.activeDot');
  var currentDotIndex = currentDot.attr('dot-index');
  var targetDot = $(this);
  var targetDotIndex = targetDot.attr('dot-index');

  if (currentDotIndex == targetDotIndex) {
    return
  } else {
    currentDot.removeClass('activeDot');
    targetDot.addClass('activeDot');
    var margin = ((targetDotIndex - 1) * -100) + '%';
    $('.innerCaro').css('margin-left', margin); 
  }
})

Clicking on the arrows...

$('.nextBtn').click(function(){
  var currentDot = $('.activeDot');
  var currentDotIndex = currentDot.attr('dot-index');

  if (currentDotIndex == $maxDotIndex) {
    return
  } else {
    var targetDotIndex = (parseInt(currentDotIndex) + 1);
    var dotSelector = ".dot[dot-index='"+ targetDotIndex + "']";
    var targetDot = $(dotSelector);
    currentDot.removeClass('activeDot');
    targetDot.addClass('activeDot');
    var margin = ((targetDotIndex - 1) * -100) + '%';
    $('.innerCaro').css('margin-left', margin);
  }
})

$('.prevBtn').click(function(){
  var currentDot = $('.activeDot');
  var currentDotIndex = currentDot.attr('dot-index');

  if (currentDotIndex == 1) {
    return
  } else {
    var targetDotIndex = (parseInt(currentDotIndex) - 1);
    var dotSelector = ".dot[dot-index='"+ targetDotIndex + "']";
    var targetDot = $(dotSelector);
    currentDot.removeClass('activeDot');
    targetDot.addClass('activeDot');
    var margin = ((targetDotIndex - 1) * -100) + '%';
    $('.innerCaro').css('margin-left', margin);
  }
})