Using "active" in a repeater

kim gallagher asked on July 11, 2017 16:40

I'm trying to create a slider based on the HTML code at the bottom. It almost works but I have a problem with the "active" class. No matter what I try, I can't get the class to apply only to the current slide. https://www.youtube.com/watch?v=MmG25341IQA&feature=youtu.be&list=PLaHgaW0fJC8AcHFYtGKra--Gt4kgxPrba

I need to know how to apply the “active” class within the repeater to only the current banner. As it stands now, the “item active” appears in each of the 3 repeating sections of code. If I remove “active” it no longer works at all. IF I use the Chrome browser inspector and remove active from 2 of the sections, it works like a charm. I need to know how to apply the “active” class to only the currently active banner. So I think I need some kind of conditional class? Here's what I need to end up with. Now "active" is included in all 3.

       div class="item active" 
          some other code...      
       div class="item"
          some other code...   
       div class="item"
          some other code...

repeater active item cond

Correct Answer

Mariia Hrytsai answered on July 11, 2017 17:12

You can try to add the following line in the transformation, it will generate 'active' only on the first item

<div class="item <%# DataItemIndex == 0 ? " active": "" %>"> .... </div>

3 votesVote for this answer Unmark Correct answer

Recent Answers

Mariia Hrytsai answered on July 11, 2017 16:48

What javascript plugin do you use for your slider?

0 votesVote for this answer Mark as a Correct answer

kim gallagher answered on July 11, 2017 16:54

I beleive it's using these: jquery.appear.js jquery-2.1.1.min.js owl.carousel.min.js cbpAnimatedHeader.js

0 votesVote for this answer Mark as a Correct answer

Mariia Hrytsai answered on July 11, 2017 17:02 (last edited on July 11, 2017 17:03)

Have you added owl carousel initialization script for you slider? I think the plugin for owl carousel should handle 'active' class automatically.

Something like this:

$(document).ready(function(){
  $(".owl-carousel").owlCarousel();
});

0 votesVote for this answer Mark as a Correct answer

kim gallagher answered on July 11, 2017 17:06

yes. It's very difficult to show the problem with this limited editor. The repeater always repeats class ="item active" the second 2 repetitions should show oly "item".

0 votesVote for this answer Mark as a Correct answer

kim gallagher answered on July 11, 2017 17:08

also script.js - here is the code that should trigger it. But it's in the repeater so it's always there instead of selctively.

////------- Pricing Table

$(document).ready(function() {

$(".pricing").owlCarousel({ pagination: true, navigation : false, slideSpeed : 2500, stopOnHover: true, autoPlay: 3000, singleItem:false, itemsMobile : [550,1], itemsDesktopSmall : [991,2], items: 4, transitionStyle : "fade", navigationText: ['',''] });

});

0 votesVote for this answer Mark as a Correct answer

kim gallagher answered on July 11, 2017 17:12

My transformation:

           <div class="item active">
                <img class="img-responsive" src="<%# Eval("SlideBackground") %>" alt="<%# Eval("SlideBackgroundAlt") %>">
                <div class="slider-content">
                    <div class="col-md-12 text-center">
                        <h1 class="animated3">
                            <span><%# Eval("SlideTitle1_1") %>&nbsp;<%# Eval("SlideTitle1_2") %>&nbsp;<%# Eval("SlideTitle1_3") %></span>
                        </h1>
                        <p class="animated2"><%# Eval("SlideSubTitle") %></p>   
                        <a href="<%# Eval("SlideURLlink") %>" class="page-scroll btn btn-primary animated3 btn-slider"> <%# Eval("SlideButtonText") %></a> 
                    </div>
                </div>
            </div>
            <!--/ Carousel item end -->

0 votesVote for this answer Mark as a Correct answer

kim gallagher answered on July 11, 2017 17:13

       <div class="item active"> - this line ends up in every section instead of only the current one.

0 votesVote for this answer Mark as a Correct answer

kim gallagher answered on July 11, 2017 17:18

thanks, but same problem. Still returns "item active" in every occurance.

0 votesVote for this answer Mark as a Correct answer

kim gallagher answered on July 11, 2017 17:22

ah, no wait!! you are a genius. Many thanks. It does work!!

0 votesVote for this answer Mark as a Correct answer