Summer Sale! All accounts are 50% off this week.

lilo's avatar
Level 2

How to put scroll down button on a slider?

Hi,I would like to put a scroll down button at the bottom of the slider part of my website.

Here is my slider part:

<section id="slider" class="slider-element slider-parallax swiper_wrapper full-screen clearfix" data-autoplay="5000" data-speed="650" data-loop="true">
    <div class="slider-parallax-inner">
        <div class="swiper-container swiper-parent">
            <div class="swiper-wrapper">

                <div class="swiper-slide dark">
                    <div class="container clearfix">
                        <div class="slider-caption slider-caption-center" style="max-width: 750px">
                            <h2 data-animate="fadeInUp" class="d-none d-md-block">Title</h2>
                            <h2 data-animate="fadeInUp" class="d-block d-md-none" style="font-size: 1rem">Title</h2>
                            <p class="d-none d-sm-block" data-animate="fadeInUp" data-delay="200">Text</p>
                            <a href="#videoSection" class="button button-border button-rounded button-reveal tright button-large topmargin d-none d-md-inline-block" data-animate="fadeInUp" data-delay="400"><i class="icon-angle-right"></i><span>Look</span></a>
                            <a href="#videoSection" class="button button-border button-rounded button-reveal tright button-small topmargin-sm d-inline-block d-md-none" data-animate="fadeInUp" data-delay="400"><i class="icon-angle-right"></i><span>Look</span></a>
                        </div>
                    </div>
                    <div class="video-wrap">
                        <video poster="/assets/images/videos/explore.jpg" preload="auto" loop autoplay muted>
                            <source src='/assets/images/videos/slider-2-2.mp4' type='video/mp4' />
                            <source src='/assets/images/videos/slider-2-2.webm' type='video/webm' />
                        </video>
                        <div class="video-overlay" style="background-color: rgba(0,0,0,0.55);"></div>
                    </div>
                </div>

                <div class="swiper-slide dark" style="background-image: url('/assets/images/slider/4-1.jpg'); background-position: center top;">
                    <div class="container clearfix">
                        <div class="slider-caption" style="max-width: 650px">
                            <h2 data-animate="fadeInUp" class="d-none d-md-block" style="font-size: 2.7rem; color: #222222">Title</h2>
                            <h2 data-animate="fadeInUp" class="d-block d-md-none" style="font-size: 1rem; color: #222222">Title</h2>
                            <p class="d-none d-sm-block" data-animate="fadeInUp" data-delay="200" style="font-size: 1rem;color: #222222">Text</p>
                            <a href="/about-us" class="button button-border button-rounded button-reveal tright button-large d-none d-md-inline-block button-white button-light" data-animate="fadeInUp" data-delay="400" style="color: #222222"><i class="icon-angle-right"></i><span>Look</span></a>
                            <a href="/about-us" class="button button-border button-rounded button-reveal tright button-small topmargin-sm d-inline-block d-md-none button-white button-light" data-animate="fadeInUp" data-delay="400" style="color: #222222"><i class="icon-angle-right"></i><span>Look</span></a>
                            <div class="clear"></div>
                            <div class="col_two_third topmargin-sm d-none d-sm-block" style="max-width:30%" data-animate="fadeInUp" data-delay="400"><img src="/assets/images/slider/webhelp-logo.png"></div>
                        </div>
                    </div>
                </div>

            </div>
            <div class="slider-arrow-left"><i class="icon-angle-left"></i></div>
            <div class="slider-arrow-right"><i class="icon-angle-right"></i></div>
            <div class="slide-number"><div class="slide-number-current"></div><span>/</span><div class="slide-number-total"></div></div>
        </div>
    </div>
</section>

How can I add it?

0 likes
1 reply
laticiagibson's avatar

Select the Add Layer, and then select from the menu button. Revolution Slider WordPress Plugin Scroll Down Button. In the window, select the type of button “scroll” Action Style “Scroll Below Slider” to the Layer. Revolution Slider WordPress Plugin Scroll Down Button. And set the scroll offset and everything.

Please or to participate in this conversation.