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

Popular posts from this blog

Pagination of multiple recent post blog

Service Filter

When You Want to open popup(first time load)