Home/ Questions/Q 8217545
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-07T12:29:49+00:00

I’m trying to make a simple horizontal slider. As it stands, I have three

  • 0

I’m trying to make a simple horizontal slider.

As it stands, I have three div’s, identical sizes, in a line. I did have jQuery to move them, but currently the viewport moves with them or nothing happens at al.
Can anyone point me in the direction so that the viewport stays fixed and the content slides across it? This is the code so far…

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Slider (cutdown, demo)</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$('#trigger1').click(function(){
$(".box").animate({left: "0"});
});
$('#trigger2').click(function(){
$("#viewport").animate({left: "-200"});
});
$('#trigger3').click(function(){
$(".box").animate({left: "-400"});
});
});
</script>
<style>
body    {
background:#003;
color:#FFF;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
}
#viewport   {
width:200px;
height:200px;
overflow:hidden;
}
.box    {
background-color:#069;
border-style:solid;
border-width:2px;
width:196px;
height:196px;
float:left;
}
</style>
</head>

<body>
<div id="trigger1">
Trigger One
</div>
<div id="trigger2">
Trigger Two
</div>
<div id="trigger3">
Trigger Three
</div>
<div id="viewport">
<div id="container">
<div id="box1" class="box">
Box One
</div>
<div id="box2" class="box">
Box Two
</div>
<div id="box3" class="box">
Box Three
</div>
</div>
</div>
</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I’d suggest that you restructure your trigger menu and rewrite your JQuery code like this:

    HTML

    <ul id="triggerMenu">
    <li id="trigger-0">One</li>
    <li id="trigger-1">Two</li>
    <li id="trigger-2">Three</li>
</ul>

<div id="viewport">
    <div id="container">
        <div id="box1" class="box">Box One</div>
        <div id="box2" class="box">Box Two</div>
        <div id="box3" class="box">Box Three</div>
    </div>
</div>​

    JQuery

    $("li", "#triggerMenu").on("click", function()
{
    var triggerNumber = $(this).attr("id").replace(/(.*)-/,"");
    var newPosition = triggerNumber * 200;

    // Make sure the box slides in the right direction
    if (newPosition > 0) newPosition = "-" + newPosition;

    // Slide box
    $(".box").animate({left: newPosition});
});

    This way you don’t have to add new JQuery code for each trigger/box combo.

    Live demo: http://jsfiddle.net/fAWpZ/5/

    • 0