Как создать слайдер c карточками профиля используя используя только HTML и CSS ✧ Слайдер-карусель Owl Carousel

V.I.P ЭКСКЛЮЗИВ
boosty.to/monster-tem

Подпишись и скачивай
любые файлы, скрипты, проекты и многое другое

MonsterTem.ru » Слайдеры и Карусели » Как создать слайдер c карточками профиля используя используя только HTML и CSS

Как создать слайдер c карточками профиля используя используя только HTML и CSS

2.10.2024

26 просмтотров

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

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

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

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;
}

Скачать

Категории: Слайдеры и Карусели

MonsterTem.ru

V.I.P ЭКСКЛЮЗИВ
boosty.to/monster-tem