using random items in a slider

Go to solution

Press Ctrl / CMD + C to copy this to your clipboard.

Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at

Mark Watson 118 posts 384 karma points

Mar 27, 2019 @ 06:35
0

Using random items in a slider

Using Umbraco And Getting Started

Umbraco 7
Does anyone know a better way to do the following?

I am trying to use 3 different random testimonials in a slider but not sure how to get three different random items and render them in the right
.

@{ var FirstTestimonial = Model.Content.Site().FirstChild("Testimonial").Children().RandomOrder().FirstOrDefault(); var SecondTestimonial = Model.Content.Site().FirstChild("Testimonial").Children().RandomOrder().FirstOrDefault(); var ThirdTestimonial = Model.Content.Site().FirstChild("Testimonial").Children().RandomOrder().FirstOrDefault();
@renderTestimonial(FirstTestimonial)

@renderTestimonial(SecondTestimonial)

@renderTestimonial(ThirdTestimonial)
}

This works but sometimes I get 2 items the same. I would like each testimonial to be different but random.
Copy Link
Ronak Panchal 71 posts 230 karma points

Mar 27, 2019 @ 07:30

0

Hello Mark Watson,

As per your code, it's true that you get the same items.

First, take a list of the random item up to 3 then through looping you can display that 3 random items you don't need to take three variable like FirstTestimonial, SecondTestimonial and ThirdTestimonial Just one variable is fine for that.

Regards, Ronak Panchal

Copy Link
Rhys Hamilton 140 posts 942 karma points

Mar 27, 2019 @ 10:26
100
As Ronak pointed out, you probably don't need to have three separate variables for this.

The following code should work:
```
var testimonials = Model.Content.Site().FirstChild("Testimonial").Children().RandomOrder().Take(3);

foreach (var testimonial in testimonials)
{
    @renderTestimonial(testimonial)
}
```
Copy Link
Mark Watson 118 posts 384 karma points

Mar 27, 2019 @ 22:23
0
Thanks for the replys but unfortunately the slider is control by script and I need to place the results in the controlling divs. Without the div class "active item" and the following div classes "item" this does not work.
```
<div class="carousel-inner">
<div class="active item">
@renderTestimonial(FirstTestimonial)
</div>
<div class="item">
    @renderTestimonial(SecondTestimonial)
</div>
<div class="item">@renderTestimonial(ThirdTestimonial)
</div>
```
Copy Link

Rhys Hamilton 140 posts 942 karma points

Mar 28, 2019 @ 10:43

In your code, the first item is active, and the rest are not.

Using this logic, you could refactor your code, using a single variable (instead of 3) and still produce your expected output by using a counter to determine which items in your testimonials should have the "active" class.

For example, like so:

@{
    var testimonials = Model.Content.Site().FirstChild("Testimonial").Children().RandomOrder().Take(3);
    var counter = 1;

    <div class="carousel-inner">
        @foreach (var testimonial in testimonials)
        {
            // If the counter is equal to 1, then set the item class to active
            var isActive = counter == 1 ? "active item" : "";

            <div class="@isActive item">
                @renderTestimonial(testimonial)
            </div>

            // Increment the counter, so you can't have two active items at a time
            counter++;
        }
    </div>
}

Copy Link

Nik 1593 posts 7151 karma points MVP 6x c-trib

Mar 28, 2019 @ 12:03
2
Rhy's solution is nice, but instead of using a counter you could use a Boolean to track if this is the first iteration when using a foreach loop.

eg:
```
var isFirst = true;

<div class="carousel-inner">
    @foreach(var testimonial in testimonials)
    {
           <div class="@(isFirst ? "active item" : "item")">
              @renderTestimonial(testimonial)
           </div>

           if(isFirst){isFirst = false;}
    }
</div>
```
Personally, I find this easier to read than having a counter that's increment all the time. If you need the counter for something else however then I'd go down that route :-)

(It comes down to personal preference here I think, just thought it worth sharing the alternative)
Copy Link
Mark Watson 118 posts 384 karma points

Apr 10, 2019 @ 05:13

1

Thanks Rhys and Nik

Both worked perfectly.

Copy Link
is working on a reply...

Please Sign in or register to post replies

Flag this post as spam?