Scroll on Resize is Wrong Size
HTML
<div id="carousel">
<div id="slides">
<ul >
<li class="slide-jr" >
<a href="/testimonials/">
<div class="quoteContainer" data-mh="jr-test">
<div class="jr-test-slider-1"><p>With AIS I know that I'm part of a wonderful team of teachers who genuinely care and want to make a difference in a child's life. Sometimes being a vision itinerant feels like being Gilligan ...</p>
</div>
<div class="jr-test-slider-1">-Karen Meyers - Teacher for the Blind and Visually Impaired</div>
</div>
</a>
</li><li class="slide-jr">
<a href="/testimonials/">
<div class="quoteContainer" data-mh="jr-test">
<div class="jr-test-slider-1"><p>While working through AIS I have experienced a lot of professional growth from serving a diverse population of students in a variety of educational settings.</p>
</div>
<div class="jr-test-slider-1">-Michelle Gagnon</div>
</div>
</a>
</li><li class="slide-jr">
<a href="/testimonials/">
<div class="quoteContainer" data-mh="jr-test">
<div class="jr-test-slider-1"><p>I have really enjoyed working as an Allied contractor. The administrative staff have really supported me as a new Orientation and Mobility Specialist. That said, I also have also enjoyed a h ...</p>
</div>
<div class="jr-test-slider-1">-Greg Chittum - Orientation and Mobility Instructor</div>
</div>
</a>
</li><li class="slide-jr">
<a href="/testimonials/">
<div class="quoteContainer" data-mh="jr-test">
<div class="jr-test-slider-1"><p>Nottoway County Public Schools has trusted Allied Instructional Services to provide quality services for the past three years to our students with disabilities. We appreciate their team appr ...</p>
</div>
<div class="jr-test-slider-1">-Joan Dooley, Ed. D. - Director of Exceptional Education - Nottoway County Public Schools</div>
</div>
</a>
</li><li class="slide-jr">
<a href="/testimonials/">
<div class="quoteContainer" data-mh="jr-test">
<div class="jr-test-slider-1"><p>I applied to work at AIS because I had met Karen Vay a few months before I graduated college at a conference and she talked to me about the company. Her kindness stuck with me and I decided ...</p>
</div>
<div class="jr-test-slider-1">-Tiffany Jones - Teacher of the Blind/Vision Impaired</div>
</div>
</a>
</li><li class="slide-jr">
<a href="/testimonials/">
<div class="quoteContainer" data-mh="jr-test">
<div class="jr-test-slider-1"><p>Being connected with AIS has helped me navigate my transition from working in a private practice to the public school system. AIS has supported me by helping me apply my experience and skill ...</p>
</div>
<div class="jr-test-slider-1">-Macy Grathwol, M.S.Ed, CCC-SLP - Speech-Language Pathologist</div>
</div>
</a>
</li><li class="slide-jr">
<a href="/testimonials/">
<div class="quoteContainer" data-mh="jr-test">
<div class="jr-test-slider-1"><p>I love being a subcontractor with Allied Instructional Services because I always feel like I'm being supported in my professional and educational growth. Being a part of the team and having ...</p>
</div>
<div class="jr-test-slider-1">-Ashley Froy - Teacher of the Blind/Vision Impaired</div>
</div>
</a>
</li><li class="slide-jr">
<a href="/testimonials/">
<div class="quoteContainer" data-mh="jr-test">
<div class="jr-test-slider-1"><p>I love working for AIS. This is my second year and so far, I have been happier and felt more appreciated than the fifteen previous years that I have worked in the public schools. AIS is grea ...</p>
</div>
<div class="jr-test-slider-1">-Ryan Tobin - Teacher of the Deaf/HH</div>
</div>
</a>
</li>
</ul>
</div>
</div>
<div class="pagination1"><div class="btn-bar" id="buttons"><div class="page-button1"><div class="page-item1"><a id="prev" href="#">Previous Testimonial</a></div></div><div class="page-button1"><div class="page-item1"><a id="next" href="#">Next Testimonial</a></div></div></div></div>
CSS
body {background:black;}
.pagination1 {
width: 70%;
display: block;
margin: 15px auto 0 auto;
}
.page-button1 {
width: 50%;
float: left;
}
.page-item1 {
border: 1px solid #ffffff;
border-radius: 5px;
text-align: center;
width: 200px;
float: none;
padding: 10px;
display: block;
margin: auto;
}
.page-item1 a {
text-decoration: none;
color: #ffffff;
font-weight: bold;
}
.slide-jr a {
color: #ffffff;
font-size: 20px;
font-style: italic;
text-decoration: none;
}
.slide-jr {
display: flex;
flex-direction: column;
justify-content: center;
resize: vertical;
}
#carousel {
position: relative;
width:100%;
margin:0 auto;
background: black;
}
#slides {
overflow: hidden;
position: relative;
width: 100%;
}
#slides ul {
list-style: none;
width:100%;
margin: 0;
padding: 0;
position: relative;
}
#slides li {
width:100%;
float:left;
text-align: center;
position: relative;
}
.quoteContainer {
padding: 0 2px;
}
JAVASCRIPT
jQuery(window).bind("load resize",function () {
//rotation speed and timer
var speed = 5000;
var run = setInterval(rotate, speed);
var slides = jQuery('.slide-jr');
var container = jQuery('#slides ul');
var elm = container.find(':first-child').prop("tagName");
var item_width = jQuery('#carousel').width();
var previous = 'prev'; //id of previous button
var next = 'next'; //id of next button
slides.width(item_width); //set the slides to the correct pixel width
container.parent().width(item_width);
container.width(slides.length * item_width); //set the slides container to the correct total width
container.find(elm + ':first').before(container.find(elm + ':last'));
resetSlides();
//if user clicked on prev button
jQuery('#buttons a').click(function (e) {
//slide the item
if (container.is(':animated')) {
return false;
}
if (e.target.id == previous) {
container.stop().animate({
'left': 0
}, 1500, function () {
container.find(elm + ':first').before(container.find(elm + ':last'));
resetSlides();
});
}
if (e.target.id == next) {
container.stop().animate({
'left': item_width * -2
}, 1500, function () {
container.find(elm + ':last').after(container.find(elm + ':first'));
resetSlides();
});
}
//cancel the link behavior
return false;
});
//if mouse hover, pause the auto rotation, otherwise rotate it
container.parent().mouseenter(function () {
clearInterval(run);
}).mouseleave(function () {
run = setInterval(rotate, speed);
});
jQuery( window ).resize(function () {
clearInterval(run);
run = setInterval(rotate, speed);
});
function resetSlides() {
//and adjust the container so current is in the frame
container.css({
'left': -1 * item_width
});
}
});
//a simple function to click next link
//a timer will call this function, and the rotation will begin
function rotate() {
jQuery('#next').click();
}
