Slider - section

This section layout represents the "slider section" of the index.html and gallery.html files. You can use it to showcase your products, your projects or some featured pictures.

home page

CODE

Here is the HTML code to obtain it. Embed it within the main tag with class page-main.

Please, note that you can not use the data-section value twice for a different section within an HTML page, as it will be the id of the section later.

HTML Navigation menu
<div class="section section-twoside fp-auto-height-responsive " data-section="projects">
    <!-- Begin of section wrapper -->
    <div class="section-wrapper twoside">
        <!-- title -->
        <div class="section-title text-center">
            <h5 class="title-bg ">Projects</h5>
        </div>
    
    
        <!-- begin of carousel-swiper-beta -->
        <div class="slider-wrapper carousel-swiper-beta carousel-smalls carousel-swiper-beta-demo" style="margin-top:40px">
            <!-- slider -->
            <div class="slider-container swiper-container">
                <ul class="item-list swiper-wrapper">
                    <!-- item -->
                    <li class="slide-item swiper-slide">
                        <div class="item-wrapper" href="item.html#project_url_2">
                            <div class="illustr">
                                <img src="img/items/img-sample2-small.jpg" alt="Image" class="img">
                            </div>
                            <div class="legend">
                                <h3 class="display-3">Mountain</h3>
                                <h4>Music / Beats</h4>
                            </div>
                        </div>
                    </li>
                    <!-- item -->
                    <li class="slide-item swiper-slide">
                        <div class="item-wrapper" href="item.html#project_url_2">
                            <div class="illustr">
                                <img src="img/items/img-sample3-small.jpg" alt="Image" class="img">
                            </div>
                            <div class="legend">
                                <h3 class="display-3">Cloud</h3>
                                <h4>Music / Beats</h4>
                            </div>
                        </div>
                    </li>
                    <!-- ... add another item -->
                </ul>
            </div>
            <!-- pagination -->
            <div class="items-pagination bar"></div>
    
            <!-- navigation -->
            <div class="items-button bottom fit items-button-prev">
                <a class="btn btn-transp-arrow btn-primary icon-left" href="">
                    <span class="icon arrow-left"></span>
                    <span class="text">Prev</span>
                </a>
            </div>
            <div class="items-button bottom fit items-button-next">
                <a class="btn btn-transp-arrow btn-primary" href="">
                    <span class="icon arrow-right"></span>
                    <span class="text">Next</span>
                </a>
            </div>
        </div>
        <!-- end of carousel-swiper-beta -->
    
    
    </div>
    <!-- End of section wrapper -->
    </div>

To add another slide, dublicate the following li tag within the item-list ul

HTML Navigation menu
<li class="slide-item swiper-slide">
    <div class="item-wrapper" href="link">
        <div class="illustr">
            <img src="image-url" alt="Image" class="img">
        </div>
        <div class="legend">
            <h3 class="display-3">Title</h3>
            <h4>Headline</h4>
        </div>
    </div>
</li>

Javascript

Within the main.js javascript file, the following code launch the slider (it uses Swiper JS carousel plugin):

Javascript slider
// 4 Carousel Slider
new Swiper('.carousel-swiper-beta-demo .swiper-container', {
    pagination: '.carousel-swiper-beta-demo .items-pagination',
    paginationClickable: '.carousel-beta-alpha-demo .items-pagination',
    nextButton: '.carousel-swiper-beta-demo .items-button-next',
    prevButton: '.carousel-swiper-beta-demo .items-button-prev',
    loop: true,
    grabCursor: true,
    centeredSlides: true,
    autoplay: 5000,
    autoplayDisableOnInteraction: false,
    slidesPerView: 1,
    spaceBetween: 0,
    breakpoints: {
        1024: {
            slidesPerView: 1,
        },
        800: {
            slidesPerView: 1,
            spaceBetween: 0
        },
        640: {
            slidesPerView: 1,
            spaceBetween: 0
        },
        440: {
            slidesPerView: 1,
            spaceBetween: 0
        }
    }
});