WP Carousel slider plugin height issue [Fixed]
WP Carousel Slider is a WordPress plugin developed by Sayful Islam. This plugin allows you to create carousel images in your blog post. You can display your media images, gallery, custom URLs, blog posts, or WooCommerce products in the carousel.
It works as sliders, so you need to create a new slider, and add images to that slider. A shortcode will be generated for each slider, you just need to place that shortcode in your post where you want to show the slider. Sliders created from this plugin can also be used as widgets.
In this article, I am going to discuss a solution to a problem that occurs when you try to add images with different heights in your slider under the following configurations:
| Setting | Value |
|---|---|
| Carousel Image size | Original uploaded image |
| Auto Width | Disabled |
| Columns | 1 |
| Columns: Desktop | 1 |
| Columns: Small desktop | 1 |
| Columns: Tablet | 1 |
| Columns: Small tablet | 1 |
| Columns: Mobile | 1 |
If you are using the above settings and if you upload the images with different heights in a slider, then you might see that slider has been given a height of the largest image which will create a lot of empty space at the bottom of the smaller height images.
Moreover, when you scroll between carousel items, the height of the carousel is not auto-adjusted. Let me explain how you can solve this.
Solution:
You need to make 1 change in the plugin file. When it comes to editing the plugin files, there are 2 options.
1. WordPress admin panel
From your WordPress admin panel, go to “Plugins > Plugin Editor” and select the “Carousel Slider” plugin. When this plugin is selected, go to the following path:
assets/js/frontend.js
2. File manager
If you prefer to use file manager instead of making the changes from the WordPress admin panel, then you need to go to the following path:
wp-content/plugins/carousel-slider/assets/js/frontend.js
Replace the content of the “frontend.js” file with the following:
Before applying the solution, please prepare a backup of this file. Copy the content of this file and paste it into your computer’s Notepad.
If you have prepared the backup of this file, feel free to replace the file’s code with the following:
function setOwlStageHeight(event) {
var maxHeight = 0;
jQuery('.owl-item.active').each(function () { // LOOP THROUGH ACTIVE ITEMS
var thisHeight = parseInt( jQuery(this).height() );
maxHeight=(maxHeight>=thisHeight?maxHeight:thisHeight);
});
jQuery('.owl-carousel').css('height', maxHeight );
jQuery('.owl-stage-outer').css('height', maxHeight ); // CORRECT DRAG-AREA SO BUTTONS ARE CLICKABLE
}
jQuery("body")
.find(".carousel-slider")
.each(function () {
let a = jQuery(this),
e = a.data("auto-width"),
t = parseInt(a.data("stage-padding"));
if (
((t = t > 0 ? t : 0),
jQuery().owlCarousel &&
(a.owlCarousel({
stagePadding: t,
nav: a.data("nav"),
dots: a.data("dots"),
margin: a.data("margin"),
loop: a.data("loop"),
autoplay: a.data("autoplay"),
autoplayTimeout: a.data("autoplay-timeout"),
autoplaySpeed: a.data("autoplay-speed"),
autoplayHoverPause: a.data("autoplay-hover-pause"),
slideBy: a.data("slide-by"),
lazyLoad: a.data("lazy-load"),
autoWidth: e,
navText: [
'<svg class="carousel-slider-nav-icon" viewBox="0 0 20 20"><path d="M14 5l-5 5 5 5-1 2-7-7 7-7z"></path></use></svg>',
'<svg class="carousel-slider-nav-icon" viewBox="0 0 20 20"><path d="M6 15l5-5-5-5 1-2 7 7-7 7z"></path></svg>',
],
responsive: {
320: { items: a.data("colums-mobile") },
600: { items: a.data("colums-small-tablet") },
768: { items: a.data("colums-tablet") },
993: { items: a.data("colums-small-desktop") },
1200: { items: a.data("colums-desktop") },
1921: { items: a.data("colums") },
},
autoHeight: true,
onInitialized: setOwlStageHeight,
onResized: setOwlStageHeight,
onTranslated: setOwlStageHeight
}),
"hero-banner-slider" === a.data("slide-type")))
) {
let e = a.data("animation");
e.length &&
(a.on("change.owl.carousel", function () {
a.find(".carousel-slider-hero__cell__content")
.removeClass("animated " + e)
.hide();
}),
a.on("changed.owl.carousel", function (t) {
setTimeout(function () {
jQuery(t.target)
.find(".carousel-slider-hero__cell__content")
.eq(t.item.index)
.show()
.addClass("animated " + e);
}, a.data("autoplay-speed"));
}));
}
jQuery().magnificPopup &&
("product-carousel" === a.data("slide-type")
? jQuery(this).find(".magnific-popup").magnificPopup({ type: "ajax" })
: "video-carousel" === a.data("slide-type")
? jQuery(this).find(".magnific-popup").magnificPopup({ type: "iframe" })
: jQuery(this)
.find(".magnific-popup")
.magnificPopup({ type: "image", gallery: { enabled: !0 }, zoom: { enabled: !0, duration: 300, easing: "ease-in-out" } }));
});
After replacing the above code, you need to refresh your browser cache in order to see the effect. Press the following keys to remove the browser cache:
| Windows / Linux | ctrl + shift + delete |
| Mac | command (⌘) + shift + delete |
When you hit the above keys, you will see a pop-up asking which data you want to delete. You will have 3 options and you need to check the “Cached files and images” option. Also, make sure to select “All time” from the “Time range” option.
Now refresh the post where you have placed the shortcode for the WP Carousel Slider plugin, and you will know that the carousel will adjust itself dynamically with the height of the currently active image.
