Swiper Version: 4.0.0.
Platform/Target and Browser Versions: Ubuntu 17, Chrome
Generator: Hexo 3.0 + Hexo-theme-next
What you did
I am trying to put Swiper in my header area on my index page. What I did is put the demo file into one swiperheader.swig file. Remove the tags, and used CDNS links.
Full sample code
HTML snippet
<body itemscope itemtype="http://schema.org/WebPage" lang="{{ page.lang || page.language || config.language }}">
{% set container_class = "container " %}
{% if theme.sidebar.position %}
{% set container_class = container_class + 'sidebar-position-' + theme.sidebar.position %}
{% endif %}
<div class="{{ container_class }} {% block page_class %}{% endblock %}">
<div class="headband"></div>
<header id="header" class="header" itemscope itemtype="http://schema.org/WPHeader">
{% include 'swiperheader.swig' %}
<div class="header-inner"> {%- include '_partials/header.swig' %} </div>
</header>
The build is fine without error. The style sheet and .js files are included successfully.
Expected Behavior
A swiper region on top of my page like this
Actual Behavior
The swiper region EXISTS but the height is 0. If I put text between SAMPLE then the swiper region extends to a narrow band, shown below (top of the page).
I am not sure what I did wrong
I'm not familiar with hexo but I've had a similar bug with swiper and an image inside the slide. In my case the problem was that the image inside my swiper slide had position absolute. Every element that has position absolute does not have a height and this again results in a swiper slide being too small because swiper calculates the height according to the elements inside it.
Hope I could help.
Related
I would like to hide the sidebar on just 1 specific page and allow the content to take the full 100%. I am using liquid. I have done this:
{% if page.handle != 'lorem' %}
<main-sidebar class="sidebar {% if page.handle == 'lorem' %} blockCSS {% endif %}">
It works.
But then you check the homepage and normally all the sections are wrapped within the content-holder div but for some reason after adding that piece of code after 3 sections they are outside of that div. I have not even changed that div at all.
How do I ensure that all sections that come after the first 3 that they are also in the content-holder?
I am trying to extend a navbar so it appears in several pages. When I insert {% extend %} {% block content %} {% endblock %}, it only appears as text - the code dosen't work.
Here is my Navbar that I want to extend:
This is how it appears in the browser:
This is the html file I want to include my navbar in:
How it appears:
I want to inherit my navbar, but only the code text appears in the browser.
{% extend %} and so on have no special meaning in HTML.
The syntax is clearly from some template engine. Maybe Nunjucks.
You'll need to pass your source code through the template engine and use the HTML generated from it.
I am developing a web app and I'm using a navbar.html as layout in each page of my webapp with this code :
eachpage.html :
{% extends 'navbar.html' %}
{% block body %}
<div class="container">
<div class="titre_pages">
<h2>PAGE TITLE </h2>
</div>
</div>
Everything works fine and my pages seems responsive bu when I reduce the size of my browser my navbar and my titles are overlaping. Should I add something between my navbar/layout and my html code to avoid this ?
Here is my page with a normal browser size :
Here is my page when I reduce the size of my browser :
The answer to your problem is to use media queries to serve different css/design for different viewport sizes. If you use bootstrap or something and bootstrap grid often you can have responsiveness handled for you. Also see below for standard practice instead of extending a nav bar we would create a base.html that would contain the entire layout including navbar. With this method of assigning blocks and including files you can over you can then extend from base.html and only over ride the body block or sidebar block as necessary.
<!-- base.html -->
<!html>
<head>
</head>
<header>
{% block header %}
{% include 'navbar.html' %}
{% endblock %}
</header>
<body>
{% block body %}
{% include 'index.html' %}
{% endblock %}
</body>
</html>
I am trying to use tabbable divs in my django app. The toggle seem to work as expected, the content does show when the next tab is clicked.
But the CSS doesn't seem to be working. When I click on tab2, the focus still is in tab 1. On tab 2, it only grays out the button and when I click on other parts of the page the gray out disappears and even if tab2 details are shown, the focus is on tab 1.
Just to add here are my load scripts for the page
{% load bootstrap3 %}
{% bootstrap_css %}
{% bootstrap_javascript %}
On load of the page, I inspected the sources in chrome dev tools. In the sources section, I can see that jquery and bootstrap are loaded.
If your CSS is not working try collecting static files :
python manage.py collectstatic
I was able to make it work. I thought the libraries were not being loaded properly. In a way, because of the way the libraries are imported, they don't seem to work properly.
here's how it looks like at the top of my template
{% load static %}
{% load staticfiles %}
{% static 'static_jquery/js/jquery.js' %}
{% block content %}
{% load bootstrap3 %}
{% bootstrap_css %}
{% bootstrap_javascript %}
What it made work for me was that the bootstrap related libraries must be placed inside the block content. Before, it is placed up top after the load static statements.
And also I had to remove hardcoded script tags at the bottom of my template, then it worked. I had these removed
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.js"></script>
Other things that I did was install django_static_jquery, then performed collectstatic
I've just created a portfolio collection in Jekyll and I've managed to include extra html sections on my single-project.html layout with a simple Liquid syntax.
Those extra html sections came to the rescue so that a single project's page contents would not explicit have to reside within a unique container/wrapper defined for the {{ content }} variable.
So (visually speaking) I can put any html stuff within a <section></section> and style it accordingly in a way the single-project.html layout can be enriched with fullwidth container/elements and so on. However, I'm stuck with the possibility of injecting fullwidth contents only above and bellow the {{ content }} variable.
Would there be a workaround to achieve a dynamic layout structure to include sections on a page in Jekyll?
In a project.md document
For each single project I want to have extra html sections, I define in the document's front-matter the names of the html files I'd {% include %} in a single-project.html layout.
---
### Project Details
layout: project
title: Cards Mockup project
# Project Extra Sections
sections_top:
sections: ['section-intro.html', 'section-services-provided.html']
#
sections_bottom:
sections: ['section-fullwidth-figure.html']
---
In the single-project.html layout
I conditionally include the html sections provided earlier on each document's front-matter like bellow:
<div class="main-container">
{% if page.sections_top %}
<div class="container-fluid no-pad">
{% assign sections_top = page.sections_top['sections'] %}
{% for section in sections_top %}
{% include {{ section }} %}
{% endfor %}
</div>
{% endif %}
<!-- Section main content -->
<section class="article-body">
<div class="container">
<div class="row">
<div class="col-sm-12">
{{ content }}
</div>
</div>
</div><!-- end .container -->
</section><!-- end section main content -->
{% if page.sections_bottom %}
<div class="container-fluid no-pad">
{% assign sections_bottom = page.sections_bottom['sections'] %}
{% for section in sections_bottom %}
{% include {{ section }} %}
{% endfor %}
</div>
{% endif %}
</div><!-- end .main-container -->
Here's a screenshot: https://cloudup.com/cK-_jbTdTqU (everything in between the fullwidth images is the {{ content }}, the fullwidth images are html sections.
I guess you want something like this: https://github.com/y7kim/agency-jekyll-theme/blob/gh-pages/_layouts/default.html
You can just replace one of the includes with your {{ content }} tag.
If you (really) want the content editor to be able to select the sections and their order, you have to create a YAML array with the section names on top of your .md file and loop through them.