<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <h1>JS Simple Slider</h1> <div class="items-carousel"> <div class="item"> <img src="http://gogs.e1g.ru/via-profit/js-simple-slider/raw/master/img/competition.png"> <div class="item-name">Item name</div> <div class="item-price">266 980 $</div> </div> <div class="item"> <img src="http://gogs.e1g.ru/via-profit/js-simple-slider/raw/master/img/content.png"> <div class="item-name">Item name</div> <div class="item-price">14 160 $</div> </div> <div class="item"> <img src="http://gogs.e1g.ru/via-profit/js-simple-slider/raw/master/img/design-tool.png"> <div class="item-name">Item name</div> <div class="item-price">565 889 $</div> </div> <div class="item"> <img src="http://gogs.e1g.ru/via-profit/js-simple-slider/raw/master/img/grid.png"> <div class="item-name">Item name</div> <div class="item-price">876 654 $</div> </div> <div class="item"> <img src="http://gogs.e1g.ru/via-profit/js-simple-slider/raw/master/img/headphones.png"> <div class="item-name">Item name</div> <div class="item-price">324 657 $</div> </div> <div class="item"> <img src="http://gogs.e1g.ru/via-profit/js-simple-slider/raw/master/img/html.png"> <div class="item-name">Item name</div> <div class="item-price">654 435 $</div> </div> <div class="item"> <img src="http://gogs.e1g.ru/via-profit/js-simple-slider/raw/master/img/image.png"> <div class="item-name">Item name</div> <div class="item-price">454 232 $</div> </div> <div class="item"> <img src="http://gogs.e1g.ru/via-profit/js-simple-slider/raw/master/img/layout.png"> <div class="item-name">Item name</div> <div class="item-price">123 213 $</div> </div> <div class="item"> <img src="http://gogs.e1g.ru/via-profit/js-simple-slider/raw/master/img/loading.png"> <div class="item-name">Item name</div> <div class="item-price">543 123 $</div> </div> <div class="item"> <img src="http://gogs.e1g.ru/via-profit/js-simple-slider/raw/master/img/login.png"> <div class="item-name">Item name</div> <div class="item-price">654 766 $</div> </div> <div class="item"> <img src="http://gogs.e1g.ru/via-profit/js-simple-slider/raw/master/img/pantone.png"> <div class="item-name">Item name</div> <div class="item-price">333 443 $</div> </div> </div> <script> new JsSimpleSlider(document.querySelector('.items-carousel')); </script>

body { width: 1000px; margin: 0 auto; } h1 { text-align: center; text-transform: uppercase; font-weight: normal; font-family: Tahoma, Arial; color: #757474; margin: 10px 0 50px 0; } .items-carousel { width: 800px; position: relative; white-space: nowrap; overflow: hidden; margin: 0 auto; } .items-carousel.-loaded { overflow: visible; } .items-carousel .item { position: relative; display: inline-block; white-space: normal; box-sizing: border-box; padding: 5px; vertical-align: top; height: 210px; width: 180px; text-align: center; text-decoration: none; box-shadow: inset 0 0 0 1px #e8e8e8; } .items-carousel .item img { display: block; margin: 0 auto; height: 86px; } .items-carousel .item .item-name { position: relative; margin-top: 20px; height: 34px; color: #9baaab; } .items-carousel .item .item-price { position: relative; margin-top: 34px; font-size: 14px; color: #28777d; } .js-simple-slider-btn { position: absolute; top: 50%; left: 0; width: 30px; height: 30px; margin-top: -15px; cursor: pointer; z-index: 1; opacity: .8; background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAMAAAAM7l6QAAAAG1BMVEXFxcXIyMjDw8P29vbm5ubKysrj4+PKsbHIy8s58uuVAAAAXElEQVQokdXTwQ6AMAgD0NKJ7v+/WD05WEbjTbvLkpcQBhmObus4OorYdX7DhBdMazuXTLTt0cxJE2eNPGngWUemjz2/ZVFctXZfq4epsaihqpWohcZ8mr34geYngNwBUF68rpAAAAAASUVORK5CYII='); } .js-simple-slider-btn:hover { opacity: 1; } .js-simple-slider-btn-next { left: inherit; right: 0; background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAMAAAAM7l6QAAAAG1BMVEXFxcXIyMjU1NTAwMD9/f3KysrX19f5+fnQ0NBJ1iZFAAAAVklEQVQokdWTSQ7AMAgDWbL0/y9urzHRVOqp8XUE2CCsO6ibG8jPwE8MwHnNSKjOaMqX2ZWv1goX58o1mPCSO2OOz5ibszUOxmvhpb6dhA+6068xv+ANnVcBb0TdfO8AAAAASUVORK5CYII='); }