Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Carousel extension is not working #83

Open
jeavanderwiel opened this issue Jan 19, 2022 · 4 comments
Open

Carousel extension is not working #83

jeavanderwiel opened this issue Jan 19, 2022 · 4 comments

Comments

@jeavanderwiel
Copy link

jeavanderwiel commented Jan 19, 2022 •
edited
Loading

Hi,

I would like to use the carousel extension, but somehow I'm not able to load the carousel properly. I'm getting the images below each other. The following I have setup.

base.html

{% load static %}

{% load django_simple_bulma %} {% bulma theme %} {% font_awesome %} <title>{% block title %}{% endblock %}Pocketminerals</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script src="{% static 'js/scripts.js' %}"></script> 
<body>

	<nav class="navbar is-dark" id="navbarapp">
		<div class="container is-fullhd">
		<div class="navbar-brand">
			<a class="navbar-item" href="{% url 'frontpage' %}">Saul Gadgets</a>

			<a @click="toggleMenu()" role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="main-navbar">
				<span aria-hidden="true"></span>
				<span aria-hidden="true"></span>
				<span aria-hidden="true"></span>
			</a>
		</div>

		<div id="main-navbar" class="navbar-menu" :class="{ 'is-active': menuClass }">
			<div class="navbar-start">
				<div class="navbar-item">
					<form method="get" action="{% url 'search' %}">
						<div class="field has-addons">
							<div class="control">
								<input type="text" class="input" placeholder="Search..." name="query">
							</div>
							<div class="control">
								<button class="button is-success">Search</button>
							</div>
						</div>
					</form>
				</div>
			</div>
			<div class="navbar-end">
				{% for category in menu_categories %}
					{% if not category.children.all %}
                    	<a href="{% url 'category_detail' category.slug %}" class="navbar-item">{{ category.title }}</a>
					{% else %}
						<div class="navbar-item has-dropdown is-hoverable">
							<a href="{% url 'category_detail' category.slug %}" class="navbar-link">{{ category.title }}</a>

							<div class="navbar-dropdown">
								{% for subcategory in category.children.all %}
									<a href="{% url 'category_detail' subcategory.slug %}" class="navbar-item">{{ subcategory.title }}</a>
								{% endfor %}
							</div>
						</div>
					{% endif %}
				{% endfor %}

				<div class="navbar-item">
					<a href="{% url 'cart' %}" class="button is-primary">Cart ([[ numItems ]])</a>
				</div>

				{% if request.user.is_authenticated %}
					<div class="navbar-item">
						<a href="{% url 'myaccount' %}" class="button is-light">My account</a>
					</div>
				{% else %}
					<div class="navbar-item">
						<div class="buttons">
							<a href="{% url 'signup' %}" class="button is-primary"><strong>Sign up</strong></a>
							<a href="{% url 'login' %}" class="button is-light">Log in</a>
						</div>
					</div>
				{% endif %}
			</div>
		</div>
		</div>
	</nav>
{% block content %} {% endblock %} 
	</div>

	{% include 'parts/newsletter.html' %}

	<footer class="footer">
		<div class="container is-fullhd">
		<div class="columns">
			<div class="column is-2">
				<h2 class="subtitle">Saul Gadgets</h2>
			</div>

			<div class="column is-8">
				<a href="{% url 'contact' %}" class="navbar-item">Contact</a>
				<a href="{% url 'about' %}" class="navbar-item">About</a>
			</div>
		</div>
		</div>
	</footer>


			<!-- <script src="{% static 'js/scripts.js' %}"></script> -->
	<script src="https://unpkg.com/[email protected]/dist/vuex.js"></script>
	<script>
		var store = new Vuex.Store({
			state: {
				numItems: {{ cart.get_total_length }},
				totalCost: {{ cart.get_total_cost }}
			},
			mutations: {
				increment(state, quantity) {
					state.numItems += quantity;
				},
				changeTotalCost(state, newCost) {
					state.totalCost += newCost
				}
			}
		});

		var navbarapp = new Vue({
			el: '#navbarapp',
			delimiters: ['[[', ']]'],
			store: store,
			data () {
				return {
					menuClass: false
				}
			},
			computed: {
				numItems: function() {
					return store.state.numItems
				}
			},
			methods: {
				toggleMenu() {
					console.log('toggleMenu');

					this.menuClass = !this.menuClass;
				}
			}
		});

	</script>

	{% block scripts %}
	{% endblock %}
</body>

=======================
scripts.js

bulmaCarousel.attach('#carousel-demo', {
slidesToScroll: 1,
slidesToShow: 3
});

=======================
settings.py

(.....)

Custom settings for django-simple-bulma

BULMA_SETTINGS = {
"extensions": [
"all"
],
"variables": {
"primary": "#000000",
"size-1": "6rem",
},
"alt_variables": {
"primary": "#fff",
"scheme-main": "#000",
},
"output_style": "compressed",
"fontawesome_token": "e761a01be3",
}

=======================

I hope someone can help me.

Thank you!

Kind regards,

Joshua
@jeavanderwiel jeavanderwiel changed the title Carousel is not working Carousel extension is not working Jan 21, 2022
@tehfink
Copy link

tehfink commented Jul 31, 2022

I think the carousel has been abandoned: https://www.npmjs.com/package/bulma-carousel/v/4.0.24#user-content-exclamationexclamationexclamation-looking-for-new-maintainer-exclamationexclamationexclamation

@lemonsaurus
Copy link
Owner

Hmm.. Thanks @tehfink, that seems like a likely culprit for the problem that @jeavanderwiel is having.

I will deprecate support for this plugin in the next version of django-simple-bulma then. It probably just doesn't work with the version of bulma that we have bundled.

@jeavanderwiel
Copy link
Author

Hi Guys,

Thx for coming back to this. Is there another way to show carousels in my project?

Please let me know!

Kind regards,

Joshua

@lemonsaurus
Copy link
Owner

If you need a carousel, you could try something like glide.js, perhaps? It's available as a CDN (so you don't need npm to install it), and should be very easy to get working. Quite minimalist, too.

There is also a school of thought that says that you should not be using carousels at all, as they are considered to be poor UX. Perhaps this problem could be better solved without one?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@tehfink @lemonsaurus @jeavanderwiel