Карточки Профиля

Как создать слайдер c карточками профиля используя используя только HTML и CSS ✧ Слайдер-карусель Owl Carousel | How to Create a Card Slider using HTML and CSS only

6/05/2024 08:07:00 PM Просмотров: Загрузка...
Как создать слайдер c карточками профиля используя используя только HTML и CSS ✧ Слайдер-карусель Owl Carousel | How to Create a Card Slider using HTML and CSS only

Всем Привет! Сегодня вы узнаете как создать слайдер c карточками профиля на основе Owl Carousel, HTML и CSS. Слайдер содержит изображение профиля и кнопки на социальные сети. Слайдер разрабатывался без адаптивности. НЕ совместим со всеми мобильными устройствами. 

Вы можете посмотреть видео демонстрацию, скопировать код ниже, попробовать сверстать слайдер по видео самому,  или скачать архив с готовым кодом.

СКАЧАТЬ
ДЕМО
Logo Monster Tem

Если это видео оказалось для вас полезным, оставьте комментарий со своими мыслями или вопросами. Ваши отзывы помогают нам создавать более ценный контент. 

HTML КОД:

<!--Font Awesome CDN-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" />

<div class="slider">

        <input type="radio" name="card" id="c-1">
        <input type="radio" name="card" id="c-2">
        <input type="radio" name="card" id="c-3" checked>
        <input type="radio" name="card" id="c-4">
        <input type="radio" name="card" id="c-5">


        <div class="cards">

            <label for="c-1" class="item">
                <div class="main_content">
                    <div class="img">
                        <img src="./image/pic1.avif" alt="">
                    </div>

                    <div class="content">
                        <h1>Jhon Doe</h1>
                        <h4>Front End Developer</h4>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>

                        <div class="social">
                            <div class="icon"><a href="#"><i class="fa-brands fa-facebook" style="--color: #3b5998"></i></a></div>
                            <div class="icon"><a href="#"><i class="fa-brands fa-square-instagram" style="--color: #e14664"></i></a></div>
                            <div class="icon"><a href="#"><i class="fa-brands fa-twitter" style="--color: #00acee"></i></a></div>
                            <div class="icon"><a href="#"><i class="fa-brands fa-linkedin" style="--color: #0077b5"></i></a></div>
                        </div>
                    </div>
                </div>
            </label>

            <label for="c-2" class="item">
                <div class="main_content">
                    <div class="img">
                        <img src="./image/pic2.jpg" alt="">
                    </div>

                    <div class="content">
                        <h1>Michael Lucas</h1>
                        <h4>Back End Developer</h4>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>

                        <div class="social">
                            <div class="icon"><a href="#"><i class="fa-brands fa-facebook" style="--color: #3b5998"></i></a></div>
                            <div class="icon"><a href="#"><i class="fa-brands fa-square-instagram" style="--color: #e14664"></i></a></div>
                            <div class="icon"><a href="#"><i class="fa-brands fa-twitter" style="--color: #00acee"></i></a></div>
                            <div class="icon"><a href="#"><i class="fa-brands fa-linkedin" style="--color: #0077b5"></i></a></div>
                        </div>
                    </div>
                </div>
            </label>

            <label for="c-3" class="item">
                <div class="main_content">
                    <div class="img">
                        <img src="./image/pic3.avif" alt="">
                    </div>

                    <div class="content">
                        <h1>Henry Elijah</h1>
                        <h4>Graphics Designer</h4>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>

                        <div class="social">
                            <div class="icon"><a href="#"><i class="fa-brands fa-facebook" style="--color: #3b5998"></i></a></div>
                            <div class="icon"><a href="#"><i class="fa-brands fa-square-instagram" style="--color: #e14664"></i></a></div>
                            <div class="icon"><a href="#"><i class="fa-brands fa-twitter" style="--color: #00acee"></i></a></div>
                            <div class="icon"><a href="#"><i class="fa-brands fa-linkedin" style="--color: #0077b5"></i></a></div>
                        </div>
                    </div>
                </div>
            </label>

            <label for="c-4" class="item">
                <div class="main_content">
                    <div class="img">
                        <img src="./image/pic4.avif" alt="">
                    </div>

                    <div class="content">
                        <h1>Alexander Leo</h1>
                        <h4>Data Analyst</h4>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>

                        <div class="social">
                            <div class="icon"><a href="#"><i class="fa-brands fa-facebook" style="--color: #3b5998"></i></a></div>
                            <div class="icon"><a href="#"><i class="fa-brands fa-square-instagram" style="--color: #e14664"></i></a></div>
                            <div class="icon"><a href="#"><i class="fa-brands fa-twitter" style="--color: #00acee"></i></a></div>
                            <div class="icon"><a href="#"><i class="fa-brands fa-linkedin" style="--color: #0077b5"></i></a></div>
                        </div>
                    </div>
                </div>
            </label>

            <label for="c-5" class="item">
                <div class="main_content">
                    <div class="img">
                        <img src="./image/pic5.avif" alt="">
                    </div>

                    <div class="content">
                        <h1>David Joseph</h1>
                        <h4>Full Stack Developer</h4>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>

                        <div class="social">
                            <div class="icon"><a href="#"><i class="fa-brands fa-facebook" style="--color: #3b5998"></i></a></div>
                            <div class="icon"><a href="#"><i class="fa-brands fa-square-instagram" style="--color: #e14664"></i></a></div>
                            <div class="icon"><a href="#"><i class="fa-brands fa-twitter" style="--color: #00acee"></i></a></div>
                            <div class="icon"><a href="#"><i class="fa-brands fa-linkedin" style="--color: #0077b5"></i></a></div>
                        </div>
                    </div>
                </div>
            </label>

        </div>

        <div class="dots">
            <label for="c-1"></label>
            <label for="c-2"></label>
            <label for="c-3"></label>
            <label for="c-4"></label>
            <label for="c-5"></label>
        </div>

    </div>
CSS КОД:

body{
    margin: 0;
    background: #bcb9b9;
    font-family: sans-serif;
    display: flex;
    align-items: center;
    min-height: 100vh;
}

.slider{
    width: 100%;
}

.slider input{
    display: none;
}

.cards{
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    min-height: 350px;
    perspective: 1000px;
}

.cards .item{
    width: 300px;
    height: 400px;
    border-radius: 5px;
    background-color: #21262d;
    color: #fff;
    position: absolute;
    top: 0;
    text-align: center;
    box-sizing: border-box;
    user-select: none;
    cursor: pointer;
    box-shadow: 0 0 10px rgba(0,0,0,0.3);
    transition: transform 0.4s;
    border: 3px solid #fff;
    overflow: hidden;
}

.cards .item .main_content{
    width: 100%;
}

.cards .item .main_content .img{
    width: 100%;
    height: 100%;
}

.cards .item .main_content .img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cards .item .main_content .content{
    display: none;
}

.cards .item .main_content .content h1{
    font-size: 30px;
    color: #fff;
}

.cards .item .main_content .content h4,
.cards .item .main_content .content p{
    margin-top: -10px;
}

.cards .item .main_content .content p{
    font-size: 13px;
    font-weight: 300;
}

.cards .item .main_content .content .social{
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.content .social .icon{
    width: 40px;
    height: 40px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.content .social .icon i{
    color: #000;
    font-size: 22px;
    transition: 0.5s;
}

.content .social .icon:hover i{
    color: var(--color);
}


.dots{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 80px;
}

.dots label{
    height: 5px;
    width: 5px;
    border-radius: 50%;
    background-color: #21262d;
    cursor: pointer;
    margin: 7px;
    transition-duration: 0.2s;
}



#c-1:checked ~ .dots label[for="c-1"],
#c-2:checked ~ .dots label[for="c-2"],
#c-3:checked ~ .dots label[for="c-3"],
#c-4:checked ~ .dots label[for="c-4"],
#c-5:checked ~ .dots label[for="c-5"]{
    transform: scale(2);
    background-color: #fff;
    box-shadow: 0px 0px 0px 3px #342f2fe6;
}

#c-1:checked ~ .dots label[for="c-2"],
#c-2:checked ~ .dots label[for="c-1"],
#c-2:checked ~ .dots label[for="c-3"],
#c-3:checked ~ .dots label[for="c-2"],
#c-3:checked ~ .dots label[for="c-4"],
#c-4:checked ~ .dots label[for="c-3"],
#c-4:checked ~ .dots label[for="c-5"],
#c-5:checked ~ .dots label[for="c-4"]{
    transform: scale(1.5);
}

#c-1:checked ~ .cards label[for="c-3"],
#c-2:checked ~ .cards label[for="c-4"],
#c-3:checked ~ .cards label[for="c-5"],
#c-4:checked ~ .cards label[for="c-1"],
#c-5:checked ~ .cards label[for="c-2"]{
    transform: translate3d(600px, 0, -180px) rotateY(-25deg);
    z-index: 2;
}

#c-1:checked ~ .cards label[for="c-2"],
#c-2:checked ~ .cards label[for="c-3"],
#c-3:checked ~ .cards label[for="c-4"],
#c-4:checked ~ .cards label[for="c-5"],
#c-5:checked ~ .cards label[for="c-1"]{
    transform: translate3d(300px, 0, -90px) rotateY(-15deg);
    z-index: 3;
}

#c-2:checked ~ .cards label[for="c-1"],
#c-3:checked ~ .cards label[for="c-2"],
#c-4:checked ~ .cards label[for="c-3"],
#c-5:checked ~ .cards label[for="c-4"],
#c-1:checked ~ .cards label[for="c-5"]{
    transform: translate3d(-300px, 0, -90px) rotateY(15deg);
    z-index: 3;
}

#c-3:checked ~ .cards label[for="c-1"],
#c-4:checked ~ .cards label[for="c-2"],
#c-5:checked ~ .cards label[for="c-3"],
#c-2:checked ~ .cards label[for="c-5"],
#c-1:checked ~ .cards label[for="c-4"]{
    transform: translate3d(-600px, 0, -180px) rotateY(25deg);
}

#c-1:checked ~ .cards label[for="c-1"],
#c-2:checked ~ .cards label[for="c-2"],
#c-3:checked ~ .cards label[for="c-3"],
#c-4:checked ~ .cards label[for="c-4"],
#c-5:checked ~ .cards label[for="c-5"]{
    z-index: 4;
    padding: 30px;
}

#c-1:checked ~ .cards label[for="c-1"] .main_content .img,
#c-2:checked ~ .cards label[for="c-2"] .main_content .img,
#c-3:checked ~ .cards label[for="c-3"] .main_content .img,
#c-4:checked ~ .cards label[for="c-4"] .main_content .img,
#c-5:checked ~ .cards label[for="c-5"] .main_content .img{
    margin: auto;
    width: 150px;
    height: 150px;
    background: #fff;
    padding: 3px;
    border-radius: 50%;
}


#c-1:checked ~ .cards label[for="c-1"] .main_content .img img,
#c-2:checked ~ .cards label[for="c-2"] .main_content .img img,
#c-3:checked ~ .cards label[for="c-3"] .main_content .img img,
#c-4:checked ~ .cards label[for="c-4"] .main_content .img img,
#c-5:checked ~ .cards label[for="c-5"] .main_content .img img{
    width: 150px;
    height: 150px;
    border-radius: 50%;
    object-fit: cover;
}

#c-1:checked ~ .cards label[for="c-1"] .main_content .content,
#c-2:checked ~ .cards label[for="c-2"] .main_content .content,
#c-3:checked ~ .cards label[for="c-3"] .main_content .content,
#c-4:checked ~ .cards label[for="c-4"] .main_content .content,
#c-5:checked ~ .cards label[for="c-5"] .main_content .content{
    display: block;
}


Tags:
Как создать красивый слайдер для галереи изображений с помощью HTML CSS и JavaScript
Кликандер (clickunder). Рабочий скрипт кликандера
Адаптивный слайдер карточек с использованием HTML, CSS и JavaScript | Swiper Js
Создать простой веб-сайт с использованием HTML и CSS | Бесплатный исходный код
Как создать красивый и адаптивный слайдер изображений с помощью HTML CSS и JavaScript
Как создать адаптивный сайт с фоновым видеослайдом используя HTML CSS и JavaScript
Как создать анимированные вкладки используя HTML CSS и JavaScript
Адаптивный слайдер карточек с дополнительными функциями в HTML CSS и JavaScript
Адаптивные карточки с анимацией наложения
Как создать боковую панель в HTML CSS JavaScript

0 Комментарии