Я начинаю изучать CSS и HTML и на моем сайте, я сделал баннер, который выглядит следующим образом: Css Banner Slider
мне было интересно, если это возможно, принять этот пример, который я сделал, и превратить его в баннер с помощью ползунка с до 3-х изображений, например:
Я полагаю, что это не возможно, только с помощью CSS, но я ничего не знаю о JavaScript, я пробовал много учебники слайдеров, но никто не выглядел который мне нужен, который представляет собой баннер со 100% шириной.
Может ли кто-нибудь помочь мне преобразовать первое изображение во второе?
Мой код:
HTML:<div id="banner" class="banner"></div>
CSS:
.banner {
width: 100%;
height: 400px;
margin-top: -20px;
background: url("http://s2.postimg.org/vtiiv9maf/index_banner.jpg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
jsfiddle пример моего кода: https://jsfiddle.net/wykknyqf/