Ice Slider

The Ice Slider surfaced because of a need to have a single solution (that works) capable of attending the needs of most developers

Feature List

Touch events
Mouse events
Arrows
Custom Classes
Dots
Responsive Design friendly
Auto-rotation with hover pause and deactivation upon interaction (with option to cancel deactivation)
Deactivation of slider controls on desktop size (good for responsive design)
CSS3 animation with fallback for older browsers (tested on IE 8+)
Offset slider with option to centering active slide

Full Slider

Offset Slider Mobile Only

How do I implement it!?

Sample code from the 2 sliders above, feel free to do your own thing!

HTML

                    
<section id="slider1">
    <h2>Full Slider</h2>
    <div id="slider1Holder">
        <a href="#" id="slider1ArrowL" class="fa fa-arrow-circle-o-left">
        </a>
        <a href="#" id="slider1ArrowR" class="fa fa-arrow-circle-o-right">
        </a>
        <div id="slider1Wrapper">
            <div id="slider1Container">
                <article class="slider1Item">
                    <p>1</p>
                </article>
                <article class="slider1Item">
                    <p>2</p>
                </article>
                <article class="slider1Item">
                    <p>3</p>
                </article>
                <article class="slider1Item">
                    <p>4</p>
                </article>
            </div>
        </div>
    </div>
    <div id="slider1Dots">
    </div>
</section>


<section id="slider2">
    <h2>Offset Slider Mobile Only</h2>
    <div id="slider2Holder">
        <div id="slider2Wrapper">
            <div id="slider2Container">
                <article class="slider2Item">
                    <div>
                        <p>1</p>
                    </div>
                </article>
                <article class="slider2Item">
                    <div>
                        <p>2</p>
                    </div>
                </article>
                <article class="slider2Item">
                    <div>
                        <p>3</p>
                    </div>
                </article>
                <article class="slider2Item">
                    <div>
                        <p>4</p>
                    </div>
                </article>
                <article class="slider2Item">
                    <div>
                        <p>5</p>
                    </div>
                </article>
                <article class="slider2Item">
                    <div>
                        <p>6</p>
                    </div>
                </article>
            </div>
        </div>
    </div>
</section>

CSS

                    
#slider1Holder {
    position: relative;
}

#slider1Wrapper {
    width: 80%;
    overflow: hidden;
    position: relative;
    margin: 0 auto;
}

#slider1Container {
    position: relative;
    height: 350px;
    overflow-y: hidden; 
}

#slider1Container:after,
#slider1Container:before {
    content: " ";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

#slider1Container .slider1Item {
    position: relative;
    display: block;
    float: left;
    width: 100%;
    overflow-y: hidden;
    opacity: 0.6;
    background-color: black;
    -webkit-transition:  opacity 0.4s;
    -moz-transition: -moz-transform opacity 0.4s;
    -o-transition: -o-transform opacity 0.4s;
    transition: transform opacity 0.4s;
}

#slider1Container .slider1Item p {
    line-height: 350px;
    font-size: 100px;
    width: 100%;
    text-align: center;
    margin: 0;
    color: white;
}

#slider1Container .slider1Item.active {
    opacity: 1;
}

#slider1Container .slider1Item:nth-child(odd) {
    background-color: darkblue;
}

#slider1Container .slider1Item:nth-child(even) {
    background-color: darkgreen;
}


#slider1ArrowL,
#slider1ArrowR {
    position: absolute;
    display: block;
    text-decoration: none;
    color: #333;
    font-size: 2em;
    top: 45%;
}

#slider1ArrowL {
    left: 0;
}

#slider1ArrowR {
    right: 0;
}

#slider1ArrowR.inactive,
#slider1ArrowL.inactive {
    color: #888;
}

#slider1 #slider1Dots {
    text-decoration: none;
    text-align: center;
    margin: 0.4em 0;
}

#slider1Dots a {
    display: inline-block;
    margin: 0 0.1em;
}

#slider1Dots a span {
    color: #000;
    border-radius:  10px;
    -moz-border-radius:  10px;
    -webkit-border-radius: 10px;    
    border: 1px solid #777;
    width: 1em;
    height: 1em;
    display: block;
    -moz-box-shadow: 1px 1px 5px #888;
    -webkit-box-shadow: 1px 1px 5px #888;
    box-shadow: 1px 1px 5px #888;
}

#slider1Dots a.slider1-currentDot span {
    background: darkgreen;
}

@media only screen and (min-width: 640px) {

    #slider1ArrowL {
        left: 1%;
    }

    #slider1ArrowR {
        right: 1%;
    }

    #slider1ArrowL,
    #slider1ArrowR {
        font-size: 3em;
    }

}

@media only screen and (min-width: 1000px) {

    #slider1Container .slider1Item p {
        line-height: 500px;
    }

    #slider1Container {
        position: relative;
        height: 500px;
        overflow-y: hidden; 
    }

    #slider1ArrowL,
    #slider1ArrowR {
        font-size: 4em;
    }

}

@media only screen and (min-width: 1400px) {

    #slider1ArrowL {
        left: 3%;
    }

    #slider1ArrowR {
        right: 3%;
    }

}

#slider2Holder {
    position: relative;
}

#slider2Wrapper {
    width: 80%;
    overflow: hidden;
    position: relative;
    margin: 0 auto;
}

#slider2Container {
    position: relative;
    height: 200px;
    overflow-y: hidden; 
}

#slider2Container:after,
#slider2Container:before {
    content: " ";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

#slider2Container .slider2Item {
    position: relative;
    display: block;
    float: left;
    overflow-y: hidden;
    min-height: 200px;
    width: 85%;
}

#slider2Container .slider2Item div {
    margin: 0 10px;
}

#slider2Container .slider2Item p {
    line-height: 200px;
    font-size: 100px;
    width: 100%;
    text-align: center;
    margin: 0;
    color: white;
}

#slider2Container .slider2Item:nth-child(odd) div {
    background-color: darkblue;
}

#slider2Container .slider2Item:nth-child(even) div {
    background-color: darkgreen;
}

@media only screen and (min-width: 768px) {

    #slider2Container {
        text-align: center;
        height: auto;
    }

    #slider2Container .slider2Item {
        width: 32%;
        margin-bottom: 20px;
        display: inline-block;
        float: none;
        text-align: center;
        min-height: 200px;
    }

}

Javascript

                    
var slider1, slider2;

$(document).ready(function() {
    slider1 = new iceSlider.hammerSlider({
        /* obrigatory */
        wrapper : '#slider1Wrapper',
        container : '#slider1Container', 
        item : '.slider1Item', 
        /* optionals */
        itemActiveClass : 'active',
        leftArrow : '#slider1ArrowL',
        rightArrow : '#slider1ArrowR',
        arrowInactiveClass : 'inactive',
        dots : '#slider1Dots',
        dotActiveClass : 'slider1-currentDot',
        autoSlide : true,
        setTime : 5000
    });
    slider1.init();

    slider2 = new iceSlider.hammerSlider({
        /* obrigatory */
        wrapper : '#slider2Wrapper',
        container : '#slider2Container', 
        item : '.slider2Item', 
        /* optionals */
        itemSize : 85,
        desktop : false,
        centerItem : true
    });
    slider2.init();
});