@extends('layouts.master')

@section('content')

<h3>Conoce a nuestros profesores</h3>
<p class="links"><a href="/verano">Regresar a mensaje de Bienvenida</a></p>
<p class="links"><a href="/verano_fechas">Conoce las fechas importantes y costos</a></p>

<div class="profesores">
  <div>
    <a href="#" data-toggle="modal">
      <img src="/img/tmp/guillermoflores.jpg" alt="guillermoflores" class="img-thumbnail">
    </a>
    <span class="nombre">Guillermo Flores López - Jazz y Acrobacia</span>
  </div>

  <div>
    <a href="#" data-toggle="modal">
      <img src="/img/tmp/jonathancalderon.jpg" alt="jonathancalderon" class="img-thumbnail">
    </a>
    <span class="nombre">Jonathan Daí Calderón - Actuación</span>
  </div>

  <div>
    <a href="#" data-toggle="modal">
      <img src="/img/tmp/gabrielacastillejos.jpg" alt="gabrielacastillejos" class="img-thumbnail">
    </a>
    <span class="nombre">Gabriela Castillejos - Canto y Tap</span>
  </div>

  <div>
    <a href="#" data-toggle="modal">
      <img src="/img/tmp/michellemartinez.jpg" alt="michellemartinez" class="img-thumbnail">
    </a>
    <span class="nombre">Michelle Martínez - Hip Hop</span>
  </div>

  <div>
    <a href="#" data-toggle="modal">
      <img src="/img/tmp/aleidasanchez.jpg" alt="aleidasanchez" class="img-thumbnail">
    </a>
    <span class="nombre">Aleida Sánchez Villegas - Danzas del Mundo</span>
  </div>

  <div>
    <a href="#" data-toggle="modal">
      <img src="/img/tmp/fernandobarrientos.jpg" alt="fernandobarrientos" class="img-thumbnail">
    </a>
    <span class="nombre">Fernando Alonso Barrientos - Artes Marciales</span>
  </div>

  <div>
    <a href="#" data-toggle="modal">
      <img src="/img/tmp/carmenlopez.jpg" alt="carmenlopez" class="img-thumbnail">
    </a>
    <span class="nombre"> Carmen López - Manualidades </span>
  </div>
</div>


@endsection

@section('head')
<link rel="stylesheet" type="text/css" href="/slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="/slick/slick-theme.css"/>
@endsection

@section('script')
<script type="text/javascript" src="/js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="/js/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="/slick/slick.min.js"></script>     
<script type="text/javascript">
  $(document).ready(function(){
    $('.profesores').slick({
      accesibility: true,
      dots : true,
      infinite: true,
      //adptativeHeight:true,
      autoplay:true,
      mobileFirst:true,
      slidesToShow:2,
      slidesToScroll:1,
      responsive:[
        {
          breakpoint:1024,
          settings:{
            //adptativeHeight:true,
            slidesToShow: 5,
            slidesToScroll:1,
            infinite:true,
            dots:true
          }
        },
        {
          breakpoint:600,
          settings:{
            slidesToShow:3,
            slidesToScroll:1,
          }
        },
        {
          breakpoint:380,
          settings:{
            slidesToShow:1,
            slidesToScroll:1,
            autoplay:true
          }
        }
      ]
    });
  });
</script>
@endsection