Я пытаюсь создать динамический c jCarousel , извлекающий изображения из БД, но я не знаю, как заставить его работать, потому что не отображаются ни эскизы, ни следующие изображения на Карусель, миниатюры не работали, прежде чем я добавил операторы «если» django, я проверил и попытался воспроизвести официальный пример, но я получил только одно изображение.
jcarousel. подключенная карусель. 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-control. 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));
imgur
база. 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>