October 17, 2021

Flickity carousels slider

<div class="slider_wrapper"  data-flickity='{ "imagesLoaded": true, "percentPosition": false }'>
        <div class="carousel">
        <div class="item">
            <div class="left_box">
                <a href="#">
                <img src="https://tolmatol.com/wp-content/uploads/2021/10/image-1.png" alt="">
                <div class="caption">
                    <h4>Title Heading</h4>
                    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Consequatur non similique, sequi excepturi veniam nostrum modi voluptatum beatae sunt cum labore, veritatis consequuntur! Ad aliquam numquam laudantium alias maiores recusandae?</p>
                </div>
            </a>

            </div>
            <div class="right_box">
                <div class="box">
                    <a href="#">
                    <img src="https://tolmatol.com/wp-content/uploads/2021/10/image-2.png" alt="">
                    <div class="caption">
                        <h4>Heading Title</h4>
                        <p>Lorem Ipsum Dummy...</p>
                    </div>
                </a>
                </div>
                <div class="box">
                    <a href="#">
                    <img src="https://tolmatol.com/wp-content/uploads/2021/10/image-3.png" alt="">
                    <div class="caption">
                        <h4>Heading Title</h4>
                        <p>Lorem Ipsum Dummy...</p>
                    </div>
                </a>
                </div>
            </div>
        </div>
    </div>
    <div class="carousel">

        <div class="item">
            <div class="left_box">
                <a href="#">
                <img src="https://tolmatol.com/wp-content/uploads/2021/10/image-4.jpg" alt="">
                <div class="caption">
                    <h4>Title Heading</h4>
                    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Consequatur non similique, sequi excepturi veniam nostrum modi voluptatum beatae sunt cum labore, veritatis consequuntur! Ad aliquam numquam laudantium alias maiores recusandae?</p>
                </div>
            </a>

            </div>
            <div class="right_box">
                <div class="box">
                    <a href="#">
                    <img src="https://tolmatol.com/wp-content/uploads/2021/10/image-5.jpg" alt="">
                    <div class="caption">
                        <h4>Heading Title</h4>
                        <p>Lorem Ipsum Dummy...</p>
                    </div>
                </a>
                </div>
                <div class="box">
                    <a href="#">
                    <img src="https://tolmatol.com/wp-content/uploads/2021/10/image-6.jpg" alt="">
                    <div class="caption">
                        <h4>Heading Title</h4>
                        <p>Lorem Ipsum Dummy...</p>
                    </div>
                </a>
                </div>
            </div>
        </div>
    </div>
    </div>

 

<link rel="stylesheet" href="https://unpkg.com/flickity@2/dist/flickity.min.css" />
 body { font-family: sans-serif; margin: 0; padding: 0;}
    .slider_wrapper { margin: 0px 20px;}
    .slider_wrapper .carousel { width: 100%;}
    .slider_wrapper .item { display: grid; grid-template-columns: 60% 40%; grid-column-gap: 5px; }
    .slider_wrapper  img { width: 100%; height: 100%;}
    .slider_wrapper .item .caption {
    position: absolute;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%; color:#fff; text-align:center; line-height: 1.5;
}
.slider_wrapper .item .caption h4 { font-size: 1.5rem; margin: 0; padding: 0;}
.left_box {
    position: relative; overflow: hidden;
}

.right_box .box {
    position: relative; overflow: hidden;}
.right_box .box:nth-child(2) { margin-top: 5px;}
.item a:before {
    position: absolute;
    content: '';
    background: #00000091; 
    width: 100%;
    height: 100%;
}
.slider_wrapper button {
    border-radius: 0px;
}
@media(max-width:767px) {
    .slider_wrapper .item {grid-template-columns: 100%;}
    .right_box  {     grid-template-columns: 1fr 1fr;
    display: grid;
    grid-gap: 5px; }
    .right_box .box:nth-child(2) { margin-top: 0px;}
    .left_box{ margin-bottom: 5px;}
    .slider_wrapper .item .caption h4 { font-size: 1rem;;}
    .slider_wrapper .item .caption p { display: none;}
}

 

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <!-- JavaScript -->
<script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>

 

Leave a Reply

Your email address will not be published. Required fields are marked *