working on collections slider

sails/src/assets/scripts/modules/student/views/collections.html

-<!-- Collection tab-->
+<!-- Collection tab -->
 <div class="panel panel-default student_tab_panel">
   <div class="panel-body">
-    <!--
-    <div class="row">
-      <div class="col-md-6">
-        <a class="btn btn-success btn-sm" role="button" ng-click="open()">
-          <i class="glyphicon glyphicon-plus" aria-hidden="true"></i>
-          <span translate>add_picto</span>
-        </a>
-      </div>
-    </div>
-    -->
-    <div class="col-xs-10"><!-- col-xs-10 -->
-      <div id="student_collection"
-        class="student-collection"
-        ng-class="{ 'student-collection-loading': loadingPictos }"
-        data-loading="{{ 'loading_pictos' | translate }}">
-        <!-- No categories grid -->
-        <div
-          class="picto-grid picto-free-grid">
+
+    <!-- Switch panel body -->
+    <div class="" ng-switch="slide.state">
+
+      <!-- Slides -->
+      <div class="col-xs-10">
+        <div id="student_collection"
+          class="student-collection"
+          ng-class="{ 'student-collection-loading': loadingPictos }"
+          data-loading="{{ 'loading_pictos' | translate }}">
+          <!-- No categories grid -->
           <div
-            ng-repeat="studentPictoRow in freeCategoryPictos"
-            ng-init="rowIndex = $index"
-            class="picto-grid__row">
+            class="picto-grid picto-free-grid">
             <div
-              ng-hide="studentData.attributes.size == 'large' && (rowIndex > 3 || colIndex > 7)"
-              class="picto pull-left"
-              data-row="{{ rowIndex }}"
-              data-column="{{ colIndex }}"
-              id="student-picto-{{
-                studentPicto.id ||
-                ('empty-' + colIndex + '-' + rowIndex)
-              }}"
-              draggable droppable drop="handleDrop"
-              popover="{{studentPicto != emptyStudentPicto ? studentPicto.attributes.expression : ''}}"
-              popover-trigger="mouseenter"
-              ng-init="colIndex = $index"
-              ng-repeat="studentPicto in studentPictoRow track by $index">
-              <!-- picto-legend -->
-              <div
-                class="picto-legend-normal"
-                ng-if="studentPicto.attributes.legend == 'normal'">
-                {{ studentPicto.attributes.expression }}
-              </div>
-              <div
-                class="picto-legend-full"
-                ng-if="studentPicto.attributes.legend == 'full'">
-                {{ studentPicto.attributes.expression }}
-              </div>
-              <!-- /.picto-legend  -->
-              <img
-                src="/app/img/redcross.png"
-                class="red-cross-visibility disabled"
-                ng-if="studentPicto.attributes.status == 'disabled'"/>
-              <img
-                ng-src="{{studentPicto.picto.uri}}"
-                class="unselectable"
-                ng-class="{
-                  'novisible': studentPicto.attributes.status == 'invisible',
-                  'deactivate': studentPicto.attributes.status == 'disabled'
-                }"
-                ng-style="{
-                  'background-color': studentPicto.attributes.color || '#ffffff'
-                }"/>
+              ng-repeat="studentPictoRow in freeCategoryPictos"
+              ng-init="rowIndex = $index"
+              class="picto-grid__row">
               <div
+                ng-hide="studentData.attributes.size == 'large' && (rowIndex > 3 || colIndex > 7)"
+                class="picto pull-left"
+                data-row="{{ rowIndex }}"
+                data-column="{{ colIndex }}"
+                id="student-picto-{{
+                  studentPicto.id ||
+                  ('empty-' + colIndex + '-' + rowIndex)
+                }}"
+                draggable droppable drop="handleDrop"
+                popover="{{studentPicto != emptyStudentPicto ? studentPicto.attributes.expression : ''}}"
+                popover-trigger="mouseenter"
+                ng-init="colIndex = $index"
+                ng-repeat="studentPicto in studentPictoRow track by $index">
+                <!-- picto-legend -->
+                <div
+                  class="picto-legend-normal"
+                  ng-if="studentPicto.attributes.legend == 'normal'">
+                  {{ studentPicto.attributes.expression }}
+                </div>
+                <div
+                  class="picto-legend-full"
+                  ng-if="studentPicto.attributes.legend == 'full'">
+                  {{ studentPicto.attributes.expression }}
+                </div>
+                <!-- /.picto-legend  -->
+                <img
+                  src="/app/img/redcross.png"
+                  class="red-cross-visibility disabled"
+                  ng-if="studentPicto.attributes.status == 'disabled'"/>
+                <img
+                  ng-src="{{studentPicto.picto.uri}}"
+                  class="unselectable"
+                  ng-class="{
+                    'novisible': studentPicto.attributes.status == 'invisible',
+                    'deactivate': studentPicto.attributes.status == 'disabled'
+                  }"
+                  ng-style="{
+                    'background-color': studentPicto.attributes.color || '#ffffff'
+                  }"/>
+                <div
+                    class="picto_options"
+                    ng-if="studentPicto == emptyStudentPicto">
+                    <a
+                      ng-click="open_add(rowIndex, colIndex, true)"
+                      class="picto_add"
+                      title="{{ 'add_picto' | translate}}">
+                      <i class="color_green glyphicon glyphicon-plus-sign" aria-hidden="true"></i>
+                    </a>
+                </div>
+                <div
                   class="picto_options"
-                  ng-if="studentPicto == emptyStudentPicto">
+                  ng-if="studentPicto !== emptyStudentPicto">
                   <a
-                    ng-click="open_add(rowIndex, colIndex, true)"
-                    class="picto_add"
-                    title="{{ 'add_picto' | translate}}">
-                    <i class="color_green glyphicon glyphicon-plus-sign" aria-hidden="true"></i>
+                    ng-click="deleteFreePicto(studentPicto)"
+                    class="picto_remove"
+                    title="{{ 'delete' | translate}}">
+                    <i class="color_red glyphicon glyphicon-remove-circle" aria-hidden="true"></i>
                   </a>
+                  <a ng-click="view_picto(studentPicto)" class="picto_ok" >
+                    <i ng-class="{
+                        color_green: studentPicto.attributes.status == 'invisible',
+                        color_black: studentPicto.attributes.status == 'enabled'
+                      }"
+                      class="glyphicon glyphicon-eye-open"
+                      aria-hidden="true"
+                      title="{{ studentPicto.attributes.status | translate}}">
+                    </i>
+                  </a>
+                  <a
+                    class="picto_tags"
+                    ng-click="open_tags(studentPicto)">
+                    <i class="glyphicon glyphicon-tags" aria-hidden="true"></i>
+                  </a>
+                  <a
+                    class="picto_config"
+                    ng-click="open_config(studentPicto)">
+                    <i class="glyphicon glyphicon-cog" aria-hidden="true"></i>
+                  </a>
+                </div>
               </div>
-              <div
-                class="picto_options"
-                ng-if="studentPicto !== emptyStudentPicto">
-                <a
-                  ng-click="deleteFreePicto(studentPicto)"
-                  class="picto_remove"
-                  title="{{ 'delete' | translate}}">
-                  <i class="color_red glyphicon glyphicon-remove-circle" aria-hidden="true"></i>
-                </a>
-                <a ng-click="view_picto(studentPicto)" class="picto_ok" >
-                  <i ng-class="{
-                      color_green: studentPicto.attributes.status == 'invisible',
-                      color_black: studentPicto.attributes.status == 'enabled'
-                    }"
-                    class="glyphicon glyphicon-eye-open"
-                    aria-hidden="true"
-                    title="{{ studentPicto.attributes.status | translate}}">
-                  </i>
-                </a>
-                <a
-                  class="picto_tags"
-                  ng-click="open_tags(studentPicto)">
-                  <i class="glyphicon glyphicon-tags" aria-hidden="true"></i>
-                </a>
-                <a
-                  class="picto_config"
-                  ng-click="open_config(studentPicto)">
-                  <i class="glyphicon glyphicon-cog" aria-hidden="true"></i>
-                </a>
-              </div>
+              <div class="clearfix"></div>
             </div>
-            <div class="clearfix"></div>
           </div>
         </div>
-      </div>
-    </div><!--/. col-xs-10 -->
+      </div><!--/. col-xs-10 -->
+
+    </div><!--/. Switch panel body -->
 
     <div class="col-xs-2">
       <div class="text-center">