{% if dynamic_page_route_level == 0 %}
<h1>Top-level</h1>
<div class=“featured-video-outer”>
<h3>Featured Video</h3>
{% set row = hubdb_table_rows(dynamic_page_hubdb_table_id)[0] %}
<div class=“child-row” id=“featured-video”>
<h2><a href=“{{ request.path }}/{{ row.hs_path }}”>{{ row.name }}</a></h2>
<video width=“320” height=“240” controls>
<source src=“{{row.youtube_video_link.video}}” type=“video/mp4”>
</video>
</div>
</div>
{% set childRows = hubdb_table_rows(row.hs_child_table_id) %}
<h3>Article you may find interesting</h3>
<div class=“article-intresting-outer”>
<div>
{% for childRow in childRows %}
<div><a href=“{{ request.path }}/{{ row.hs_path }}/{{childRow.hs_path}}”>{{ childRow.category }}</a></div>
{% endfor %}
</div>
</div>
<h3>Featured Article</h3>
<div class=“featured-article slick-carousel” id=“featured-article”>
{% for fet in childRows %}
<a {% if loop.index == 1 %}class=“active”{% endif %}>
<div class=“child-row”>
<img src=“{{ fet.featured_article_image.url}}” Style=“width:150px; height:150px”>
<p>{{fet.featured_article_content}}</p>
</div>
</a>
{% endfor %}
</div>
<h3>Other Articles of Interest</h3> <br>
<div class=“otherArticles-outer”>
{% for otherArticles in childRows %}
<div {% if loop.index == 1 %}class=“active”{% endif %}>
<a>
<img src=“{{otherArticles.other_articals_image.url}}” Style=“width:150px; height:150px”>
</a>
</div>
{% endfor %}
</div>
<h3>Twitter</h3>
<div class=“twitter-outer”>
{% for twit in childRows %}
<div class=“twitter-feed”>
{{twit.twitter_feed}}
</div>
{% endfor %}
</div>
{% endif %}
<!-- --------------------------------------article-intresting-outer----------------------------------- -->
<link rel=“stylesheet” href=“https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css”>
<script src=“https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js”></script>
<script src=“https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.js”></script>
<script>
$(‘.article-intresting-outer’).slick({
infinite: true,
vertical:true,
verticalSwiping:true,
speed: 3000,
slidesToShow: 3000,
slidesToScroll: 1,
autoplay: true,
dots: true,
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 3,
slidesToScroll: 3,
infinite: true,
dots: true
}
},
{
breakpoint: 600,
settings: {
slidesToShow: 2,
slidesToScroll: 2
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
]
});
</script>
<!-- ----------------------------------------------featured-article--------------------------------------------------- -->
<script>
$(‘.featured-article’).slick({
infinite: true,
vertical:true,
verticalSwiping:true,
speed: {{ module.time }} ,
slidesToShow: 5,
slidesToScroll: 5,
autoplay: true,
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 3,
slidesToScroll: 3,
infinite: true,
dots: false
}
},
{
breakpoint: 600,
settings: {
slidesToShow: 2,
slidesToScroll: 2
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
]
});
</script>
<!-- ------------------------------------twitter-outer------------------------------------------------ -->
<script>
$(‘.twitter-outer’).slick({
infinite: true,
vertical:true,
verticalSwiping:true,
speed: 3000,
slidesToShow: 1,
slidesToScroll: 1,
autoplay: true,
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 3,
slidesToScroll: 3,
infinite: true,
dots: false
}
},
{
breakpoint: 600,
settings: {
slidesToShow: 2,
slidesToScroll: 2
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
]
});
</script>
<!-- ------------------------------------otherArticles-outer--------------------------------------------- -->
<script>
$(‘.otherArticles-outer’).slick({
infinite: true,
// vertical:true,
// verticalSwiping:true,
// speed: 3000,
slidesToShow: 3,
slidesToScroll: 3,
autoplay: true,
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 3,
slidesToScroll: 3,
infinite: true,
dots: false
}
},
{
breakpoint: 600,
settings: {
slidesToShow: 2,
slidesToScroll: 2
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
]
});
</script>
