Have one div
:
Here's what scrolling of this div
should look like:
The only way I see is to duplicate div
to left and right sides of original one, and then scroll the whole bunch. Here is a corner-cutting implementation sketch: Fiddle
$(document).ready(function() {
$original = $("#original");
// Duplicate div to the left and right of original
$original.clone().attr("id", "left").prependTo("#scroll");
$original.clone().attr("id", "right").appendTo("#scroll");
// Set according width to parent we are going to scroll
w = $original.width();
$scroll = $("#scroll");
$scroll.width(w * 3);
// Radio button
$left_rb = $("#left_rb");
function roll_it() {
dest_pos = 0;
// Check radion button
if ($left_rb.prop("checked")) dest_pos = -2 * w;
// Set start position
$scroll.css('left', -w + 'px');
// Roll it
$scroll.animate({
left: dest_pos + "px"
}, 1000, "linear", roll_it);
}
roll_it();
});
.scrollable {
width: 150px;
height: 50px;
float: left;
}
#container {
width: 150px;
height: 50px;
overflow: hidden;
}
#scroll {
position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<div id="scroll">
<div class="scrollable" id="original">
<img src="http://i.stack.imgur.com/vvcpe.gif" />
</div>
</div>
</div>
<p>Direction:</p>
<form>
<input type="radio" name="direction" value="left" id="left_rb" checked><<<<<
<input type="radio" name="direction" value="rigth" id="rigt_rb">>>>>></form>
Any better way? Existing plugins (it should be scrollable to any choosen position, not just slideshow)?