Как сделать не стандартный css слайдер?

180
22 сентября 2018, 18:00

Хочу сделать слайдер с radio button, чтобы зеленые слайды вверху перемещались на определенное расстояние влево, за экраном есть еще слайды, и чтобы работало в две стороны. Как сделать не знаю, как именно задать анимацию для другого блока при выборе radio button.

html { 
    overflow-x: hidden; 
    width: 100%; 
} 
 
.main { 
    padding: 3.5em 0 0 0; 
    margin-left: auto; 
    margin-right: auto; 
    width: 940px; 
    padding-bottom: 45px; 
} 
 
#slider { 
    height: 160px; 
    width: 4000px; 
    overflow: visible; 
    word-spacing: -.36em; 
    line-height: 0; 
    position: absolute; 
} 
 
.slide { 
    width: 180px; 
    height: 160px; 
    background-color: green; 
    display: inline-block; 
    word-spacing: normal; 
    margin-right: 10px; 
    border-radius: 4px; 
} 
 
.slider__buttons input[type="radio"] { 
    display: none; 
} 
 
.slider__buttons label { 
    background-image: url(../img/unchecked.svg); 
    background-repeat: no-repeat; 
    background-position: center; 
    margin-right: 30px; 
    width: 25px; 
    height: 25px; 
    cursor: pointer; 
    float: left; 
} 
 
.slider__buttons input[type="radio"]:checked + label { 
    background-image: url(../img/checked.svg); 
    background-repeat: no-repeat; 
    background-position: center; 
} 
 
.marginfix { 
    margin-top: 180px; 
    padding-bottom: 30px;  
} 
 
.clearfix::after { 
    content: ""; 
    clear: both; 
    display: table; 
}
<div class="main clearfix"> 
            <h2 class="arcticle__header">ILLUSTRATIVE WORKS</h2> 
            <p class="arcticle__text">Sed suscipit risus vel sapien fringilla elementum. Donec vulputate sapien suscipit nulla tincidunt sodales. Ut ut nisi in nisl convallis ultricies!<br> 
                Curabitur tristique faucibus tincidunt. Donec rutrum mi faucibus nisi luctus sodales facilisis neque semper.</p> 
                <div id="slider" class="clearfix"> 
                    <div class="slide"></div> 
                    <div class="slide"></div> 
                    <div class="slide"></div> 
                    <div class="slide"></div> 
                    <div class="slide"></div> 
                    <div class="slide"></div> 
                    <div class="slide"></div> 
                    <div class="slide"></div> 
                    <div class="slide"></div> 
                    <div class="slide"></div> 
                    <div class="slide"></div> 
                    <div class="slide"></div> 
                    <div class="slide"></div> 
                    <div class="slide"></div> 
                    <div class="slide"></div> 
                    <div class="slide"></div> 
                </div> 
                <div class="slider__buttons marginfix"> 
                    <input name="1" type="radio" id="radio1" checked> 
                    <label for="radio1"></label> 
                    <input name="1" type="radio" id="radio2"> 
                    <label for="radio2"></label> 
                    <input name="1" type="radio" id="radio3"> 
                    <label for="radio3"></label> 
                    <input name="1" type="radio" id="radio4"> 
                    <label for="radio4"></label> 
                </div> 
            <h2 class="arcticle__header">GRAPHICAL WORKS</h2> 
            <p class="arcticle__text">Sed suscipit risus vel sapien fringilla elementum. Donec vulputate sapien suscipit nulla tincidunt sodales. Ut ut nisi in nisl convallis ultricies!<br> 
                Curabitur tristique faucibus tincidunt. Donec rutrum mi faucibus nisi luctus sodales facilisis neque semper.</p> 
                <!--Slider--> 
            <h2 class="arcticle__header">CORPORATES</h2> 
            <p class="arcticle__text">Sed suscipit risus vel sapien fringilla elementum. Donec vulputate sapien suscipit nulla tincidunt sodales. Ut ut nisi in nisl convallis ultricies!<br> 
                Curabitur tristique faucibus tincidunt. Donec rutrum mi faucibus nisi luctus sodales facilisis neque semper.</p> 
                <!--Slider-->

READ ALSO
Как прикрепить текст к низу с расширением вверх?

Как прикрепить текст к низу с расширением вверх?

Ка сделать чтобы было как на картинке, чтобы в зависимости от высоты 2-ого снизу поля, 3-е снизу меняло свою позицию

155
javascript создание модели данных

javascript создание модели данных

Вопрос общий, о том как правильно делать

165
Сворачивание\разворачивание таблицы

Сворачивание\разворачивание таблицы

Реализовано сворачивание\разворачивание таблицы при нажатии на кнопкуПочему первая таблица работает как надо, а ее копия ниже не работает?...

134
Удаление непечатаемых символов JS RegExp

Удаление непечатаемых символов JS RegExp

Всем привет! Столкнулся с интересной задачей: имеется строка, в которой могут содержаться непечатаемые символы(пробел, перевод каретки, табуляция...

124