Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Closed 9 years ago.
Improve this question
I want to make a slideshow with javascript, but I only know how to do that with few images inside, but for my web I need to do slideshow in which I can put divs?
I only need two slides, in every slide are 3 divs, and that two slides change in left.
HTML
<div id="container" class="cont2">
<div id="box1" class="box">Div #1<div class="kkc"><p>Div Caption1</p></div></div>
<div id="box2" class="box">Div #2<div class="kkc"><p>Div Caption2</p></div></div>
<div id="box3" class="box">Div #3<div class="kkc"><p>Div Caption3</p></div></div>
CSS
#container {
position: absolute;
margin: 0px;
padding: 0px;
height: 304px;
width: 500px;
overflow: hidden;
background-color: white;
margin-top: 78px;
margin-left: 124px;
z-index: -1;
}
.box {
position: absolute;
width: 50%;
height: 300px;
line-height: 300px;
font-size: 50px;
text-align: center;
border: 2px solid black;
left: 50%;
top: 0px;
margin-left: -25%;
z-index: -1;
cursor: pointer;
}
#box1 {
background-color: green;
left: -150%;
}
#box2 {
background-color: yellow;
left:50%;
}
#box3 {
background-color: red;
left: 150%;
}
Javascript
$(document).ready(function(){
var refreshId;
var restartAnimation = function() {
clearInterval(refreshId);
refreshId = setInterval( function()
{
$('.box').each(function() {
if ($(this).offset().left < 0) {
$(this).css("left", "150%");
} else if ($(this).offset().left > $('#container').width()) {
$(this).animate({
left: '50%'
}, 500 );
} else {
$(this).animate({
left: '-150%'
}, 500 );
}
});
},1000);
}
restartAnimation()
});
I've try this but its not working.
JS:
function Divs() {
var divs= $('#parent div'),
now = divs.filter(':visible'),
next = now.next().length ? now.next() : divs.first(),
speed = 1000;
now.fadeOut(speed);
next.fadeIn(speed);
}
$(function () {
setInterval(Divs, 1400);
});
CSS:
#parent div {
display:none;
position: absolute;
top: 0;
left: 0;
}
#parent div:first-child {
display:block;
}
div{background:red}
#parent > div{
width:400px;
height:250px;
}
HTML:
<div id="parent">
<div id="box1" class="box">Div #1</div>
<div id="box2" class="box">Div #2</div>
<div id="box3" class="box">Div #3</div>
</div>
here is a Js Fiddle example
Related
I have the following code for an image slider. It is a bit complicated because i want to use the slider code for multiple slider elements on the page. See below the code for one slider:
The problem i am having is described at the bottom.
$(document).ready(function(){
$('.vertical_img').first().addClass('display currentvertical_img').removeClass('invisable');
$('.horizontal_img').first().addClass('display currenthorizontal_img').removeClass('invisable');
$('.diagonal_img').first().addClass('display currentdiagonal_img').removeClass('invisable');
// image slider interaction with user
$('.right').click(function(){
next($(this).data('id'));
});
$('.left').click(function(){
previous($(this).data('id'));
});
});
function next(img_class){
var count;
$('.current'+img_class).animate({left: 0}, 500, function(){
console.log("animated?");
$('.current'+img_class).removeClass('display current'+img_class).addClass('invisable previous'+img_class);
if($('.previous'+img_class).is(':last-child')) {
count = $('.'+img_class).first().data('num');
$('.'+img_class).first().removeClass('invisable').addClass('display current'+img_class);
}
else{
$('.previous'+img_class).next().addClass('display current'+img_class).removeClass('invisable');
count = $('.previous'+img_class).next().data('num');
}
$('.'+img_class+'_slider').text(count+'/4');
$('.previous'+img_class).removeClass('previous'+img_class);
});
}
function previous(img_class){
var count;
$('.current'+img_class).removeClass('display current'+img_class).addClass('invisable previous'+img_class).animate({right: 0});
if ( $('.previous'+img_class).is(':first-child')) {
count = $('.'+img_class).last().data('num');
$('.'+img_class).last().removeClass('invisable').addClass('display current'+img_class);
}
else{
$('.previous'+img_class).prev().addClass('display current'+img_class).removeClass('invisable');
count = $('.previous'+img_class).prev().data('num');
}
$('.'+img_class+'_slider').text(count+'/4');
$('.previous'+img_class).removeClass('previous'+img_class);
}
.main_image_slide_container{
position: fixed;
left: 50px;
right:50px;
width: 500px;
height: 500px;
}
.image_slide_container_all_text_wrapper{
width: 100%;
height: auto;
overflow: overlay;
}
.image_slider_title{
float: left;
}
.image_slider_counter{
float: right;
}
.main_image_slide_container .image_slider_counter{
display: none;
}
.image_slide_container_all_text_wrapper .image_slider_counter{
display: block;
}
.slider_images_wrapper_window{
width: 100%;
height: auto;
position: relative;
}
.image_slider_controls{
position: absolute;
z-index: 10;
width: 50%;
height: 100%;
}
.left{
left: 0;
cursor: default;
}
.left:hover{
cursor: url(../../data/cursor_left.png) 40 30, move;
}
.right{
right: 0;
cursor: default;
}
.right:hover{
cursor: url(../../data/cursor_right.png) 40 30, move;
}
.slider_images_container{
width: 100%;
height: auto;
}
.slider_images_container img{
position: relative;
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main_image_slide_container">
<div class="image_slide_container_all_text_wrapper">
<div class="image_slider_title big_text font">Gravient Vertical</div>
<div class="image_slider_counter big_text font vertical_img_slider">1/4</div>
</div>
<div class="slider_images_wrapper_window">
<div class="image_slider_controls left" data-id="vertical_img"></div>
<div class="image_slider_controls right" data-id="vertical_img"></div>
<div class="slider_images_container">
<img class="vertical_img invisable" data-num="1" src="https://www.geeky-gadgets.com/wp-content/uploads/2010/06/google-mac-linux1.jpg">
<img class="vertical_img invisable" data-num="2" src="https://images.techhive.com/images/idge/imported/article/ctw/2012/10/19/samsung_chromebook_338-100391696-orig.jpg">
</div>
</div>
<div class="image_slider_counter big_text font vertical_img_slider">1/4</div> <!--mobile counter -->
</div>
So my current problem is that the images are not animating to the left. And i dont know why.. I am pretty sure my animate syntax is correct. I copy pasted it from the jquery website.
All suggestions and tips are welcome.
If something is not clear please let me know so i can clarify it!
You have missed the invisable css. Here is the working Example.
jsfiddle
I wanted to do a cool menu effect for a website I'm working on. I'm having a div act as the the section for the main content. When the user opens the menu, the main content div will resize and move out of the way, revealing the menu. However, when I do this with the code I have written, it always loses my scrolling place on the page. Is there any way to keep my place on the page when it shrinks and also when it expands back again? Below is what I have. Thank you in advance!
function shrinkPage() {
var element = document.getElementById("mock-body");
element.classList.toggle("mock-body-on-burger");
var z = document.getElementById("mock-body-container");
z.classList.toggle("mock-body-container-on-burger");
var x = document.getElementById("body");
x.classList.toggle("body-on-burger");
};
body {
margin: 0;
background:#000;
}
.body-on-burger {
max-width: 100%;
overflow-x:hidden;
}
.mock-body-container{
height:100vh;
}
.mock-body-container-on-burger {
height:100vh;
transform: scale(0.4) translate(130%);
overflow: hidden;
}
.mock-body-size-change{
overflow: scroll;
}
.mock-body {
position:relative;
background: #fff;
margin-left: 50px;
}
.container {
position: fixed;
height:50px;
width:50px;
cursor: pointer;
}
.container #icon {
width: 16px;
height: 8px;
position: relative;
margin: 0px auto 0;
top: 40%;
}
.container #icon .bars {
height: 1px;
background: #fff;
}
.myDiv {
height:500px;
}
.one {
background:red;
}
.two {
background:green;
}
.three {
background:blue;
}
<body id="body">
<div class="menu-activator" onclick="shrinkPage()">
<div class="container usd">
<div id="icon">
<div class="bars first"></div>
</div>
</div>
</div>
<div id="mock-body-container" class="mock-body-container">
<div id="mock-body" class="mock-body">
<div class="myDiv one"></div>
<div class="myDiv two"></div>
<div class="myDiv three"></div>
</div>
</div>
</body>
Please take a look at the snippet below. Notice how the overflow property is used.
You have to scroll mock-body-container to keep its scrolling position.
You're scrolling body instead, so when you scale mock-body-container there is nothing to scroll in body and you loose the scrolling position.
function shrinkPage() {
var element = document.getElementById("mock-body");
element.classList.toggle("mock-body-on-burger");
var z = document.getElementById("mock-body-container");
z.classList.toggle("mock-body-container-on-burger");
var x = document.getElementById("body");
x.classList.toggle("body-on-burger");
};
body {
margin: 0;
background:#000;
}
.body-on-burger {
max-width: 100%;
overflow-x:hidden;
}
.mock-body-container{
height:100vh;
overflow:auto;
}
.mock-body-container-on-burger {
height:100vh;
transform: scale(0.4) translate(130%);
}
.mock-body-size-change{
overflow: scroll;
}
.mock-body {
position:relative;
background: #fff;
margin-left: 50px;
}
.container {
position: fixed;
height:50px;
width:50px;
cursor: pointer;
}
.container #icon {
width: 16px;
height: 8px;
position: relative;
margin: 0px auto 0;
top: 40%;
}
.container #icon .bars {
height: 1px;
background: #fff;
}
.myDiv {
height:500px;
}
.one {
background:red;
}
.two {
background:green;
}
.three {
background:blue;
}
<body id="body">
<div class="menu-activator" onclick="shrinkPage()">
<div class="container usd">
<div id="icon">
<div class="bars first"></div>
</div>
</div>
</div>
<div id="mock-body-container" class="mock-body-container">
<div id="mock-body" class="mock-body">
<div class="myDiv one"></div>
<div class="myDiv two"></div>
<div class="myDiv three"></div>
</div>
</div>
</body>
Once you know the element that was in focus it should be relatively easy. If you need to find which element was last in focus, you can do that with a scroll function. If you need this as well let me know and I will update my answer.
If you know that #mock-body is the last element in focus, just scroll back to it after the resize.
In this example I've used jQuery as it makes this interaction easier, but this can be done (albeit more verbosely) with vanilla JS as well.
$('html, body').animate({
scrollTop: $('#mock-body').offset().top
}, 0); // If you want the animation to be smoother you can increase 0 to a higher number
A simple way to do it is to remember the position of the document scroll and reapply it when you getting back to "normal" view:
let savedScroll;
function shrinkPage() {
let _s = (el) => document.querySelector(el),
s_ = (d) => !d.classList.contains('body-on-burger'),
x = _s('#body'),
element = _s('#mock-body'),
z = _s('#mock-body-container');
if (s_(x)) {
savedScroll = document.documentElement.scrollTop;
}
element.classList.toggle("mock-body-on-burger");
z.classList.toggle("mock-body-container-on-burger");
x.classList.toggle("body-on-burger");
if (s_(x)) {
document.documentElement.scrollTop = savedScroll;
}
};
Check it out:
let savedScroll;
function shrinkPage() {
let _s = (el) => document.querySelector(el),
s_ = (d) => !d.classList.contains('body-on-burger'),
x = _s('#body'),
element = _s('#mock-body'),
z = _s('#mock-body-container');
if (s_(x)) {
savedScroll = document.documentElement.scrollTop;
}
element.classList.toggle("mock-body-on-burger");
z.classList.toggle("mock-body-container-on-burger");
x.classList.toggle("body-on-burger");
if (s_(x)) {
document.documentElement.scrollTop = savedScroll;
}
};
body {
margin: 0;
background: #000;
}
.body-on-burger {
max-width: 100%;
overflow-x: hidden;
}
.mock-body-container {
height: 100vh;
}
.mock-body-container-on-burger {
height: 100vh;
transform: scale(0.4) translate(130%);
overflow: hidden;
}
.mock-body-size-change {
overflow: scroll;
}
.mock-body {
position: relative;
background: #fff;
margin-left: 50px;
}
.container {
position: fixed;
height: 50px;
width: 50px;
cursor: pointer;
}
.container #icon {
width: 16px;
height: 8px;
position: relative;
margin: 0px auto 0;
top: 40%;
}
.container #icon .bars {
height: 1px;
background: #fff;
}
.myDiv {
height: 500px;
}
.one {
background: red;
}
.two {
background: green;
}
.three {
background: blue;
}
<body id="body">
<div class="menu-activator" onclick="shrinkPage()">
<div class="container usd">
<div id="icon">
<div class="bars first"></div>
</div>
</div>
</div>
<div id="mock-body-container" class="mock-body-container">
<div id="mock-body" class="mock-body">
<div class="myDiv one"></div>
<div class="myDiv two"></div>
<div class="myDiv three"></div>
</div>
</div>
</body>
Legend: _s(el) returns first match of el and s_(d) checks if d has class body-on-burger.
The simple way to do this is to determine the change in height during the resize, and scroll that much.
const heightChange = newHeight - initialHeight;
scrollableDiv.scrollTop = scrollableDiv.scrollTop - heightChange;
In my case I am using a resize method I wrote, so I do this work inside of a window.addEventListener("mousemove", handleResize); when I know the div in actively being resized by the user.
This will still work fine with native html resizable elements, you just need to figure out how/when to listen for resize/drag events accordingly.
How can I align the following coloured divs next to each other, so that each one is the full width of the browser window (responsive) and only one is display at a time?
http://codepen.io/anon/pen/gpxvjm
HTML:
<div class="content-area">
<div class="p1">Page 1</div>
<div class="p2">Page 2</div>
<div class="p3">Page 3</div>
</div>
<a class="previous-page" href="#">Previous Page</a>
<a class="next-page"href="#">Next Page</a>
CSS:
body {background: grey;}
.p1 {
background: red;
float: left;
width: 100%;
display: inline;
overflow: hidden;
}
.p2 {
background: blue;
float: left;
width: 100%;
display: inline;
overflow: hidden;
}
.p3 {
background: green;
float: left;
width: 100%;
display: inline;
overflow: hidden;
}
.content-area {
width: 100%;
overflow: hidden;
}
Also, when the user selects the previous and next buttons, how can I then push the divs either left or right depending on which anchor link is selected?
I would really recommend slick.js to create the carousel effect you are after.
It is super easy to setup, allows for responsive design, is quite compatible with old IE and has features like arrows and dots built in!
If you want to run your own, i would suggest toggling classes in javascript which leverage css transforms & transitions to ensure maximum performance.
For example,
.page{
width: 100%;
height: 500px;
position: absolute;
top: 0;
transition: .5s;
}
.hide-left{
transform: translateX(-100%);
}
.hide-right{
transform: translateX(100%);
}
Adding browser specific prefixes where required.
This is one of solution, define parent with (number of pages) x 100% width and each child of page 100% / (number of pages) width :
var currentPage = 0;
$('.previous-page').on('click', function() {
currentPage--;
$('.content-area').css('left', (currentPage * -100) + '%');
});
$('.next-page').on('click', function() {
currentPage++;
$('.content-area').css('left', (currentPage * -100) + '%');
});
body {background: grey;}
.content-area div {
float: left;
width: 33.3333%;
display: inline;
overflow: hidden;
}
.p1 {
background: red;
}
.wrap {
width: 100%;
position: relative;
overflow: hidden;
}
.content-area {
width: 300%;
overflow: hidden;
left: 0;
position: relative;
-webkit-transition: left 2s;
transition: left 2s;
}
.p2 {
background: blue;
}
.p3 {
background: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap">
<div class="content-area">
<div class="p1">Page 1</div>
<div class="p2">Page 2</div>
<div class="p3">Page 3</div>
</div>
</div>
<a class="previous-page" href="#">Previous Page</a>
<a class="next-page"href="#">Next Page</a>
You can improve the script, i just made it to illustrate the slider.
Here, I've created a jsfiddle here for what I think it is that you want. I've also created a snippet below.
$(document).ready(function () {
for (var i = 0; i < $(".content-area div").length; i++) {
$(".content-area div").eq(i).css({
left: "+=" + parseInt($(".content-area").width() * i, 10)
});
}
});
var currentPage = 0; //0th index
$(".previous-page").click(function () {
changePage(-1);
});
$(".next-page").click(function () {
changePage(1);
});
function changePage(updown) {
if ($(".content-area div")[currentPage + updown]) {
$(".content-area div").animate({
left: "+=" + parseInt($(".content-area").width() * -updown, 10)
},1600);
currentPage += updown;
}
}
body, html {
background: grey;
margin: 0;
padding: 0;
}
.p1 {
background: red;
}
.p2 {
background: blue;
}
.p3 {
background: green;
}
.content-area {
position: absolute;
left:0;
right:0;
top:0;
bottom:0;
overflow: hidden;
}
.content-area div {
position:absolute;
left:0;
width: 100%;
height:100%;
}
.next-page, .previous-page {
z-index:2;
position:fixed;
bottom:5px;
}
.next-page {
right:5px;
}
.previous-page {
left:5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="content-area">
<div class="p1">Page 1</div>
<div class="p2">Page 2</div>
<div class="p3">Page 3</div>
</div>
<a class="previous-page" href="#">Previous Page</a>
<a class="next-page" href="#">Next Page</a>
I am building my own jQuery light box but am running into a small issue. The html page has 6 images on it and when one is clicked an overlay is displayed over the whole page with the image in the center.
The issue I am running into is that the animation that controls the light box displaying is not smooth, it produces a sort of outwards in effect and I would like it to all be effected as one. The animation to fade it out works perfectly though, so I am not sure what I am missing ?
Here is a jsFiddle: http://jsfiddle.net/hqsapk5a/
My HTML:
<div class="page-wrapper">
<div class="grid">
<div class="image-thumb-wrapper">
<img src="img/Casinogames_2MillionBC.jpg" class="image-thumb" />
</div>
<div class="image-thumb-wrapper">
<img src="img/casinogames_7thheaven.jpg" class="image-thumb" />
</div>
<div class="image-thumb-wrapper">
<img src="img/casinogames_10sOrBetter.jpg" class="image-thumb" />
</div>
<div class="image-thumb-wrapper">
<img src="img/casinogames_21BurnBlackjack.jpg" class="image-thumb" />
</div>
<div class="image-thumb-wrapper">
<img src="img/Casinogames_AfterNightFalls.jpg" class="image-thumb" />
</div>
<div class="image-thumb-wrapper">
<img src="img/casinoGames_AllAmerican.jpg" class="image-thumb" />
</div>
</div>
</div>
<div class="light-box">
<div class="light-box-overlay">
</div>
<div class="light-box-wrapper">
<img src="" id="light-box-image" />
</div>
x
</div>
My jQuery:
$(document).ready( function() {
$('.image-thumb').click( function() {
var image = $(this).attr('src');
$('#light-box-image').attr('src', image);
$('.light-box').css('opacity', '0').fadeTo(100, 1, function() {
$('.light-box').css('z-index', '2');
});
});
$('.light-box-close').click( function(e) {
event.preventDefault(e);
$('.light-box').css('opacity', '1').fadeTo(100, 0, function() {
$('.light-box').css('z-index', '0');
}); });
});
My CSS:
.page-wrapper {
height: 100%;
position: absolute;
width: 100%;
z-index: 1;
}
.grid {
width: 600px;
height: 552px;
position: absolute;
bottom: 0;
left: 0;
top: 0;
right: 0;
text-align: center;
margin: auto;
background-color: #DFDFDF;
border: 2px solid #999;
border-radius: 5px;
padding: 20px 0px;
}
.image-thumb-wrapper {
width: 228px;
display: inline-block;
margin: 5px;
}
.image-thumb:hover {
cursor: pointer;
}
.light-box {
position: fixed;
height: 100%;
width: 100%;
top: 0;
left: 0;
z-index: 0;
}
.light-box-overlay {
position: absolute;
top: 0;
left: 0;
background-color: #000;
height: 100%;
width: 100%;
opacity: 0.8;
}
img#light-box-image {
z-index: 10;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
border: 2px solid #fff;
background-color: #999;
padding: 25px;
border-radius: 5px;
}
.light-box {
opacity: 0;
}
a.light-box-close {
color: #fff;
font-size: 1.2em;
position: absolute;
text-decoration: none;
right: 10px;
top: 5px;
}
a.light-box-close:hover {
text-decoration: underline;
}
You are changing the z-index of .light-box after the fade in animation completes which is why you see it display strangely as it jumps in front of the other content.
Change this block:
$('.image-thumb').click( function() {
var image = $(this).attr('src');
$('#light-box-image').attr('src', image);
$('.light-box').css('opacity', '0').fadeTo(100, 1, function() {
$('.light-box').css('z-index', '2');
});
});
To this:
$('.image-thumb').click( function() {
var image = $(this).attr('src');
$('#light-box-image').attr('src', image);
$('.light-box').css({'z-index': '2','opacity':'0'}).fadeTo(100, 1);
});
DEMO
Is this what you are looking for?
You just have to make $('.light-box').css('z-index', '2'); before it fades in.
What is happening is that you are putting the z-index: 2 while it fades in that's why it acts weird.
Expanding on previous answers, beyond changing the z-index in css, try this ...
$('.light-box').css('z-index', '2').animate({ opacity: 0 }, 500).fadeTo(100, 1);
This will give you a much smoother animation; the time can be adjusted higher or lower from the 500ms.
HTML part:
<div id="container">
<div id="box1" class="box">Div #1</div>
<div id="box2" class="box">Div #2</div>
<div id="box3" class="box">Div #3</div>
<div id="box4" class="box">Div #4</div>
<div id="box5" class="box">Div #5</div>
<div id="box6" class="box">Div #6</div>
<div> <button class="Animate">left Animation</button></div>
<div> <button class="Animate2">right Animation</button></div>
</div>
Javascript part:
$('.box').click(function() {
$(this).animate({
left: '-50%'
}, 500, function() {
$(this).css('left', '150%');
$(this).appendTo('#container');
});
$(this).next().animate({
left: '50%'
}, 500);
});
CSS part:
body {
padding: 0px;
}
#container {
position: absolute;
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
overflow: hidden;
}
.box {
position: absolute;
width: 50%;
height: 300px;
line-height: 300px;
font-size: 50px;
text-align: center;
border: 2px solid black;
left: 150%;
top: 100px;
margin-left: -25%;
}
#box1 {
background-color: green;
left: 50%;
}
#box2 {
background-color: yellow;
}
#box3 {
background-color: red;
}
#box4 {
background-color: orange;
}
#box5 {
background-color: blue;
}
#box6 {
background-color: grey;
}
When the above code is complied and "div's in the pages are clicked" they move towards their left. I want the divs to move to their left when left animation button is clicked in sequence 1-2-3-4-5-1 and move to their right when right animation button is clicked in sequence 1-5-4-3-2-1. I have already posted a similar question on this forum but I accepted the answers by mistake even though they were not exactly what I was looking for. My mistake I was not clear enough in my question. I am sorry if am asking for a big code here. All the help is appreciated. This is the link to http://jsfiddle.net/ykbgT/4151/
This is the desired functionality: http://basic-slider.com/ not so good looking though!!
Take a look at this http://jsfiddle.net/tppiotrowski/VLzN4/1/
I used your existing CSS and HTML and only modified the Javascript. I think your question implied that you did not want the original functionality of clicking on the div, but instead wanted to use the two buttons. Please comment if you want me to re-add in the clicking on the div functionality of advancing the slides.
$(function() {
function createSlider(el_left, el_right, items) {
var index = 0;
el_left.click(function() {
var $this = items.eq(index);
$this.animate({
left: '-50%'
}, 500);
index = (index + 1) % items.length;
var $next = items.eq(index);
$next.css('left', '150%');
$next.animate({
left: '50%'
}, 500);
});
el_right.click(function() {
var $this = items.eq(index);
$this.animate({
left: '150%'
}, 500);
index = (index - 1) % items.length;
var $next = items.eq(index);
$next.css('left', '-50%');
$next.animate({
left: '50%'
}, 500);
});
}
createSlider($('.Animate'), $('.Animate2'), $('.box'));
});
This function takes three jquery objects as arguments. The first is the button you wish to advance to the left. The second is the button you wish to advance to the right. The third is the items you wish to slide.