Горизонтальный скролл

Cyxapuk

VIP
VIP
Прошёл марафон
Регистрация
26 Фев 2017
Сообщения
441
Реакции
104
Баллы
43
Ребят помогите внедрить скролл в похожие новости

Код:
<style>
[class^="scroll"] {
 position: relative;
 height: 10em;
 line-height: 10em;
 padding: 0 3em;
}
[class^="scroll"] input {
 display: none;
}
[class^="scroll"] div {
 height: 100%;
 overflow: hidden;
 white-space: nowrap;
 word-wrap: normal;
 font-size: 0;
}
[class^="scroll"] img {
 position: relative;
 right: 0em;
 width: 25%;
 height: 100%;
 transition: .5s;
}

[class^="scroll"] label {
 cursor: pointer;
 font-weight: 600;
 font-size: 3em;
}
[class^="scroll"] input:nth-of-type(1):checked ~ label:nth-of-type(2):after,
[class^="scroll"] input:nth-of-type(2):checked ~ label:nth-of-type(3):after,
[class^="scroll"] input:nth-of-type(3):checked ~ label:nth-of-type(4):after,
[class^="scroll"] input:nth-of-type(4):checked ~ label:nth-of-type(5):after,
[class^="scroll"] input:nth-of-type(5):checked ~ label:nth-of-type(6):after,
[class^="scroll"] input:nth-of-type(6):checked ~ label:nth-of-type(7):after {
 content: "\3009";
 position: absolute;
 right: 0;
}
[class^="scroll"] input:nth-of-type(2):checked ~ label:nth-of-type(1):after,
[class^="scroll"] input:nth-of-type(3):checked ~ label:nth-of-type(2):after,
[class^="scroll"] input:nth-of-type(4):checked ~ label:nth-of-type(3):after,
[class^="scroll"] input:nth-of-type(5):checked ~ label:nth-of-type(4):after,
[class^="scroll"] input:nth-of-type(6):checked ~ label:nth-of-type(5):after,
[class^="scroll"] input:nth-of-type(7):checked ~ label:nth-of-type(6):after {
 content: "\3008";
 position: absolute;
 left: 0;
}

[class^="scroll"] input:nth-of-type(2):checked ~ div img {right: 25%;}
[class^="scroll"] input:nth-of-type(3):checked ~ div img {right: 50%;}
[class^="scroll"] input:nth-of-type(4):checked ~ div img {right: 75%;}
[class^="scroll"] input:nth-of-type(5):checked ~ div img {right: 100%;}
[class^="scroll"] input:nth-of-type(6):checked ~ div img {right: 125%;}
[class^="scroll"] input:nth-of-type(7):checked ~ div img {right: 150%;}
HTML:
<div class="scroll">

<input type="radio" id="l0" name="raz" checked="checked"/>
<input type="radio" id="l1" name="raz"/>
<input type="radio" id="l2" name="raz"/>
<input type="radio" id="l3" name="raz"/>
<input type="radio" id="l4" name="raz"/>
<input type="radio" id="l5" name="raz"/>
<input type="radio" id="l6" name="raz"/>

<label for="l0"></label>
<label for="l1"></label>
<label for="l2"></label>
<label for="l3"></label>
<label for="l4"></label>
<label for="l5"></label>
<label for="l6"></label>

<div>
<img src="" alt=""/>
<img src="" alt=""/>
<img src="" alt=""/>
<img src="" alt=""/>
<img src="" alt=""/>
<img src="" alt=""/>
<img src="" alt=""/>
<img src="" alt=""/>
<img src="" alt=""/>
<img src="" alt=""/>
</div>

</div>
 

Similar Threads

Сверху Снизу