Skip to content

Instantly share code, notes, and snippets.

@EmmanuelObua
Last active Jun 12, 2021
Embed
What would you like to do?
Our global css jQuery Clone
/* 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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment