proekton.com/work_sell/templates/worksell_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 'work_sell:detail' object.get_prev.pk  %}"> предыдущий</a></p>
				</div>
                {% endif %}

                {% if object.get_next %}
				<div class="all all2">
					<p><a href="{% url 'work_sell: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 %}