Adding a slider in Drupal

 

To add a BindTuning slider to your Drupal website, proceed as follows: 

  1. Go to Structure > Blocks > Add block;
    drupal-slider-01.jpg

  2. Enter “Block Title” and “Block description" fields;
    drupal-slider-02.jpg

  3. Paste the slider HTML code into textarea "Block body” (the code spinet for the slider is available on the theme's demo page "Sliders", for example in Zeus theme click the 'view code' link in page: http://bindtuning.com/cms/drupal/drupal-7/theme/Zeus/page/Sliders/customize);

    The following is sample HTML code for the Zeus slider. For other themes, please validate your theme's "Widgets > Sliders" demo page:

    <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" class=""></li>
    <li data-target="#MyCarousel" data-slide-to="2" class=""></li>
    </ol>
    <!-- Wrapper for slides -->
    <div class="carousel-inner">
    <div class="item active">
    <img src="images/slider-1.jpg" alt="">
    <div class="carousel-caption">
    <h3>First slide label</h3>
    <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
    </div>
    </div>
    <div class="item">
    <img src="images/slider-2.jpg" alt="">
    <div class="carousel-caption">
    <h3>Second slide label</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
    </div>
    <div class="item">
    <img src="images/slider-3.jpg" alt="">
    <div class="carousel-caption">
    <h3>Third slide label</h3>
    <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
    </div>
    </div>
    </div>
    <!-- Controls -->
    <a class="left carousel-control" href="#MyCarousel" data-slide="prev"></a>
    <a class="right carousel-control" href="#MyCarousel" data-slide="next"></a>
    </div>



  4. Set "Text format" to "Full HTML";
    drupal-slider-03.jpg

  5. The region where the block will be placed can be set after. For now just click “Save Block", at the bottom of the page;
    (all other options may or not be defined, depending on your choice)


You can view these steps in the following video:

Have more questions? Submit a request

Comments

Got a question?

If you can't find the answer to your question, you can contact us.
We are here and happy to help.

Powered by Zendesk