SitePoint Sponsor

User Tag List

Results 1 to 16 of 16
  1. #1
    SitePoint Guru
    Join Date
    Oct 2010
    Location
    Portland, Or
    Posts
    724
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    my script to make slide indicator active per slide is not working.

    Hello all I have five items in a carousel.
    The first slide has a class of "active" but how can I make it so when the next slide comes on it becomes the active one?
    this is what I have so far.

    Code:
    <ol class="carousel-indicators">
    						<li data-target="#slideShow" data-slide-to="0" class="active">
    								<a href="#"></a>
    						</li>
    						<li data-target="#slideShow" data-slide-to="1">
    								<a href="#"></a>
    						</li>
    						<li data-target="#slideShow" data-slide-to="2">
    								<a href="#"></a>
    						</li>
    						<li data-target="#slideShow" data-slide-to="3">
    								<a href="#"></a>
    						</li>
    						<li data-target="#slideShow" data-slide-to="4">
    								<a href="#"></a>
    						</li>
    					</ol>
    and the script

    Code:
       $(function() {
            $('#slideShow').carousel({interval: 2000, cycle:true});
            $('#slideShow').on('slide', function() {
                var to_slide = $('.carousel-item.active').attr('data-slide-no');
                $('.myCarousel-target.active').removeClass('active');
                $('.carousel-indicators [data-slide-to=' + to_slide + ']').addClass('active');
            });
            $('.myCarousel-target').on('click', function() {
                $('#slideShow').carousel(parseInt($(this).attr('data-slide-to')));
                $('.myCarousel-target.active').removeClass('active');
                $(this).addClass('active');
            });
        });
    thank you
    D

  2. #2
    SitePoint Guru
    Join Date
    Oct 2010
    Location
    Portland, Or
    Posts
    724
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    also...is "(this)" the same in this case as saying (#slideShow)?

  3. #3
    SitePoint Evangelist silver trophybronze trophy
    Join Date
    Jul 2013
    Posts
    406
    Mentioned
    22 Post(s)
    Tagged
    0 Thread(s)
    The attr('data-slide-no') in line 4 doesn't exist.

  4. #4
    Patience... bronze trophy solidcodes's Avatar
    Join Date
    Jul 2006
    Location
    Philippines
    Posts
    936
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    @Francky ;
    "(this)"
    - refer to an object

    #slideShow
    -Is a selector of ID
    Quality codes are optimized and tested...
    Click here for inspiration..

  5. #5
    SitePoint Guru
    Join Date
    Oct 2010
    Location
    Portland, Or
    Posts
    724
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Solidcodes actually i had asked about this & slideshow...guessing francky knows.
    Francky I went and changed
    Code:
    "<li data-target="#slideShow" data-slide-to="0" class="active">
    <a href="#"></a>
    </li>"
    to
    Code:
    "<li data-target="#slideShow" data-slide-no="0" class="active">
    <a href="#"></a>
    </li>"
    creating the attribute. It didn't work. did I misunderstand where to create that attribute?
    thx
    D

  6. #6
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,938
    Mentioned
    214 Post(s)
    Tagged
    12 Thread(s)
    Hi Sherpa,

    Can you post a link to a page where I can see this not working?

  7. #7
    SitePoint Guru
    Join Date
    Oct 2010
    Location
    Portland, Or
    Posts
    724
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Sure Pullo. Thank you for taking a look here it is:
    http://www.danielamorescalchi.com/wa.../indexTest.php
    I am trying to get the small orange indicator on the right hand side of the carousel to to change to active when the respective slide comes up.
    thx
    D

  8. #8
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,938
    Mentioned
    214 Post(s)
    Tagged
    12 Thread(s)
    If you look at the slider in Chrome's Dev Tools, the <div class="carousel-item"> gets applied a class of "active" as the slide changes.

    You can then use this to drill down to whichever elements you are trying to style in CSS.

    E.g.

    Code CSS:
    div.active > a > image { ... }


    Off Topic:

    @solidcodes ;
    Nice to see you getting involved, buddy!

  9. #9
    SitePoint Guru
    Join Date
    Oct 2010
    Location
    Portland, Or
    Posts
    724
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    sorry Pullo.
    Am confused. I thought the jquery script was taking care of that.
    Are you saying the script is fine & I need to tweak the css?

  10. #10
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,938
    Mentioned
    214 Post(s)
    Tagged
    12 Thread(s)
    Oh ok, maybe we're getting our wires crossed.

    As I mentioned, as the slides change a class of "active" is applied to <div class="carousel-item">.
    That works as expected. What else are you trying to achieve?

  11. #11
    SitePoint Guru
    Join Date
    Oct 2010
    Location
    Portland, Or
    Posts
    724
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    at the right hand side of the carousl there are five orange squares w/the recycle symbol. they are the slide indicators.
    if the carousel is on slide three...i'd like the third indicator to change color to indicate it is the active slide.
    so far only the first indicator looks like it is always active.
    Thx
    d

  12. #12
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,938
    Mentioned
    214 Post(s)
    Tagged
    12 Thread(s)
    Ah, I get it. Sorry, my mistake.
    That shouldn't be too hard to do.
    I'm away from the PC right now, but I'll knock you up something later on.

  13. #13
    SitePoint Guru
    Join Date
    Oct 2010
    Location
    Portland, Or
    Posts
    724
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Thank you Pullo!

  14. #14
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,938
    Mentioned
    214 Post(s)
    Tagged
    12 Thread(s)
    Hi there,

    This should do it for you:

    Code JavaScript:
    var $carouselItems = $(".carousel-item"),
        $carouselIndicators = $(".carousel-indicators > li");
     
    $('#slideShow').on('slide', function() {
      var currentSlide = $(this).find($(".active")),
          currentSlideNo = $carouselItems.index(currentSlide) + 1;
      if (currentSlideNo > $carouselItems.length){
        currentSlideNo = 0;
      }
      $carouselIndicators.removeClass("active");
     
      var newItem = $(".carousel-indicators > li[data-slide-no='" + currentSlideNo + "']");
      newItem.addClass("active");
    });

    Just drop it in to your page before the closing </body> tag.

  15. #15
    SitePoint Guru
    Join Date
    Oct 2010
    Location
    Portland, Or
    Posts
    724
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Thank you Pullo will go try it out.
    If you don't mind I'd like your advice on another jquery issues I just posted.
    Could you please take a look at:
    this one
    Thank you

  16. #16
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,938
    Mentioned
    214 Post(s)
    Tagged
    12 Thread(s)
    Hi again,

    I was just testing this and noticed that the code I posted didn't work when you scrolled the slider to the left.
    Therefore I came up with a different, cleaner approach:

    Code:
    <!DOCTYPE html>
      <html>
        <head>
          <base href="http://www.danielamorescalchi.com/wackerSan/" >
          <title>wacker sanitary</title>
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <meta charset="UTF-8">
          <!-- Bootstrap -->
          <link href="css/bootstrap.css" rel="stylesheet" media="screen">
          <link href="css/bootstrap-responsive.css" rel="stylesheet" media="screen">
          <link href="style.css" rel="stylesheet" media="screen">
        </head>
        
        <body>
          <div  id="wrap" class="container-fluid">
            <div class="row-fluid"> <!-- preHeader -->
              <div id="preHeader" class="span12 pull-right">
                <p>search stuff</p>
              </div> <!-- endPreHeader -->
            </div>  
                
            <div  id="content" class="row-fluid">
              <div id="info" class="span12"></div>
              <div id="main" class="span12">  
                <div id="mainCo" class="span9">
                  <div id="midBod" class="span12">
                    <div id="mainImgs"class="span9"> <!-- carouselSpan -->
                      <div id="slideShow" class="carousel slide"> <!-- carouselStart -->
                        <div id="showHeader" class="span12">
                          <a class="left carousel-control" href="#slideShow" data-slide="prev"><img class="pull-left" src="imgs/lftArrow.png"></a>
                          <a class="right carousel-control" href="#slideShow" data-slide="next"><img class="pull-right" src="imgs/rtArrow.png"></a>
                        </div> <!-- carouselHdrEnd -->
                        <div class="carousel-inner">
                          <div class="item carousel-item active" data-slide-no="0">
                            <img src="imgs/hazWaste.jpg" alt="haz">
                          </div>
                          <div class="item carousel-item" data-slide-no="1">
                            <img src="imgs/wasteBin.jpg" alt="waste">
                          </div>
                          <div class="item carousel-item" data-slide-no="2">
                            <img src="imgs/blueBin.jpg" alt="blue">
                          </div>
                          <div class="item carousel-item" data-slide-no="3">
                            <img src="imgs/greenBin.jpg" alt="green">
                          </div>
                          <div class="item carousel-item" data-slide-no="4">
                            <img src="imgs/hazWaste.jpg" alt="hazWaste">
                          </div>
                        </div>
                      </div>  <!-- carouselEnd -->
                    </div> <!-- carouselSpanEnd -->
                    <div class="span3"> <!-- indicatorsStart -->
                      <ol class="carousel-indicators">
                        <li data-indicator-no="0" class="active"></li>
                        <li data-indicator-no="1"></li>
                        <li data-indicator-no="2"></li>
                        <li data-indicator-no="3"></li>
                        <li data-indicator-no="4"></li>
                      </ol>
                    </div> <!-- indicatorsEnd -->
                    <div class="span3">  <!-- indicatorsEnd -->
                      <img id="oregon" src="imgs/oregon.png" alt="oregon">
                    </div>
                  </div> <!-- endNested12 -->
                </div>
              </div> <!-- mainSpan12end -->
            </div> <!-- endContent -->
            <div class="push"><!--//--></div>
            <footer>
              <p>saepe eveniet ut et voluptates repudiandae sint</p>
            </footer>
          </div> <!-- endContent -->
        </div> <!-- endContainerFluid -->
        <script src="http://code.jquery.com/jquery.js"></script>
        <script src="js/bootstrap.min.js"></script>
        <script src="js/themeScript.js"></script>
        <script>
          var $carouselIndicators = $(".carousel-indicators > li");
          $('#slideShow').on('slide', function() {
            setTimeout(function(){
              var currentSlideNo = $(".active").data("slide-no"),
                  newItem = $(".carousel-indicators > li[data-indicator-no='" + currentSlideNo + "']");
              console.log(currentSlideNo);
              $carouselIndicators.removeClass("active");
              newItem.addClass("active");
            }, 750)
          });
        </script>
      </body>
    </html>


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •