Turn Elementor Columns to Slider

Word Count: 941

Introduction

The Gordon Flooring Home page has two areas that will turn section columns into a slider when the screen width changes from desktop to mobile.

Future projects can make reference to these codes and make modification as required.

Procedures

  • The slick slider library is used.
  • Under the child theme folder, create the folder “assets/lib/slick” and upload the below files to this folder.
    • slick.css
    • slick-theme.css
    • slick.min.js
    • ajax-loader.gif
  • Enqueue the library files in functions.php
function add_GF_script(){
  wp_enqueue_style('GF_slick_css', get_stylesheet_directory_uri(). "/assets/lib/slick/slick.css");
  wp_enqueue_style('GF_slick_theme_css', get_stylesheet_directory_uri(). "/assets/lib/slick/slick-theme.css");
  wp_enqueue_script('GF_slick_js', get_stylesheet_directory_uri(). "/assets/lib/slick/slick.min.js", array('jquery'), null, true);

}
add_action('wp_enqueue_scripts', 'add_GF_script');
  • Add CSS class to the parent element containing the columns
    • “cu-home-serv-slider” to the Section below “Our Floor Finish Services”.
    • “cu-cs-all-posts” to the Posts Widget.
  • Add JS code below to Elementor Custom Code and set the Display Condition accordingly.
    • The timer function is used to de-bounce the screen resize effect. Two timers are used on the front page because there are 2 sliders on the same page.
    • mobileFirst: true on line 34 is to make the ‘responsive: [ ]’ setting to use mobile first calculation. That is the effect takes effective when it reaches the breakpoint from mobile width towards desktop width. That is making the slider ‘unslicked’ at and greater than 767px.
<script>
	/*
		Purpose: this script is specifically for Home page as it has 2 sliders
		and therefore requires 2 timers.
	*/
	
	jQuery(function () {
		turn_OurServices_to_Slider();
		turn_OurAction_to_Slider();

		var ourServTimer;
		var ourActionTimer;

		window.onresize = function () {
			clearTimeout(ourServTimer);
			ourServTimer = setTimeout(turn_OurServices_to_Slider, 150);

			clearTimeout(ourActionTimer);
			ourActionTimer = setTimeout(turn_OurAction_to_Slider, 150);

		}; //window.onresize

	});  // .ready()

	function turn_OurServices_to_Slider() {
		jQuery('.cu-home-serv-slider .elementor-row').not('.slick-initialized').slick({
			arrows: true,
			slidesToShow: 1,
			slidesToScroll: 1,
			autoplay: true,
			autoplaySpeed: 9000,
			speed: 800,
			infinite: true,
			mobileFirst: true,
			responsive: [{
				breakpoint: 767,
				settings: 'unslick'
			}],

			prevArrow: '<button type="button" class="cu-slick-prev"><i class="cuicon- cu-icon-left-open-big" aria-hidden="true"></i></button>',

			nextArrow: '<button type="button" class="cu-slick-next"><i class="cuicon- cu-icon-right-open-big" aria-hidden="true"></i></button>'
		}); // slick()

	} // turn_OurServices_to_Slider()


	function turn_OurAction_to_Slider() {
		jQuery('.cu-cs-all-posts .elementor-posts-container').not('.slick-initialized').slick({
			arrows: true,
			slidesToShow: 1,
			slidesToScroll: 1,
			autoplay: true,
			autoplaySpeed: 9000,
			speed: 800,
			infinite: true,
			mobileFirst: true,
			responsive: [{
				breakpoint: 767,
				settings: 'unslick'
			}],

			prevArrow: '<button type="button" class="cu-slick-prev"><i class="cuicon- cu-icon-left-open-big" aria-hidden="true"></i></button>',

			nextArrow: '<button type="button" class="cu-slick-next"><i class="cuicon- cu-icon-right-open-big" aria-hidden="true"></i></button>'
		}); // slick()

	} // turn_OurAction_to_Slider()
</script>
  • Put the following code to the Custom CSS fields of the Section with CSS class “cu-home-serv-slider”.
@media (max-width: 767px) {
    
    .cu-home-serv-slider img {
        max-width: 100% !important;
        height: 63.4vw;
        object-fit: cover;
    }
    
    .cu-home-serv-slider .elementor-widget-container {
        width: 75%;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    
    .cu-home-serv-slider .slick-arrow {
        background: transparent;
        position: absolute;
        z-index: 10;
        padding: 0;
        margin: 0;
        top: calc(0.396*100vw + 22.67px);
        
      
    }
    
    .cu-home-serv-slider .cuicon- {
        color: #83ADC2;
        font-size: 22px;
    }
    
    .cu-home-serv-slider .cu-slick-prev {
        left: calc(0.065*100vw - 26.65px);
    }
    
    .cu-home-serv-slider .cu-slick-next {
        right: calc(0.065*100vw - 26.65px);
    }

    
} /* @767  */
  • Put the following codes to the Custom CSS fields of the Post Widget with CSS class “cu-cs-all-posts”.
selector .elementor-post__badge {
    padding: 0;
    left: 0;
    top: 408px;
}

selector .elementor-post__text {
    padding: 0;
}

selector .elementor-post__read-more:after {
    content: ">";
    padding-left: 18px;
}

selector .elementor-post__title {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2; 
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    height: 62px;
 }
 
 
 selector .elementor-post__excerpt {
     padding-top: 23px;
     border-top: 3px solid #83ADC2;
     
     overflow: hidden;
     text-overflow: ellipsis;
     display: -webkit-box;
     -webkit-line-clamp: 8; 
     -webkit-box-orient: vertical;
     -moz-box-orient: vertical;
     height: 268px;
 }

@media (max-width: 1420px) {
    selector .elementor-post__badge {
      top: calc(0.255*100vw + 44.21px);
        
    }
    
}  /* @1420  */


@media (max-width: 1023px) {
    selector .elementor-post__badge {
      top: calc(0.388*100vw + 35.8px);
    }
    
    selector .elementor-post__title {
    height: 60px;
 }
 
 selector .elementor-post__excerpt {
     height: 246px;
 }
 
    
}  /* @1023  */


@media (max-width: 767px) {
    selector .elementor-post__badge {
      top: calc(0.679*100vw + 8.654px);
    }  
      
    selector .elementor-post__text {
        margin-top: 60px !important;
    }
    
    selector .elementor-post__title {
     height: 55px;
    }
 
 
     selector .elementor-post__excerpt {
         -webkit-line-clamp: 13;
         height: auto;
     }
    
    .cu-cs-all-posts .elementor-widget-container {
        width: 75%;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    
    .cu-cs-all-posts .slick-arrow {
        background: transparent;
        position: absolute;
        z-index: 10;
        padding: 0;
        margin: 0;
        top: calc(0.296*100vw - 10.68px);
    }
    
    .cu-cs-all-posts .cuicon- {
        color: #83ADC2;
        font-size: 22px;
    }
    
    .cu-cs-all-posts .cu-slick-prev {
        left: calc(-6.25vw - 20px);
    }
    
    .cu-cs-all-posts .cu-slick-next {
        right: calc(-6.25vw - 20px);
    }


}  /* @767  */

If the navigation arrows donot appear, add @font-face rules below and modify as required.

@font-face {
  font-family: 'cu-fontello';
  src: url('/wp-content/uploads/elementor/custom-icons/cu-fontello/font/cu-fontello.eot?53031620');
  src: url('/wp-content/uploads/elementor/custom-icons/cu-fontello/font/cu-fontello.eot?53031620#iefix') format('embedded-opentype'),
       url('/wp-content/uploads/elementor/custom-icons/cu-fontello/font/cu-fontello.woff2?53031620') format('woff2'),
       url('/wp-content/uploads/elementor/custom-icons/cu-fontello/font/cu-fontello.woff?53031620') format('woff'),
       url('/wp-content/uploads/elementor/custom-icons/cu-fontello/font/cu-fontello.ttf?53031620') format('truetype'),
       url('/wp-content/uploads/elementor/custom-icons/cu-fontello/font/cu-fontello.svg?53031620#cu-fontello') format('svg');
  font-weight: normal;
  font-style: normal;

}

[class^="cu-icon-"]:before, [class*=" cu-icon-"]:before {
  font-family: "cu-fontello";
  font-style: normal;
  font-weight: normal;

  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  margin-right: .2em;
  text-align: center;

  font-variant: normal;
  text-transform: none;

  line-height: 1em;
  margin-left: .2em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

}

.cu-icon-left-open-big:before { content: '\e800'; } 
.cu-icon-right-open-big:before { content: '\e801'; } 
.cu-icon-left-open-mini:before { content: '\e802'; } 
.cu-icon-right-open-mini:before { content: '\e803'; } 
.cu-icon-down-open-big:before { content: '\e804'; } 
.cu-icon-up-open-big:before { content: '\e805'; } 
.cu-icon-up-open-mini:before { content: '\e806'; } 
.cu-icon-down-open-mini:before { content: '\e807'; }

If the slide has issues in spacing or horizontal positioning, try to use these CSS to fix it:

/* the slides - debug spacing */   
.slick-slide {
    margin: 0 17px;
}
    
/* the parent - debug spacing */    
.slick-list {
    margin: 0 -17px !important;
}
    
/* adjust horizontal position  */
.slick-track {
    left: -5px;
}
Tags: , ,