Gallery item - section

This section layout represents the an item of the gallery.html file. Use it to present products, pictures , an event , ...

home page

Horizontal Slider

Here is the HTML code to obtain it. Embed it within the main tag with id mainpage (Check out gallery.html file for sample code). Replace texts and buttons by yours.

You can duplicate this section as much as you want. Just 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. You have to use different value for the duplicated section.

HTML Section - Horizontal Gallery Slider Item
<!-- Begin of projects / gallery slider section -->
<div class="section section-twoside gallery-slider " data-section="gallery">
    <div class="slide">
        <div class="slide-wrapper">
            <div class="item-wrapper">
                <div class="illustr">
                    <div class="img bg-img" data-image-src="img/items/img-sample1.jpg"></div>
                </div>
                <div class="legend">
                    <a href="item.html#project_url">
                        <h3 class="display-decor display-title">Horizontal Slider</h3>
                        <h4>Kitchen Design</h4>
                        <p class="desc-decor">Lorem ipsum magicum dolor sit amet, consectetur adipiscing elit. Maecenas a sem ultrices neque vehicula fermentum a
                            sit amet nulla. Lorem ipsum magicum dolor sit amet, consectetur adipiscing elit. Maecenas a sem ultrices neque vehicula
                            fermentum a sit amet nulla.</p>
                    </a>
                    <!-- Action button -->
                    <div class="btns-action anim-5">
                        <a class="btn btn-arrow btn-primary" href="item.html#project_url">
                            <span class="icon">
                                <span class="arrow-right"></span>
                            </span>
                            <span class="text">View Project</span>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="slide">
        <div class="slide-wrapper">
            <div class="item-wrapper">
                <div class="illustr">
                    <div class="img bg-img" data-image-src="img/items/img-sample2.jpg"></div>
                </div>
                <div class="legend">
                    <a href="item.html#project_url">
                        <h3 class="display-decor display-title">Jardin Bio</h3>
                        <h4>Garden</h4>
                        <p class="desc-decor">Lorem ipsum magicum dolor sit amet, consectetur adipiscing elit. Maecenas a sem ultrices neque vehicula fermentum a
                            sit amet nulla. Lorem ipsum magicum dolor sit amet, consectetur adipiscing elit. Maecenas a sem ultrices neque vehicula
                            fermentum a sit amet nulla.</p>
                    </a>
                    <!-- Action button -->
                    <div class="btns-action anim-5">
                        <a class="btn btn-arrow btn-primary" href="item.html#project_url">
                            <span class="icon">
                                <span class="arrow-right"></span>
                            </span>
                            <span class="text">View Project</span>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="slide">
        <div class="slide-wrapper">
            <div class="item-wrapper">
                <div class="illustr">
                    <div class="img bg-img" data-image-src="img/items/img-sample3.jpg"></div>
                </div>
                <div class="legend">
                    <a href="item.html#project_url">
                        <h3 class="display-decor display-title">Africa Meuble</h3>
                        <h4>Furniture Design</h4>
                        <p class="desc-decor">Lorem ipsum magicum dolor sit amet, consectetur adipiscing elit. Maecenas a sem ultrices neque vehicula fermentum a
                            sit amet nulla. Lorem ipsum magicum dolor sit amet, consectetur adipiscing elit. Maecenas a sem ultrices neque vehicula
                            fermentum a sit amet nulla.</p>
                    </a>
                    <!-- Action button -->
                    <div class="btns-action anim-5">
                        <a class="btn btn-arrow btn-primary" href="item.html#project_url">
                            <span class="icon">
                                <span class="arrow-right"></span>
                            </span>
                            <span class="text">View Project</span>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Slider Navigation -->
    <div class="section-slider-footer slider-navigation">
        <a class="left">
            <span class="btn btn-arrow">
                <span class="icon">
                    <span class="arrow-left"></span>
                </span>
            </span>
        </a>
        <a class="right">
            <span class="btn btn-arrow">
                <span class="icon">
                    <span class="arrow-right"></span>
                </span>
            </span>
        </a>
        <div class="text">
            <p>Browse Gallery</p>
        </div>
    </div>

    <!-- Arrows scroll down/up -->
    <footer class="section-footer scrolldown">
        <a class="down">
            <span class="btn btn-arrow">
                <span class="icon">
                    <span class="arrow-down"></span>
                </span>
            </span>
        </a>
    </footer>

</div>
<!-- End of projects / gallery slider section -->

To add another slide, dublicate the following div tag :

HTML Horizontal Slider Item
<div class="slide">
    <div class="slide-wrapper">
        <div class="item-wrapper">
            <div class="illustr">
                <div class="img bg-img" data-image-src="img/items/img-sample3.jpg"></div>
            </div>
            <div class="legend">
                <a href="item.html#project_url">
                    <h3 class="display-decor display-title">Africa Meuble</h3>
                    <h4>Furniture Design</h4>
                    <p class="desc-decor">Lorem ipsum magicum dolor sit amet, consectetur adipiscing elit. Maecenas a sem ultrices neque vehicula fermentum a
                        sit amet nulla. Lorem ipsum magicum dolor sit amet, consectetur adipiscing elit. Maecenas a sem ultrices neque vehicula
                        fermentum a sit amet nulla.</p>
                </a>
                <!-- Action button -->
                <div class="btns-action anim-5">
                    <a class="btn btn-arrow btn-primary" href="item.html#project_url">
                        <span class="icon">
                            <span class="arrow-right"></span>
                        </span>
                        <span class="text">View Project</span>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

Vertical Slider

A vertical slider is a regular fullpage js section.

Here is the HTML code to obtain it. Embed it within the main tag with id mainpage (Check out index.html file for sample code). Replace texts and buttons by yours.

HTML Section - Vertical slider Item
<!-- Begin of vertical slide item section -->
<div class="section section-vertical-slide fp-auto-height-responsive " data-section="gallery-slide-1">
    <div class="section-cover-full fit bg-img mask-layer" data-image-src="./img/items/img-sample4.jpg">
    </div>
    <!-- Begin of section wrapper -->
    <div class="section-wrapper fullwidth fullheight with-margin center-lg-v">

        <!-- content -->
        <div class="section-content anim">
            <div class="row justify-content-between">
                <div class="col-12 col-md-5 col-lg-6  text-left center-v">
                    <div class="wrapper">
                        <!-- title and description -->
                        <div class="title-desc">
                            <h2 class="display-4 display-title display-decor anim-1">Vertical Slide</h2>
                            <h4 class="anim-2">Living design from
                                <strong>$1000</strong>
                            </h4>
                            <p class="anim-2  desc-decor">This is a vertical slide element. Duplicate it for more slides. Lorem ipsum magicum dolor sit amet, consectetur adipiscing
                                elit. Maecenas a sem ultrices neque vehicula fermentum a sit amet nulla.
                            </p>
                        </div>

                        <!-- Action button -->
                        <div class="btns-action anim-3">
                            <a class="btn btn-outline btn-primary" href="#services">
                                <span class="text">Details</span>
                                <span class="icon">
                                    <span class="arrow-right"></span>
                                </span>
                            </a>
                        </div>
                    </div>
                </div>


            </div>
        </div>


    </div>
    <!-- End of section wrapper -->

    <!-- Slider Navigation -->
    <div class="section-slider-footer slider-navigation scrolldown">
        <a class="up">
            <span class="btn btn-arrow">
                <span class="icon">
                    <span class="arrow-up"></span>
                </span>
            </span>
        </a>
        <a class="down">
            <span class="btn btn-arrow">
                <span class="icon">
                    <span class="arrow-down"></span>
                </span>
            </span>
        </a>
        <div class="text">
            <p>Browse Gallery</p>
        </div>
    </div>

    <!-- Arrows scroll down/up -->
    <footer class="section-footer scrolldown">
        <a class="up">
            <span class="btn btn-arrow">
                <span class="icon">
                    <span class="arrow-up"></span>
                </span>
            </span>
        </a>
        <a class="down">
            <span class="btn btn-arrow">
                <span class="icon">
                    <span class="arrow-down"></span>
                </span>
            </span>
        </a>
    </footer>
</div>
<!-- End of vertical slide item section -->