Our global css jQuery Clone

style.css

/* Set the background and color of text on the body */
body {
    font-family: "Arial",sans-serif;
    font-size: 14px;
    color: #fff;
    background: #333;
}

/* Color all the anchor tags white and remove default text-decoration of underlining  */
a {
    color: #fff;
    text-decoration: none;
}

/* Center text of all the h1 tag */
h1 {
    text-align: center;
}

/* Define width, margin of the container, and make overflow to be auto to avoid unnecessary scrolling */
.container {
    width: 540px;
    margin: 40px auto;
    overflow: auto;
}

/* Define the styles of the div holding all the images */
.slider-inner {
    width: 500px;
    height: 300px;
    position: relative;
    overflow: hidden;
    float: left;
    padding: 3px;
    border: #666 solid 1px;
}

/* Get individual image in the div and change display to none, then define the width and height */
.slider-inner img {
    display: none;
    width: 500px;
    height: 300px;
}

/* Change display of the image having the active class to inline-block */
.slider-inner img.active {
    display: inline-block;
}

/* Define general behavior of the next and prev class */
.next,
.prev {
    float: left;
    margin-top: 130px;
    cursor: pointer;
}

/* Define indivial behavior of prev and next  relative to the above general defination */
.prev {
    position: relative;
    margin-right: -45px;
    z-index: 100;
}

.next {
    position: relative;
    margin-left: -45px;
    z-index: 100;
}