RSS Listing converted into Vertical Thumb Slider
HUBL CODE
================================================
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
<div class="vertical_slider_group slider slider-for">
{% if module.rss_feed_type == "external" %}
{% set feed_source = "{is_external=True, rss_url='"~module.rss_url~"', content_group_id=''}" %}
{% set is_external = true %}
{% elif module.rss_feed_type == "blog" %}
{% set feed_source = "{is_external=False, content_group_id='" ~ module.content_group_id ~ "', rss_url=''}" %}
{% set is_external = false %}
{% endif %}
{% rss_listing
publish_date_text="{{ module.publish_date_text }}",
rss_url="{{ module.rss_url }}",
is_external="{{ is_external }}",
click_through_text="{{ module.click_through_text }}",
show_date="{{ module.show_date }}",
content_group_id="{{ module.content_group_id }}",
include_featured_image="{{ module.include_featured_image }}",
publish_date_format="{{ module.publish_date_format }}",
show_detail="{{ module.show_detail }}",
show_author="{{ module.show_author }}",
number_of_items="{{ module.number_of_items }}",
limit_to_chars="{{ module.limit_to_chars }}",
attribution_text="{{ module.attribution_text }}",
topic_id="{{ module.topic_id }}"
feed_source="{{ feed_source }}"
%}
</div>
<div class="vertical_slider_thumb slider slider-nav">
{% rss_listing
publish_date_text="{{ module.publish_date_text }}",
rss_url,
is_external="{{ is_external }}",
click_through_text="{{ module.click_through_text }}",
content_group_id="{{ module.content_group_id }}",
publish_date_format="{{ module.publish_date_format }}",
number_of_items="{{ module.number_of_items }}",
limit_to_chars="{{ module.limit_to_chars }}",
attribution_text="{{ module.attribution_text }}",
topic_id="{{ module.topic_id }}"
feed_source="{{ feed_source }}"
%}
</div>
<script>
var initSlider;
function SliderFn() {
initSlider = setTimeout(function(){
$('.slider-for .hs-rss-module').slick({
slidesToShow: 1,
slidesToScroll: 1,
dots: false,
arrows: false,
fade: true,
infinite: false,
asNavFor: '.slider-nav .hs-rss-module'
});
$('.slider-nav .hs-rss-module').slick({
slidesToShow: 4,
slidesToScroll: 1,
asNavFor: '.slider-for .hs-rss-module',
dots: false,
arrows: false,
vertical: true,
infinite: false,
focusOnSelect: true
});
}, 2000,clearTimeout(initSlider));
};
SliderFn();
</script>
Comments
Post a Comment