Slide Gallery

Options

Option	Type	Default value	Description
items	selector	(empty string)	Items that will be sliding. Selector is relative to parent element.
controls	selector	'.switcher'	Switch controls box. Each control should contain a link.
prev	selector	'.btn-prev'	Control to switch gallery to the previous element.
next	selector	'.btn-next'	Control to switch gallery to the next element.
duration	integer	500	Time for animation between gallery items.
autoRotate	boolean	false	Auto rotation trigger.
rotateTimeout	integer	5000	Auto rotate timeout.
direction	string	'horizontal'	'Horizonal' or 'vertical' slider.
has3d	boolean	(auto detect)	Detect will plugin use CSS3 transform properties (if available) or jQuery animate. Can be set manually.
effect	string	'linear'	Custom effect for animate. Possible values for CSS3 transform (if has3d option enabled): 'ease', 'linear', 'ease-in', 'ease-out', 'ease-in-out'. For jQuery animate: 'linear', 'swing' or any available effect from additional effect plugins used.
onMove(current,next)	function	null	Event firing while gallery is animating.

Tested on:

Firefox 63.0.3
Chrome 70.0.3538.110
Internet Explorer 7,8,9
Opera 12.02
jQuery versions: 1.4.2, 1.5.2, 1.6.2, 1.7.1, 1.8.2, 1.11.1, 2.1.1, 3.3.1

Demo

HTML:

JS:

CSS:

.slider{
    margin:0 auto;
    position: relative;
}
.slider .gallery-holder{
    overflow: hidden;
}
.slider,
.slider .slider-list li{
    width:980px;
}
.slider .slider-list li{
    height:500px;
}
.slider .slider-list li img{
    max-width:100%;
    max-height:100%;
}
.slider .btn-prev,
.slider .btn-next{
    position: absolute;
    top:50%;
    margin-top:-60px;
    width:0;
    height:0;
    border-top:30px solid transparent;
    border-bottom:30px solid transparent;
}
.slider .btn-prev{
    left:-30px;
    border-right:15px solid rgba(0,0,0,0.3);
}
.slider .btn-next{
    right:-30px;
    border-left:15px solid rgba(0,0,0,0.3);
}
.slider .slider-list{
    width:99999px;
    margin:0;
    padding:0;
    list-style: none;
}
.slider .slider-list li{
    float:left;
    overflow: hidden;
    display: flex;
    align-items: center;
    text-align: center;
}
.slider .switcher{
    margin:0 auto;
}
.slider .switcher ul{
    padding:20px 0;
    margin:0;
    list-style: none;
    text-align: center;
}
.slider .switcher ul li{
    display:inline;
    padding:0 10px;
}
.slider .switcher ul li a{
    display:inline-block;
    overflow:hidden;
    text-indent:-9999px;
    border-radius:15px;
    width:10px;
    height:10px;
    line-height:0;
    outline:none;
    background:linear-gradient(#f4f4f4, #9e9e9e);
    background-repeat:no-repeat;
}
.slider .switcher ul li a.active{
    background:#9a9a9a;
}