<div data-section-id="{{ section.id }}" data-section-type="quotes">

  <div class="happy-customer" style="text-align:center;">
    <div class="section-header title text-center">
      {% if section.settings.title != blank %}
      <h2>{{ section.settings.title }}</h2>
      {% endif %}
    </div>
  </div>

  <div class="customer_review_content">
    <ul class="cr_items cr_items-{{section.id}}">
      {% for block in section.blocks %}
        <li class="cr_item">
          {% if block.settings.staricon != blank %}
          	<img class="lazyload star" data-src="{{ block.settings.staricon | img_url: 'master' }}" alt="" />
          {% endif %}
          {% if block.settings.content != blank %}
            <div class="cr_content">
              <p>{{ block.settings.content }}</p>
              <h5>{{ block.settings.name }} <span>{% include 'icon-check-verify' %} {{ block.settings.verified }}</span></h5>
            </div>
          {% endif %}
        </li>
      {% endfor %}
    </ul>
  </div>

</div>


<!-- <<<<<<<<<<<<<<<<<<<<<< home review happy customer >>>>>>>>>>>>>>>>>>>>>> -->

<script type="text/javascript">
  $(document).ready(function(){
    $('.customer_review_content .cr_items-{{section.id}} ').slick({
        rows: 2,
        infinite: true,
        autoplay:true,
        autoplaySpeed:2500,
        arrows:false,
        dots:true,
        centerMode:true,
        slidesToShow:3,
        slidesToScroll: 1,
        centerPadding: '0',
        responsive: [
          {
            breakpoint: 991,
            settings: {
              slidesToShow: 2,
              slidesToScroll: 1,
              infinite: true,
              dots: true
            }
          },
          {
            breakpoint: 640,
            settings: {
              slidesToShow: 1,
              slidesToScroll: 1
            }
          }
        ]
      });
  });
</script>

<style type="text/css">
  .happy-customer .section-header p { color:{{ settings.title_color }}; border-color:{{ settings.title_Border_color }}; }
</style>

{% schema %}
{
"name": "Clientes satisfeitos",
  "settings": [
	{
		"type": "text",
		"id": "title",
		"label": "Título",
		"default": "500+ Clientes satisfeitos"
	}
  ],
	"blocks": [
    {
      "type": "quote",
      "name": "Detalhes do cliente",
      "settings": [
		{
          "type": "image_picker",
          "id": "staricon",
          "label": "Ícone da estrela"
        },
		{
			"type":"textarea",
			"id": "content",
			"label": "Conteúdo da avaliação"
		},
		{
			"type":"text",
			"id": "name",
			"label": "Nome do cliente"
		},
		{
			"type":"text",
			"id": "verified",
			"label": "Avaliação verificada"
		}
      ]
    }
  ],"presets": [
    {
      "name": "Clientes satisfeitos",
      "category": "astron"
    }
  ]
 }
{% endschema %}

{% stylesheet %}
{% endstylesheet %}

{% javascript %}

{% endjavascript %}



