CODEWITHSUNDEEP
javascriptcssanimationslider
Alex
Alex

Reputation: 183

Making a page content slider animation

enter image description here

I'd like to make a two page slider to move through the content. Is it possible to make a CSS code to do the animation like in this example?

Upvotes: 0

Views: 145

Answers (1)

Falguni Panchal
Falguni Panchal

Reputation: 8981

Like this

demo

css

body {
    font:normal 1.25em/1.5 Arial, sans-serif;
}

.demo-wrapper {
    max-width: 640px;
    margin: 0 0 1em;
    padding: 5px;
    border: 1px solid #CCC;
    background: #F4F4F4;
}

/**
 * Slider CSS
 */
.slider {
    /* For no JS situations */
    overflow: auto;
}
.slider > ul {
    margin: 0;
    padding: 0;

    /* Force list items onto a single line and remove white space */
    font-size: 0;
    white-space: nowrap;

    /* Only WebKit requires prefix */
    -webkit-transition: all 1s ease;
    transition: all 1s ease;
}
.slider > ul > li {
    display: inline-block;
}
.slider .next,
.slider .prev {
    position: absolute;
    top: 50%;
    margin-top: -1em;
    padding: .5em;
    line-height: 1;
    text-decoration: none;
    color: white;
    background: rgba(0, 0, 0, .25);
    cursor: pointer;
}
.slider .next {
    right: 0;
}
.slider .prev {
    left: 0;
}

.slider .prev.is-disabled,
.slider .next.is-disabled {
    opacity: .25;
}

/* Full width variation */
.slider--fit li {
    width: 100%;
}

demo1

Upvotes: 2

Related Questions