Slider Template | High End 1

Template #003

Slider Template | High End 1

This slider template is fully responsive and is set to align with 1200px max width layouts. It makes use of the “Slides” widget in Elementor, which makes it super easy to update images and content. Most style changes are done through the widget, but a couple are done through CSS. Download the JSON file with the CSS included, or download it without and copy and paste the CSS to the Customizer, if you prefer.

Posted By

Jordyn P

How To Install

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

JSON Files

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

How To Install

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Copy & Paste CSS

Add this CSS to Customizer > Custom CSS/JS

The beginning of this code is where to edit colors and styles. Everything below “LEAVE THIS CODE ALONE” is for positioning and functionality.

				
					/* YOU CAN EDIT THIS CODE */


/* Background Color for Content */
.swiper-slide-contents {
    background: var(--e-global-color-primary);
}


/* Content Learn More Button Style on Hover */
.homepage-slider .elementor-slide-button:hover {
    letter-spacing: 2px!important;
}


/* Content Learn More Button Arrow Color */
.homepage-slider .elementor-slide-button:before {
    background: #fff;
}
.homepage-slider .elementor-slide-button:after {
    color: #fff;
}


/* Slider Arrow Styles */
.homepage-slider .elementor-swiper-button {
    border-radius: 50%;
}
.homepage-slider .elementor-swiper-button:hover {
    background: var(--e-global-color-40a87286);
    color: var(--e-global-color-primary)!important;
}


/* Line Between Arrows and Social Media */
.social-buttons:before {
    background: #aaa;
}












/* LEAVE THIS CODE ALONE */

/* HOMEPAGE SLIDER */

.homepage-slider .swiper-slide {
    height: 600px!important;
}


.homepage-slider .swiper-slide-bg {
    margin-left: calc(50vw - 525px)!important;
   margin-right: calc(50vw - 600px)!important;
   min-width: auto;
}



/* ---SLIDE CONTENT--- */

.swiper-slide-contents {
    padding: 40px 40px 40px calc(50vw - 600px);
    width: calc(50vw - 150px);
    margin-top: -40px;
}

/* ----SLIDE BUTTON---- */

.homepage-slider .elementor-slide-button {
    padding: 0!important;
}

.homepage-slider .elementor-slide-button {
    position: relative;
}

.homepage-slider .elementor-slide-button:before {
    content: '';
    height: 2px;
    width: 20px;
    display: block;
    position: absolute;
    right: 4px;
    top: calc(50% - 2px);
    transition: .7s ease;
}

.homepage-slider .elementor-slide-button:hover:before {
    width: 30px;
}

.homepage-slider .elementor-slide-button:after {
    content: '\f105';
    font-family: 'Font Awesome 6 Pro';
    transition: .7s ease;
    margin-left: 20px;
}

.homepage-slider .elementor-slide-button:hover:after {
    margin-left: 30px;
}







/* ---SLIDE ARROWS--- */

.homepage-slider .elementor-swiper-button {
    position: absolute!important;
    top: 80px;
    width: 30px;
    height: 30px;
    line-height: 30px;
    left: auto;
    right: calc(50vw - 653px);
    display: block;
    text-align: center;
    transition: .3s ease;
}

.homepage-slider .elementor-swiper-button-next {
    margin-top: 40px;
}


.homepage-slider .elementor-swiper-button-next .eicon-chevron-right:before, .homepage-slider .elementor-swiper-button-prev .eicon-chevron-left:before {
    content :'\f106';
    font-family: 'Font Awesome 6 Pro';
    font-size: 16px;
}

.homepage-slider .elementor-swiper-button-next .eicon-chevron-right:before {
    content :'\f107';
}



/* ---SLIDE SOCIAL ICONS--- */


.social-buttons:before {
    content: '';
    display: block;
    width: 1px;
    height: 120px;
    display: block;
    position: absolute;
    top: -160px;
    left: 50%;
}





/* RESPONSIVE */

@media only screen and (min-width: 1600px) {
    .homepage-slider .swiper-slide-bg {
    margin-left: 75px!important;
   margin-right: 75px!important;
   min-width: calc(100% - 150px);
}

.swiper-slide-contents {
    padding: 40px 40px 40px 75px;
    width: 600px;
}

.homepage-slider .elementor-swiper-button {
    right: 22.5px;
}

.social-buttons {
    left: auto!important;
    right: 20px!important;
}

.homepage-slider-spacer {
    left: 40px!important;
    margin: 0!important;
}

.scroll-down-btn {
    right: 50px!important;
    margin: 0!important;
    left: auto!important;
}

}



@media only screen and (max-width: 1329px) {
    .swiper-slide-contents {
    padding: 40px 40px 40px calc(5% + 5px);
    width: 500px;
    margin-top: -40px;
}

.homepage-slider .swiper-slide-bg {
    margin-left: calc(5% + 75px)!important;
   margin-right: 5%!important;
   min-width: calc(90% - 75px);
}

.homepage-slider-spacer {
    left: 40px!important;
    margin: 0 0 0 5%!important;
    }
    
    .social-buttons, .homepage-slider .elementor-swiper-button  {
    left: auto!important;
    right: calc(2.5% - 15px)!important;
}


.scroll-down-btn {
    right: calc(2.5% + 10px)!important;
    margin: 0!important;
    left: auto!important;
}
}


@media only screen and (max-width: 767px) {

    
    .homepage-slider .elementor-main-swiper {
        min-height: 500px!important;
    }
    
    .homepage-slider .swiper-slide {
    height: 700px!important;
    min-height: calc(100vh - 140px)!important;
}


    .swiper-slide-contents {
    padding: 40px 5% 40px calc(5% + 5px);
    width: 350px;
    margin-top: 0px!important;

}

.homepage-slider .swiper-slide-bg {
    margin-left: calc(5% + 25px)!important;
   margin-right:0!important;
   min-width: calc(95% - 25px);
}

.homepage-slider-spacer {
    left: 0px!important;
    margin: 0 0 0 5%!important;
    }
    
    .homepage-slider .elementor-swiper-button  {
    left: calc(5% - 15px)!important;
    right: auto!important;
    top: 20px;
}

}



				
			

End of content

No more pages to load