How to link a carousel indicator to another URL

Bootstrap Studio Help
1

I am trying to link the carousel indicator to another URL. The first two times you are able to slide but the third time when you press the carousel indicator it should take you to a new URL. Please help!

             <div class="form-group">
                <div class="row">
                    <div class="col-md-11" style="padding-left: 0px;">
                    <h5 id="textColor" style="margin-left: 12px;">Consecteteur Eliptois eliot</h5>  
                                    <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel" data-interval="false">
                                      <ol>
                                        <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
                                        <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
                                        <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
                                      </ol>
                                      <div class="carousel-inner" role="listbox">
                                        <div class="carousel-item active">

                                        <div class="col-md-4 col-sm-12">
                                          <img src="carouselbox.jpg" alt="First slide" />
                                                              <!-- Static Header -->
                                            <div class="header-text hidden-xs">
                                                <div class="col-md-12 text-center">
                                                    <h4><span><strong>Image1</strong></span><br /></h4>
                                                    <h5>Lorem Ipsum</h5>                                    
                                                </div>
                                            </div><!-- /header-text -->
                                           </div>

                                           <div class="col-md-4">
                                          <img src="carouselbox.jpg" alt="First slide" />
                                            <!-- Static Header -->
                                            <div class="header-text2 hidden-xs" id="secondslide">
                                                <div class="col-md-12 text-center">
                                                    <h5>
                                                        <span><strong>Image1</strong></span><br />
                                                        Lorem Ipsum
                                                    </h5>
                                                </div>
                                            </div><!-- /header-text -->
                                            </div>

                                           <div class="col-md-4">
                                          <img src="carouselbox.jpg" alt="First slide" />
                                            <!-- Static Header -->
                                            <div class="header-text3 hidden-xs" id="secondslide">
                                                <div class="col-md-12 text-center">
                                                    <h5>
                                                        <span><strong>Image1</strong></span><br />
                                                        Lorem Ipsum
                                                    </h5>
                                                </div>
                                            </div><!-- /header-text -->
                                            </div>

                                        </div>
                                        <div class="carousel-item">
                                        <div class="col-md-4">
                                          <img src="carouselbox.jpg" alt="Second slide" />
                                            <!-- Static Header -->
                                            <div class="header-text hidden-xs" id="secondslide">
                                                <div class="col-md-12 text-center">
                                                    <h5>
                                                        <span><strong>Image1</strong></span><br />
                                                        Lorem Ipsum
                                                    </h5>
                                                </div>
                                            </div><!-- /header-text -->
                                            </div>

                                            <div class="col-md-4">
                                          <img src="carouselbox.jpg" alt="Second slide" />
                                            <!-- Static Header -->
                                            <div class="header-text2 hidden-xs" id="secondslide">
                                                <div class="col-md-12 text-center">
                                                    <h5>
                                                        <span><strong>Image1</strong></span><br />
                                                        Lorem Ipsum
                                                    </h5>
                                                </div>
                                            </div><!-- /header-text -->
                                            </div>

                                            <div class="col-md-4">
                                          <img src="carouselbox.jpg" alt="Second slide" />
                                            <!-- Static Header -->
                                            <div class="header-text3 hidden-xs" id="secondslide">
                                                <div class="col-md-12 text-center">
                                                    <h5>
                                                        <span><strong>Image1</strong></span><br />
                                                        Lorem Ipsum
                                                    </h5>
                                                </div>
                                            </div><!-- /header-text -->
                                            </div>
                                        </div>
                                        <div class="carousel-item col-sm-12" style="margin-left:-15px;">
                                        <div class="col-md-4">
                                          <img src="carouselbox.jpg" alt="Third slide" />
                                            <!-- Static Header -->
                                            <div class="header-text hidden-xs" id="secondslide">
                                                <div class="col-md-12 text-center">
                                                    <h5>
                                                        <span><strong>Image1</strong></span><br />
                                                        Lorem Ipsum
                                                    </h5>
                                                </div>
                                            </div><!-- /header-text -->
                                            </div>

                                           <div class="col-md-4">
                                          <img src="carouselbox.jpg" alt="Third slide" />
                                            <!-- Static Header -->
                                            <div class="header-text2 hidden-xs" id="secondslide">
                                                <div class="col-md-12 text-center">
                                                    <h5>
                                                        <span><strong>Image1</strong></span><br />
                                                        Lorem Ipsum
                                                    </h5>
                                                </div>
                                            </div><!-- /header-text -->
                                            </div>

                                            <div class="col-md-4">
                                          <img src="carouselbox.jpg" alt="Third slide" />
                                            <!-- Static Header -->
                                            <div class="header-text3 hidden-xs" id="secondslide">
                                                <div class="col-md-12 text-center">
                                                    <h5>
                                                        <span><strong>Image1</strong></span><br />
                                                        Lorem Ipsum
                                                    </h5>
                                                </div>
                                            </div><!-- /header-text -->
                                      <a href="https://www.google.ca/">
                                        <span></span>
                                        <span>Next</span>
                                      </a>
                                          <!--<a href=""><strong>Next</strong></a>-->
                                          </div>
                                        </div>
                                      </div>
                                      <a href="#carouselExampleIndicators">
                                        <span></span>
                                        <span>Previous</span>
                                      </a>
                                      <a href="#carouselExampleIndicators">
                                        <span></span>
                                        <span>Next</span>
                                      </a>
                                    </div><!--end of carousel indicators-->
                    </div>  
                </div>
            </div>
2

Ok, well I'm not sure I understand what you are really trying to do based on what you wrote and the code you supplied so I took your code which was not a functioning carousel, at least based on Boostrap http://getbootstrap.com/javascript/#carousel or this app Bootstrap Studios in which this forum is for users of the app.

I took the code and tweaked it quite a bit to make it a functioning carousel. I used the app's Custom Code component for this.

You say indicator but based on your code that's not what I think you are doing with the google link you had in it.

The indicators are the little dots at the bottom of the carousel not the next/prev links found on either side of the carousel.

So I'm wondering if you really meant the third column of each carousel item you want that column to link to an off-site location.

If that's the case then this is the code I made based on your original code.

<div class="form-group">
    <div class="row">
        <div class="col-md-12">
           <h5 id="textColor" style="margin-left: 12px;">Consecteteur Eliptois eliot</h5>  
           <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel" data-interval="false">
              <div class="carousel-inner" role="listbox">
                 <div class="item active">
                     <div class="row">
                        <div class="col-md-4">
                            <img src="http://placeholdit.imgix.net/~text?txtsize=42&txt=Carousel+Image&w=1400&h=600" alt="First slide" />
                            <!-- Static Header -->
                            <div class="carousel-caption header-text hidden-xs">
                               <div class="text-center">
                                  <h4><span><strong>Image1-1</strong></span><br /></h4>
                                  <h5>Lorem Ipsum</h5>                           
                               </div>
                            </div><!-- /header-text -->
                        </div>
                        <div class="col-md-4">
                            <img src="http://placeholdit.imgix.net/~text?txtsize=42&txt=Carousel+Image&w=1400&h=600" alt="Second slide" />
                            <!-- Static Header -->
                            <div class="carousel-caption header-text hidden-xs">
                               <div class="text-center">
                                  <h4><span><strong>Image1-2</strong></span><br /></h4>
                                  <h5>Lorem Ipsum</h5>                           
                               </div>
                            </div><!-- /header-text -->
                        </div>
                        <div class="col-md-4">
                            <a href="https://www.google.ca/">
                            <img src="http://placeholdit.imgix.net/~text?txtsize=42&txt=Carousel+Image&w=1400&h=600" alt="Third slide" />
                            <!-- Static Header -->
                            <div class="carousel-caption header-text hidden-xs">
                               <div class="text-center">
                                  <h4><span><strong>Image1-3</strong></span><br /></h4>
                                  <h5>Lorem Ipsum</h5>                           
                               </div>
                            </div><!-- /header-text -->
                            </a>
                        </div>
                    </div>
                 </div>
                 <div class="item">
                     <div class="row">
                        <div class="col-md-4">
                            <img src="http://placeholdit.imgix.net/~text?txtsize=42&txt=Carousel+Image&w=1400&h=600" alt="First slide" />
                            <!-- Static Header -->
                            <div class="carousel-caption header-text hidden-xs">
                               <div class="text-center">
                                  <h4><span><strong>Image2-1</strong></span><br /></h4>
                                  <h5>Lorem Ipsum</h5>                           
                               </div>
                            </div><!-- /header-text -->
                        </div>
                        <div class="col-md-4">
                            <img src="http://placeholdit.imgix.net/~text?txtsize=42&txt=Carousel+Image&w=1400&h=600" alt="Second slide" />
                            <!-- Static Header -->
                            <div class="carousel-caption header-text hidden-xs">
                               <div class="text-center">
                                  <h4><span><strong>Image2-2</strong></span><br /></h4>
                                  <h5>Lorem Ipsum</h5>                           
                               </div>
                            </div><!-- /header-text -->
                        </div>
                        <div class="col-md-4">
                            <a href="https://www.google.ca/">
                            <img src="http://placeholdit.imgix.net/~text?txtsize=42&txt=Carousel+Image&w=1400&h=600" alt="Third slide" />
                            <!-- Static Header -->
                            <div class="carousel-caption header-text hidden-xs">
                               <div class="text-center">
                                  <h4><span><strong>Image1-3</strong></span><br /></h4>
                                  <h5>Lorem Ipsum</h5>                           
                               </div>
                            </div><!-- /header-text -->
                            </a>
                        </div>
                    </div>
                 </div>
                 <div class="item">
                     <div class="row">
                        <div class="col-md-4">
                            <img src="http://placeholdit.imgix.net/~text?txtsize=42&txt=Carousel+Image&w=1400&h=600" alt="First slide" />
                            <!-- Static Header -->
                            <div class="carousel-caption header-text hidden-xs">
                               <div class="text-center">
                                  <h4><span><strong>Image3-1</strong></span><br /></h4>
                                  <h5>Lorem Ipsum</h5>                           
                               </div>
                            </div><!-- /header-text -->
                        </div>
                        <div class="col-md-4">
                            <img src="http://placeholdit.imgix.net/~text?txtsize=42&txt=Carousel+Image&w=1400&h=600" alt="Second slide" />
                            <!-- Static Header -->
                            <div class="carousel-caption header-text hidden-xs">
                               <div class="text-center">
                                  <h4><span><strong>Image3-2</strong></span><br /></h4>
                                  <h5>Lorem Ipsum</h5>                           
                               </div>
                            </div><!-- /header-text -->
                        </div>
                        <div class="col-md-4">
                            <a href="https://www.google.ca/">
                            <img src="http://placeholdit.imgix.net/~text?txtsize=42&txt=Carousel+Image&w=1400&h=600" alt="Third slide" />
                            <!-- Static Header -->
                            <div class="carousel-caption header-text hidden-xs">
                               <div class="text-center">
                                  <h4><span><strong>Image1-3</strong></span><br /></h4>
                                  <h5>Lorem Ipsum</h5>                           
                               </div>
                            </div><!-- /header-text -->
                            </a>
                        </div>
                    </div>
                 </div>
              </div>
              <ol>
                 <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
                 <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
                 <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
              </ol>
              <a href="#carouselExampleIndicators">
                 <span></span>
                 <span>Previous</span>
              </a>
              <a href="#carouselExampleIndicators">
                 <span></span>
                 <span>Next</span>
              </a>
           </div><!--end of carousel indicators-->
        </div>
    </div>
</div>

If that's not what you are looking for either we need more explanation or what you might be trying to do could be alot more tricky.

Saj

3

Hi,

Thanks for the help! yes thats what im trying to achieve. so, when the user presses on the right arrow a third time, he will be redirected to another page. I tried sorrounding the img tag with the a tag but somehow it doesnt work. Please let me know.

Thanks,

4

That's not normal behavior for a next/prev link in a carousel. Users would not expect that to happen, especially assisted accessibility users I would imagine. I would rather advise that you just add a link into the slides caption section instead.

Otherwise you'd have to write some JavaScript that tracks which slide you are on and then remove the next and append your replacement version of it in the carousel. This is something I can't write for you. It's just how I would perceive it could be done.

Saj

5

I would have to agree with Saj on this and add that not only would it be unexpected, but would probably upset your visitors if they have to keep manipulating pages to get back to the site etc. unless of course they already knew it would do that from the start. Very strange behavior for something like that.