2

Hi I developed carousel lightning component using Bootstrap theme, but when I am trying to run the component the carousel effect is not seen on the output and the image what i have included is displaying on the top left side of the page and when i click on the next button the second image is not getting displayed.

I have included all the scripts and css required but no luck.

please help me out looking in to my below code

<aura:component >
    <ltng:require styles="/resource/bootstrap/bootstrap-3.3.6/dist/css/bootstrap.min.css"
                  scripts="/resource/jquery,/resource/bootstrap/bootstrap-3.3.6/dist/js/bootstrap.min.js,/resource/bootstrap/bootstrap-3.3.6/js/tests/unit/carousel.js,
                           /resource/bootstrap/bootstrap-3.3.6/dist/js/bootstrap.js"
                            />
<div class="container">
    <div class="row">
        <div class="col-sm-12">
   <div id="myCarousel" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
    <li data-target="#myCarousel" data-slide-to="3"></li>
  </ol>
  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">

      <div class="carousel-caption">
        <h3>Chania</h3>
      </div>
    </div>

    <div class="item">

             <div class="carousel-caption">
        <h3>Chania</h3>
        <p>The atmosphere in Chania has a touch of Florence and Venice.</p>
      </div>
    </div>

    <div class="item">

      <div class="carousel-caption">
        <h3>Flowers</h3>
        <p>Beatiful flowers in Kolymbari, Crete.</p>
      </div>
    </div>

    <div class="item">

      <div class="carousel-caption">
        <h3>Flowers</h3>
        <p>Beatiful flowers in Kolymbari, Crete.</p>
      </div>
    </div>
  </div>
            </div>
        </div>


  <!-- Left and right controls -->
  <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>
    </div>
</aura:component>

I have uploaded below static resourses nessary in to my salesforce org

  1. jquery3.1.0
  2. bootstrap 3.3.6
  3. required images

I removed iamges from items but atleast text to display

  • 1
    You only want to include the minimum amount of JS needed to do the job. It's best to create a helper class or client side controller that contains the JS you need for the component to work. I suspect that may be part of your issue. This would be a very "heavy" component. – crmprogdev Jul 21 '16 at 14:05
  • 1
    Make sure the locker service is deactivated, it messes with jquery (depending on which version you use) Instead of trying to replicate the w3 school html try installing the slick carousel app (lightning version), follow the instructions from here developer.salesforce.com/blogs/developer-relations/2015/06/… – Rao Jul 21 '16 at 20:24
0

You should be getting an error message in your browser console if a referenced script isn't loading as javascript would normally do and it should even tell you the method it referenced. To start with I would separate your include statements ( scripts separate from styling) as I've add issues when trying to include with one tag both, with js and css together; separate them and it should work.

As a side note: whenever possible try to keep the syntax provided by their documentation (the "join" when including multiple scripts) and if that doesn't include them one at a time to try and track the issue to one script. I think, at this point bootstrap is "vetted", and all the scripts I see should load fine so I'm almost certain it's the syntax. Here is a link to their include documentation. https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/js_libs_platform.htm

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.