Adding new JCarousel if another is missing

Hello guys.
I am using Jcarousel for related products in productdetails page. But not every product have related products and it leaves a huge space between the components of the page. My idea is to put there another jcarousel just to fill this emty space on the page, but i want to be shown only if the "Jcarosel for related products" is missing. What would be the right way to achieve that ?

PS: I can add them to a different widgetzone if it will work that way...

Hi radoslavy,

The JCarousel wouldn't show if there are no items in it. So it should not leave any space on your page if there are no related products.
Anyway you can use two different widget zones as suggested and check if the first widget zone does not show anything you will show the second one.
Let's say you have two widget zones i.e widget_zone_1 and widget_zone_2.
Then in the code you can do the followings:

@{
        var widget1Html = Html.Widget("widget_zone_1");
    }
    @if (!MvcHtmlString.IsNullOrEmpty(widget1Html ))
    {
        @widget1Html
    }
    else
    {
        @Html.Widget("widget_zone_2")
    }

Hope this helps!

It leaves space because of the place i add it into. I understand perfectly that this isn't caused by Jcarousel :)
And the code you provided fits our needs very well.
Thanks for the help, I appreciate it!

Unfortunately, I had cash. It cant execute the else command. I am not getting any errors but still it can not show the second widget zone. Any other suggestions?

UPDATED: I resolve it. The first widget zone is using the data source for related products so i had to edit the variable

@{ 
     var widget1Html = Html.Action("RelatedProducts", "Product", new { productId = Model.Id });
     } 
    
    @if (MvcHtmlString.IsNullOrEmpty(widget1Html))
    {
        @Html.Widget("widgetzone2", Model.Id)
        }
 else
     {
        @Html.Widget("widgetzone1", Model.Id)
      }