CODEWITHSUNDEEP
javascripthtmlcsstwitter-bootstrapmeteor
asm
asm

Reputation: 947

Meteor - Adding image slider using templates not displaying correctly

I'm using Meteor w/ Twitter bootstrap + IronRouter which looks like

Router.configure({
    layoutTemplate: 'layout'
});
Router.map( function (){
    this.route('home', {path: '/'});
    this.route('test', {path: '/test'});
}

The layout template (layout.html) looks like:

<template name="layout">
    {{>navigation}}
  <div class="container">
    {{>yield}}
  </div>
</template>

The navigation template has the navigation bar and drop-down menus, thus shows up on every page.

I want to add an image slider to the test page for which I got the sample code from Code Lab Carousel

My /client/test/ directory has the 3 files: test.html, test.js, test.css

test.css looks like:

h2{
    margin: 0;     
    color: #666;
    padding-top: 90px;
    font-size: 52px;
    font-family: "trebuchet ms", sans-serif;    
}
.item{
    background: #333;    
    text-align: center;
    height: 300px !important;
}
.carousel{
    margin-top: 20px;
}
.bs-example{
    margin: 20px;
}

test.html looks like:

<template name="test">
    <script   src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js">    </script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js">    </script>
<div class="page-header">
    <h1>Test</h1>
</div>
<div class="bs-example">
<div id="myCarousel" class="carousel slide" data-interval="4000" data-ride="carousel">
    <!-- 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>

    </ol>   
   <!-- Carousel items -->
    <div class="carousel-inner">
        <div class="active item">
            <h2>Slide 1</h2>
            <div class="carousel-caption">
              <h3>First slide label</h3>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            </div>
        </div>
        <div class="item">
            <h2>Slide 2</h2>
            <div class="carousel-caption">
              <h3>Second slide label</h3>
              <p>Aliquam sit amet gravida nibh, facilisis gravida odio.</p>
            </div>
        </div>
        <div class="item">
            <h2>Slide 3</h2>
            <div class="carousel-caption">
              <h3>Third slide label</h3>
              <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
            </div>
        </div>
    </div>
    <!-- Carousel nav -->
    <a class="carousel-control left" href="#myCarousel" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
    </a>
    <a class="carousel-control right" href="#myCarousel" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"></span>
    </a>

</div>

This doesn't display the slider bar as shown in the codelab. It shows circles instead of arrows. Secondly, the three circles which show which image we're on is also on the right hand side corner.

enter image description here

So my questions are:

1) How would I fix this circle issue? 2) What's the best guide for fully understanding templates because I'm not clear on the structure of it.

For example, templates can go inside tags? But would a {{>yield}} only include the template or everything which is inside the body tags?

Upvotes: 0

Views: 574

Answers (1)

asm
asm

Reputation: 947

The issue was glyphicons not being loaded properly. I fixed this by removing bootstap 

meteor remove bootstrap

And then adding bootstrap-3

meteor add mizzao:bootstrap-3

Upvotes: 1

Related Questions