Reputation: 11

Javascript Content Slider

Before I put the html and css, I am having 2 problems, please keep in my that I am almost a complete amateur at html and css, and have no idea what the javascript means.

Problems:

My 1st problem is that the content sider, doesnt slide far enough to the next content, but instead when clicking the button only brings the content over halfway (you will see what I mean when you paste the html and css into a page).
My second problem is that the buttons are meant to be horizontal with eachother, and I also want to add more in the future

so if someone could tell me how to do that in elaboration with the javascript problem that would be great!

here is the working demo jsfiddle please check-out

Working code

Thank-you in Advance..!!

 // just querying the DOM...like a boss!
var links = document.querySelectorAll(".itemLinks");
var wrapper = document.querySelector("#wrapper");

// the activeLink provides a pointer to the currently displayed item
var activeLink = 0;

// setup the event listeners
for (var i = 0; i < links.length; i++) {
    var link = links[i];
    link.addEventListener('click', setClickedItem, false);

    // identify the item for the activeLink
    link.itemID = i;
}

// set first item as active
links[activeLink].classList.add("active");

function setClickedItem(e) {
    removeActiveLinks();

    var clickedLink = e.target;
    activeLink = clickedLink.itemID;

    changePosition(clickedLink);
}

function removeActiveLinks() {
    for (var i = 0; i < links.length; i++) {
        links[i].classList.remove("active");
    }
}

// Handle changing the slider position as well as ensure
// the correct link is highlighted as being active
function changePosition(link) {
    link.classList.add("active");

    var position = link.getAttribute("data-pos");
    wrapper.style.left = position;
}

#wrapper {
    width: 5000px; 
    position: relative;
    left: 0px; 
    transition: left .5s ease-in-out;
}

.content {
    float: left; 
    width: 1250px;
    height: 600px;
    white-space: normal;
    background-repeat: no-repeat;
}

#itemOne {
    background-color: #ADFF2F;
    background-image: url("http://www.kirupa.com/images/blueSquare.png");
}
#itemTwo {
    background-color: #FF7F50;
    background-image: url("http://www.kirupa.com/images/yellowSquare.png");
}
#itemThree {
    background-color: #1E90FF;
    background-image: url("http://www.kirupa.com/images/pinkSquare.png");
}
#itemFour {
    background-color: #DC143C;
    background-image: url("http://www.kirupa.com/images/graySquare.png");
}

#contentContainer {
    width: 98%;
    height: 600px;
    border: 5px black solid;
    overflow: hidden;
    margin-left: 1%;
    margin-right: 1%;
}
#navLinks {
    text-align: center;
    width: 22.5%;
}
    #navLinks ul {
        margin: 0px;
        padding: 0px;
        display: inline-block;
        margin-top: 6px;
    }
        #navLinks ul li {
            float: left;
            text-align: center;
            margin: 10px;
            list-style: none;
            cursor: pointer;
            background-color: #CCCCCC;
            padding: 100px;
            border-radius: 10%;
            border: white 5px solid;
        }
            #navLinks ul li:hover {
                background-color: #FFFF00;
            }
            #navLinks ul li.active {
                background-color: #333333;
                color: #FFFFFF;
                outline-width: 7px;
            }
                #navLinks ul li.active:hover {
                    background-color: #484848;
                    color: #FFFFFF;
                }
#navLinks ul li.active {
    background-color: #333333;
    color: #FFFFFF;
    outline-width: 7px;
}
#navLinks ul li.active:hover {
    background-color: #484848;
    color: #FFFFFF;
}

<body bgcolor='black'>


<div id="contentContainer">
    <div id="wrapper">
        <div id="itemOne" class="content">

        </div>
        <div id="itemTwo" class="content">

        </div>
        <div id="itemThree" class="content">

        </div>
        <div id="itemFour" class="content">

        </div>
    </div>
</div>
    <div id="navLinks">
    <ul>
        <li class="itemLinks" data-pos="0px"></li>
        <li class="itemLinks" data-pos="-550px"></li>
        <li class="itemLinks" data-pos="-1100px"></li>
        <li class="itemLinks" data-pos="-1650px"></li>
    </ul>
</div>
    </body>

Upvotes: 0

Answers (3)

Akash Jain

Reputation: 368

<!DOCTYPE html>
<html>

<head>
<title>Dinosaurs 4 Kids!</title>

<style>
#wrapper {
    width: 98%;
    position: relative;
    left: 0px; 
    transition: left .5s ease-in-out;
}

.content {
    float: left; 
    width: 100%;
    height: 600px;
    white-space: normal;
    background-repeat: no-repeat;
    background-position: center;
}

#itemOne {
    background-color: #ADFF2F;
    background-image: url("http://www.kirupa.com/images/blueSquare.png");
}
#itemTwo {
    background-color: #FF7F50;
    background-image: url("http://www.kirupa.com/images/yellowSquare.png");
}
#itemThree {
    background-color: #1E90FF;
    background-image: url("http://www.kirupa.com/images/pinkSquare.png");
}
#itemFour {
    background-color: #DC143C;
    background-image: url("http://www.kirupa.com/images/graySquare.png");
}

#contentContainer {
    width: 98%;
    height: 600px;
    border: 5px black solid;
    overflow: hidden;
    margin-left: 1%;
    margin-right: 1%;
}
#navLinks {
    text-align: center;
}
    #navLinks ul {
        margin: 0px;
        padding: 0px;
        display: inline-block;
        margin-top: 6px;
    }
        #navLinks ul li {
            float: left;
            text-align: center;
            margin: 10px;
            list-style: none;
            cursor: pointer;
            background-color: #CCCCCC;
            padding: 20px;
            border-radius: 10%;
            border: white 5px solid;
        }
            #navLinks ul li:hover {
                background-color: #FFFF00;
            }
            #navLinks ul li.active {
                background-color: #333333;
                color: #FFFFFF;
                outline-width: 7px;
            }
                #navLinks ul li.active:hover {
                    background-color: #484848;
                    color: #FFFFFF;
                }
#navLinks ul li.active {
    background-color: #333333;
    color: #FFFFFF;
    outline-width: 7px;
}
#navLinks ul li.active:hover {
    background-color: #484848;
    color: #FFFFFF;
}
</style>
</head>

<body bgcolor='black'>


<div id="contentContainer">
    <div id="wrapper">
        <div id="itemOne" class="content">

        </div>
        <div id="itemTwo" class="content">

        </div>
        <div id="itemThree" class="content">

        </div>
        <div id="itemFour" class="content">

        </div>
    </div>
</div>
    <div id="navLinks">
    <ul>
        <li class="itemLinks" data-pos="0px"></li>
        <li class="itemLinks" data-pos="-550px"></li>
        <li class="itemLinks" data-pos="-1100px"></li>
        <li class="itemLinks" data-pos="-1650px"></li>
    </ul>
</div>



<script>
 // just querying the DOM...like a boss!
var links = document.querySelectorAll(".itemLinks");
var wrapper = document.querySelector("#wrapper");

// the activeLink provides a pointer to the currently displayed item
var activeLink = 0;

// setup the event listeners
for (var i = 0; i < links.length; i++) {
    var link = links[i];
    link.addEventListener('click', setClickedItem, false);

    // identify the item for the activeLink
    link.itemID = i;
}

// set first item as active
links[activeLink].classList.add("active");

function setClickedItem(e) {
    removeActiveLinks();

    var clickedLink = e.target;
    activeLink = clickedLink.itemID;

    changePosition(clickedLink);
}

function removeActiveLinks() {
    for (var i = 0; i < links.length; i++) {
        links[i].classList.remove("active");
    }
}

// Handle changing the slider position as well as ensure
// the correct link is highlighted as being active
function changePosition(link) {
    link.classList.add("active");

    var position = link.getAttribute("data-pos");
    wrapper.style.left = position;
}
</script>
</body>
</html>

Upvotes: 0

MikeiLL

Reputation: 6570

I assume that the CSS posted in the bottom of your question is the content of the main.css file. As matt points out in the comments, experiment with changing the sizes of the divs. Particularly the #wrapper, which is specified by it's ID using tha hash tag (#):

#wrapper {
    width: 5000px; 
    position: relative;
    left: 0px; 
    transition: left .5s ease-in-out;
}

And referenced in the javascript here:

var wrapper = document.querySelector("#wrapper");

where it is assigned to the variable wrapper. It is 5000 pixels wide. The typical desktop web screen is around 1200 - 1700 pixels wide, I believe, for reference. This is about the size you want the .content, referenced by class using a . and what holds each displayed "slide" to be - keeping in mind that a responsive site that displays properly on phones and other mobile devices would need to have variations on the size using @media queries.

So I would add visible css borders where applicable (for development and to be removed later) and change around the numerical variables (data-pos, #wrapper and .container sizes) to find the optimal solution. As mentioned above, jsfiddle is a great resource, whether or not you're needing to share publicly.

For the navlinks, which should be displayed in a row, try the following CSS on the div that holds the list (<ul>):

    #navLinks {
            text-align: center;
            width: 90.5%;
            border:1px solid white;
    }

The border:1px solid white; will help you to see where the div is. Then experiment with a smaller padding size in #navLinks ul li to be sure you have room on the page to display horizontally.

I believe the last step is to adjust the <li class="itemLinks" data-pos="0px"></li>, where the data-pos attributes are just holding information for the javascript to use in the changePosition function, which is the last few lines of the javascript.

eloquentjavascript.net is a wonderful, free source to learn all of this.

Upvotes: 0

partypete25

Reputation: 4413

The main areas to update; 1) your "#contentContainer". This is basically the window of your slider. The height and width need to be updated to match the slider items. 2) the "data-pos" values of your list items. This should be the same as their width * their index starting at 0 and negative. 3) the list container is too narrow. make it as wide as your #contentContainer.

CSS Changes:
#contentContainer {
  width: 1250px;
  height: 600px;
}
#navLinks {
  width:1250px;
}
#navLinks ul li {
  width:80px;
}

HTML change:
<li class="itemLinks" data-pos="0px"></li>
<li class="itemLinks" data-pos="-1250px"></li>
<li class="itemLinks" data-pos="-2500px"></li>
<li class="itemLinks" data-pos="-3750px"></li>

https://jsfiddle.net/partypete25/9gpyL6o1/7/embedded/result/

Upvotes: 2

Javascript Content Slider

Answers (3)

Related Questions