Home Slider

HTML example:

<!-- start of hero -->
    <section class="hero-slider">
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <div class="slide-inner slide-bg-image" data-background="images/home-slider-1.jpg">
                        <div class="container">
                            <div class="row">
                                <div class="col-lg-10 offset-lg-1">
                                    <div class="header-text text-center">
                                        <h3 class="typer-title" data-swiper-parallax="300">I'm ui/ux designer</h3>
                                        <h1 class="title" data-swiper-parallax="400" >Hi, I am Nik Smith</h1>
                                        <div class="desc" data-swiper-parallax="500" >
                                            <p>Still top of and the drops. What don't issued character god, no ports, credit question and curse casting problem will the one could apply.</p>
                                        </div>
                                        <a href="#" class="button-dark mouse-dir" data-swiper-parallax="600" >Hire Me <span class="dir-part"></span></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div> <!-- end slide-inner --> 
                </div> <!-- end swiper-slide -->
                <div class="swiper-slide">
                    <div class="slide-inner slide-bg-image" data-background="images/home-slider-2.jpg">
                        <div class="container">
                            <div class="row">
                                <div class="col-lg-10 offset-lg-1">
                                    <div class="header-text text-center">
                                        <h3 class="typer-title" data-swiper-parallax="300">Let's work together.</h3>
                                        <h1 class="title" data-swiper-parallax="400" >Hi, I am Nik Smith</h1>
                                        <div class="desc" data-swiper-parallax="500" >
                                            <p>Still top of and the drops. What don't issued character god, no ports, credit question and curse casting problem will the one could apply.</p>
                                        </div>
                                        <a href="#" class="button-dark mouse-dir" data-swiper-parallax="600" >Hire Me <span class="dir-part"></span></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div> <!-- end slide-inner --> 
                </div> <!-- end swiper-slide -->
                <div class="swiper-slide">
                    <div class="slide-inner slide-bg-image" data-background="images/home-slider-3.jpg">
                        <div class="container">
                            <div class="row">
                                <div class="col-lg-10 offset-lg-1">
                                    <div class="header-text text-center">
                                        <h3 class="typer-title" data-swiper-parallax="300">I can create awesome stuff.</h3>
                                        <h1 class="title" data-swiper-parallax="400" >Hi, I am Nik Smith</h1>
                                        <div class="desc" data-swiper-parallax="500" >
                                            <p>Still top of and the drops. What don't issued character god, no ports, credit question and curse casting problem will the one could apply.</p>
                                        </div>
                                        <a href="#" class="button-dark mouse-dir" data-swiper-parallax="600" >Hire Me <span class="dir-part"></span></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div> <!-- end slide-inner --> 
                </div><!-- end swiper-slide --> 
            </div>
            <!-- end swiper-wrapper -->
            <!-- swipper controls -->
            <div class="swiper-pagination"></div>
            <div class="swiper-button-next"></div>
            <div class="swiper-button-prev"></div>
        </div>
    </section>
    <!-- end of hero slider -->        
Was this page helpful?

Leave a Reply

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