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
    Mark Watson
    0

    Using random items in a slider

    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.

  • Ronak Panchal 71 posts 230 karma points
    Mar 27, 2019 @ 07:30
    Ronak Panchal
    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

  • Rhys Hamilton 140 posts 942 karma points
    Mar 27, 2019 @ 10:26
    Rhys Hamilton
    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)
    }
    
  • Mark Watson 118 posts 384 karma points
    Mar 27, 2019 @ 22:23
    Mark Watson
    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>
    

  • Rhys Hamilton 140 posts 942 karma points
    Mar 28, 2019 @ 10:43
    Rhys Hamilton
    2

    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>
    }
    
  • Nik 1625 posts 7295 karma points MVP 7x c-trib
    Mar 28, 2019 @ 12:03
    Nik
    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)

  • Mark Watson 118 posts 384 karma points
    Apr 10, 2019 @ 05:13
    Mark Watson
    1

    Thanks Rhys and Nik

    Both worked perfectly.

  • This forum is in read-only mode while we transition to the new forum.

    You can continue this topic on the new forum by tapping the "Continue discussion" link below.

Please Sign in or register to post replies