proekton.com/projects/templates/portfolio_detail.html

{% extends 'partials/base.html' %}
{% load staticfiles %}
{% load thumbnail %}
{% block content %}
  {% include 'partials/header.html' %}
  <div class="container mainScore">
    <div class="row">
      <div class="col-lg-12 allProjects">
        <p class="titleScore">{{ object }}</p>

        {% if object.get_prev %}
          <div class="all all1">
            <p><a href="{% url 'projects:contractor-portfolio-detail' object.get_prev.pk %}"> предыдущий</a></p>
          </div>
        {% endif %}

        {% if object.get_next %}
          <div class="all all2">
            <p><a href="{% url 'projects:contractor-portfolio-detail' object.get_next.pk %}">следующий</a></p>
          </div>
        {% endif %}
      </div>
      {#			<div class="btnReadyBlock disTab">#}
      {#				<div class="triangle1"></div>#}
      {#				<div class="col-lg-3">#}
      {#					<p class="cenaReady">{{ object.budget }} <i class="fa fa-rub"></i></p>#}
      {#				</div>#}
      {#                 {% if request.user.is_authenticated %}#}
      {#				<div class="col-lg-3">#}
      {#					<a href="{% url 'users:contractor-profile' object.contractor.pk %}" class="linkReady LR1">#}
      {#						купить#}
      {#					</a>#}
      {#				</div>#}
      {##}
      {#				<div class="col-lg-3">#}
      {#					<a href="{% url 'chat:chat-user' %}?user_id={{ object.contractor.pk }}" class="linkReady LR2">#}
      {#						Написать сообщение#}
      {#					</a>#}
      {#				</div>#}
      {#                {% endif %}#}
      {#				<div class="col-lg-3">#}
      {#					<a href="{% url 'users:contractor-profile' object.contractor.pk %}"   class="linkReady LR3">#}
      {#						посмотреть контакты#}
      {#					</a>#}
      {#				</div>#}
      {#			</div>#}


      <div class="desReadyBlock">
      {% if object.text %}
        <div class="col-lg-10 col-lg-offset-1">
          <p class="titleReady">Описание:</p>
        </div>
        <div class="col-lg-10 col-lg-offset-1">
          <p class="textReady">
            {{ object.text }}
          </p>
        </div>
      {% endif %}
        <div class="col-lg-12 sliderReady">
          <div class="arroww prev3"></div>
          <div class="arroww next3"></div>
          <div class="swiper-container gallery-top">
            <div class="swiper-wrapper">
              <div class="swiper-slide" style="background-image:url('{% static object.get_cover.url %}')"></div>
              {% for photo in object.photos.all %}
                <div class="swiper-slide" style="background-image:url('{% static photo.img.url %}')"></div>
              {% endfor %}
            </div>
          </div>
          <div class="swiper-container gallery-thumbs">
            <div class="swiper-wrapper">
              <div class="swiper-slide is-selected"
                   style="background-image:url('{% static object.get_cover.url %}')"></div>
              {% for photo in object.photos.all %}
                <div class="swiper-slide" style="background-image:url('{% static photo.img.url %}')"></div>
              {% endfor %}
            </div>
          </div>
        </div>
{#        <div class="col-lg-12">#}
{#          <div class="triangle2"></div>#}
{#          <div class="arr arr1"></div>#}
{#          <div class="arr arr2"></div>#}
{#        </div>#}
      </div>
{#      <div class="col-lg-12 sibl">#}
{#        <p>Похожие работы</p>#}
{#      </div>#}
{#      <div class="gallMini disTab">#}
{#        {% for worksell in worksell_related %}#}
{#          <div class="col-lg-3">#}
{##}
{#            <div class="insetCol box-sizing disTab">#}
{#              {% thumbnail worksell.get_cover "265x265" crop="center" as im %}#}
{#                <div class="imgGal" style="background: url('{{ im.url }}') no-repeat center;">#}
{#                  <div class="imgFigure"></div>#}
{#                </div>#}
{#              {% endthumbnail %}#}
{#            </div>#}
{#          </div>#}
{#        {% endfor %}#}
{#      </div>#}

      {% include 'partials/footer.html' %}

    </div>
  </div>

{% endblock %}
{% block js_block %}
  <script src="{% static 'js/swiper.min.js' %}"></script>
  <script>
    var galleryTop = new Swiper('.gallery-top', {
      nextButton: '.next3',
      prevButton: '.prev3',
      spaceBetween: 10,
    });
    var galleryTop = new Swiper('.gallery-top', {
      nextButton: '.next3',
      prevButton: '.prev3',
      spaceBetween: 15,
      onSlideChangeEnd: function (swiper) {
        var activeIndex = swiper.activeIndex;
        $(galleryThumbs.slides).removeClass('is-selected');
        $(galleryThumbs.slides).eq(activeIndex).addClass('is-selected');
        galleryThumbs.slideTo(activeIndex, 300, false);

      }

    });
    var galleryThumbs = new Swiper('.gallery-thumbs', {
      spaceBetween: 15,
      freeMode: true,
      centeredSlides: false,
      slidesPerView: 6,
      touchRatio: 0.2,
      nextButton: '.arr2',
      prevButton: '.arr1',
      onClick: function (swiper, event) {
        var clicked = swiper.clickedIndex
        swiper.activeIndex = clicked;
        swiper.updateClasses()
        $(swiper.slides).removeClass('is-selected');
        $(swiper.clickedSlide).addClass('is-selected');
        galleryTop.slideTo(clicked, 300, false);

      }
    });
  </script>
{% endblock %}