You need to include it in a {% block %}, since otherwise, it is of course not included in the final content.
If you extend a template, then you can only override the blocks. All content not in the blocks, will be interpreted, but will not be put into the final response.
So you can for example include the content of the {% include %} part in:
{% extends "layout.html" %}
{% block content %}
{% include "slider.html" %}
<div class="container clearfix">
<div class="heading-block topmargin-lg center">
<h2>My super blog</h2>
</div>
</div>
{% endblock %}
I have a layout.html where I am setting the general layout for my project and then for each page I want to render different HTML based on the layout.html
For my home page I want to render a slider that provides a welcome message to the page, nice pictures etc, I only want this displayed on the home page.
The issue I am having is that when I I have {% include "slider.html" %} on my layout.html, the slider renders fine, but when I move it to my home.html which extends layout.html the slider is not rendered.
How can I do this so teh slider is only rendered when the user goes to home?
home.html
{% extends "layout.html" %}
{% include "slider.html" %}
{% block content %}
<div class="container clearfix">
<div class="heading-block topmargin-lg center">
<h2>My super blog</h2>
</div>
</div>
{% endblock %}
layout.html
{% load static %}
<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="author" content="SemiColonWeb" />
<!-- Stylesheets
============================================= -->
<link href="https://fonts.googleapis.com/css?family=Lato:300,400,400i,700|Raleway:300,400,500,600,700|Crete+Round:400i" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="{% static 'css/bootstrap.css' %}" type="text/css"/>
<link rel="stylesheet" href="{% static 'css/style.css' %}" type="text/css" />
<link rel="stylesheet" href="{% static 'css/swiper.css' %}" type="text/css" />
<link rel="stylesheet" href="{% static 'css/dark.css' %}" type="text/css" />
<link rel="stylesheet" href="{% static 'css/font-icons.css' %}" type="text/css" />
<link rel="stylesheet" href="{% static 'css/animate.css' %}" type="text/css" />
<link rel="stylesheet" href="{% static 'css/magnific-popup.css' %}" type="text/css" />
<link rel="stylesheet" href="{% static 'css/style-rtl-vars.css' %}" type="text/css" />
<link rel="stylesheet" href="{% static 'app/content/responsive.css' %}" type="text/css" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- Document Title
============================================= -->
<title>Super blog</title>
</head>
<body class="stretched">
<!-- Document Wrapper
============================================= -->
<div id="wrapper" class="clearfix">
{% include "header.html" %}
<section id="content">
<div class="content-wrap">
<div class="container clearfix">
{% block content %}
{% endblock %}
</div>
</div>
</section>
{% include "footer.html" %}
</div>
<script type="text/javascript" src="{% static 'scripts/jquery.js' %}"></script>
<script type="text/javascript" src="{% static 'scripts/plugins.js' %}"></script>
<script type="text/javascript" src="{% static 'scripts/functions.js' %}"></script>
</body>
slider.html
<section id="slider" class="slider-element slider-parallax swiper_wrapper full-screen clearfix">
<div class="slider-parallax-inner">
<div class="swiper-container swiper-parent">
<div class="swiper-wrapper">
<div class="swiper-slide dark" style="background-image: url('/static/images/typing-on-mac.jpg');">
<div class="container clearfix">
<div class="slider-caption slider-caption-center">
<h2 data-animate="fadeInUp">super blog</h2>
<p class="d-none d-sm-block" data-animate="fadeInUp" data-delay="200">some text</p>
</div>
</div>
</div>
</div>
</div>
<a href="#" data-scrollto="#content" data-offset="100" class="dark one-page-arrow"><i class="icon-angle-down infinite animated fadeInDown"></i></a>
</div>
</section>
