javascript - jCarousel（连接轮播）与 django

Question

我正在尝试制作一个动态的jCarousel 从数据库中提取图像，但我不知道如何让它工作，因为缩略图没有显示，也没有在轮播上显示下一个图像，在我添加之前缩略图没有工作“if” django 语句，我已经检查并尝试复制官方示例，但我只得到一张图片。

{% extends 'base.html' %}

{% load humanize %}

{% block content %} 


        <!--jCarousel-->
          <div class="wrapper">
            <div class="connected-carousels">
                <div class="stage">
                    <div class="carousel carousel-stage" data-jcarousel="true">
                        <ul>
                            <li><img src="{{ property.main_photo.url }}" width="600" height="400" alt=""></li>
                            {% if property.photo_1 %}
                            <li><img src="{{ property.photo_1.url }}" width="600" height="400" alt=""></li>
                            {% endif %}
                            {% if property.photo_2 %}
                            <li><img src="{{ property.photo_2.url }}" width="600" height="400" alt=""></li>
                            {% endif %}
                            {% if property.photo_3 %}
                            <li><img src="{{ property.photo_3.url }}" width="600" height="400" alt=""></li>
                            {% endif %}
                            {% if property.photo_4 %}
                            <li><img src="{{ property.photo_4.url }}" width="600" height="400" alt=""></li>
                            {% endif %}
                            {% if property.photo_5 %}
                            <li><img src="{{ property.photo_5.url }}" width="600" height="400" alt=""></li>
                            {% endif %}

                        </ul>
                    </div>
                    <p class="photo-credits">
                        <a href="#">credits</a>
                    </p>
                    <a href="#" class="prev prev-stage inactive" data-jcarouselcontrol="true"><span>&lsaquo;</span></a>
                    <a href="#" class="next next-stage" data-jcarouselcontrol="true"><span>&rsaquo;</span></a>
                </div>

                <div class="navigation">
                    <a href="#" class="prev prev-navigation inactive" data-jcarouselcontrol="true">&lsaquo;</a>
                    <a href="#" class="next next-navigation" data-jcarouselcontrol="true">&rsaquo;</a>
                    <div class="carousel carousel-navigation" data-jcarousel="true">
                        <ul>
                            <li data-jcarouselcontrol="true" class="active"><img src="{{ property.main_photo.url }}" width="50" height="50" alt=""></li>
                            {% if property.photo_1 %}
                            <li data-jcarouselcontrol="true" class="active"><img src="{{ property.photo_1.url }}" width="50" height="50" alt=""></li>
                            {% endif %}
                            {% if property.photo_2 %}
                            <li data-jcarouselcontrol="true" class="active"><img src="{{ property.photo_2.url }}" width="50" height="50" alt=""></li>
                            {% endif %}
                            {% if property.photo_3 %}
                            <li data-jcarouselcontrol="true" class="active"><img src="{{ property.photo_3.url }}" width="50" height="50" alt=""></li>
                            {% endif %}
                            {% if property.photo_4 %}
                            <li data-jcarouselcontrol="true" class="active"><img src="{{ property.photo_4.url }}" width="50" height="50" alt=""></li>
                            {% endif %}
                            {% if property.photo_5 %}
                            <li data-jcarouselcontrol="true" class="active"><img src="{{ property.photo_5.url }}" width="50" height="50" alt=""></li>
                            {% endif %}
                        </ul>
                    </div>
                </div>
            </div>
          </div>
{% endblock %}

jcarousel.connected-carousel.js 文件：

(function($) {
    // This is the connector function.
    // It connects one item from the navigation carousel to one item from the
    // stage carousel.
    // The default behaviour is, to connect items with the same index from both
    // carousels. This might _not_ work with circular carousels!
    var connector = function(itemNavigation, carouselStage) {
        return carouselStage.jcarousel('items').eq(itemNavigation.index());
    };

    $(function() {
        // Setup the carousels. Adjust the options for both carousels here.
        var carouselStage      = $('.carousel-stage').jcarousel();
        var carouselNavigation = $('.carousel-navigation').jcarousel();

        // We loop through the items of the navigation carousel and set it up
        // as a control for an item from the stage carousel.
        carouselNavigation.jcarousel('items').each(function() {
            var item = $(this);

            // This is where we actually connect to items.
            var target = connector(item, carouselStage);

            item
                .on('jcarouselcontrol:active', function() {
                    carouselNavigation.jcarousel('scrollIntoView', this);
                    item.addClass('active');
                })
                .on('jcarouselcontrol:inactive', function() {
                    item.removeClass('active');
                })
                .jcarouselControl({
                    target: target,
                    carousel: carouselStage
                });
        });

        // Setup controls for the stage carousel
        $('.prev-stage')
            .on('jcarouselcontrol:inactive', function() {
                $(this).addClass('inactive');
            })
            .on('jcarouselcontrol:active', function() {
                $(this).removeClass('inactive');
            })
            .jcarouselControl({
                target: '-=1'
            });

        $('.next-stage')
            .on('jcarouselcontrol:inactive', function() {
                $(this).addClass('inactive');
            })
            .on('jcarouselcontrol:active', function() {
                $(this).removeClass('inactive');
            })
            .jcarouselControl({
                target: '+=1'
            });

        // Setup controls for the navigation carousel
        $('.prev-navigation')
            .on('jcarouselcontrol:inactive', function() {
                $(this).addClass('inactive');
            })
            .on('jcarouselcontrol:active', function() {
                $(this).removeClass('inactive');
            })
            .jcarouselControl({
                target: '-=1'
            });

        $('.next-navigation')
            .on('jcarouselcontrol:inactive', function() {
                $(this).addClass('inactive');
            })
            .on('jcarouselcontrol:active', function() {
                $(this).removeClass('inactive');
            })
            .jcarouselControl({
                target: '+=1'
            });
    });
})(jQuery);

jquery.jcarousel-controls.js 文件：

/*! jCarousel - v0.3.9 - 2018-07-30
* http://sorgalla.com/jcarousel/
* Copyright (c) 2006-2018 Jan Sorgalla; Licensed MIT */
(function($) {
    'use strict';

    $.jCarousel.plugin('jcarouselControl', {
        _options: {
            target: '+=1',
            event:  'click',
            method: 'scroll'
        },
        _active: null,
        _init: function() {
            this.onDestroy = $.proxy(function() {
                this._destroy();
                this.carousel()
                    .one('jcarousel:createend', $.proxy(this._create, this));
            }, this);
            this.onReload = $.proxy(this._reload, this);
            this.onEvent = $.proxy(function(e) {
                e.preventDefault();

                var method = this.options('method');

                if ($.isFunction(method)) {
                    method.call(this);
                } else {
                    this.carousel()
                        .jcarousel(this.options('method'), this.options('target'));
                }
            }, this);
        },
        _create: function() {
            this.carousel()
                .one('jcarousel:destroy', this.onDestroy)
                .on('jcarousel:reloadend jcarousel:scrollend', this.onReload);

            this._element
                .on(this.options('event') + '.jcarouselcontrol', this.onEvent);

            this._reload();
        },
        _destroy: function() {
            this._element
                .off('.jcarouselcontrol', this.onEvent);

            this.carousel()
                .off('jcarousel:destroy', this.onDestroy)
                .off('jcarousel:reloadend jcarousel:scrollend', this.onReload);
        },
        _reload: function() {
            var parsed   = $.jCarousel.parseTarget(this.options('target')),
                carousel = this.carousel(),
                active;

            if (parsed.relative) {
                active = carousel
                    .jcarousel(parsed.target > 0 ? 'hasNext' : 'hasPrev');
            } else {
                var target = typeof parsed.target !== 'object' ?
                                carousel.jcarousel('items').eq(parsed.target) :
                                parsed.target;

                active = carousel.jcarousel('target').index(target) >= 0;
            }

            if (this._active !== active) {
                this._trigger(active ? 'active' : 'inactive');
                this._active = active;
            }

            return this;
        }
    });
}(jQuery));

图片

base.html 文件：

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <!-- Font Awesome -->
  <link rel="stylesheet" href="{% static 'css/all.css' %}">
  <!-- Bootstrap -->
  <link rel="stylesheet" href="{% static 'css/bootstrap.css' %}">
  <!-- Custom -->
  <link rel="stylesheet" href="{% static 'css/style.css' %}">
  <!--jCarousel-->
  <link rel="stylesheet" href="{% static 'css/jcarousel.connected-carousels.css' %}">
    <title>Rental</title>
</head>
<body>

<!-- Top Bar-->
{% include 'partials/_topbar.html' %}
<!-- Nav Bar-->
{% include 'partials/_navbar.html' %}
<!-- Main content-->
    {% block content %} {% endblock %}
<!-- Footer-->
{% include 'partials/_footer.html' %}

    <script src="{% static '/js/jquery-3.3.1.min.js' %} "></script>
    <script src="{% static 'js/bootstrap.bundle.min.js' %} "></script>
    <script src="{% static 'js/main.js' %} "></script>
    <script src="{% static 'js/jcarousel.connected-carousels.js' %} "></script>
    <script src="{% static 'js/jquery.jcarousel.js' %} "></script>
    <script src="{% static 'js/jquery.jcarousel-control.js' %} "></script>
    <script src="{% static 'js/jquery.js' %} "></script>

</body>
</html>

标签： javascriptjquerydjango

Answer 1

您是否尝试将jQuery库放在所有文件之前？

<script src="{% static 'js/jquery.js' %} "></script>
<script src="{% static 'js/jcarousel.connected-carousels.js' %} "></script>
<script src="{% static 'js/jquery.jcarousel.js' %} "></script>
<script src="{% static 'js/jquery.jcarousel-control.js' %} "></script>