Announcement bar Slider Shopify

{%- capture topInfoBar -%}
<div class="top-bar {% if section.settings.topbarmobile %}small--hide{% endif %}">
<div class="marquee-text page-width{% if section.settings.fullwidth %} fullwidth{% endif %}" id="carousel-{{ section.id }}" data-section-id="{{ section.id }}" data-section-type="carousel">
<div class="top-info-bar" >
{% for block in section.blocks limit: section.blocks.size %}
{% if block.settings.title %}
<div class="flex-item {{ block.settings.align_text}}" {{ block.shopify_attributes }}>
<a href="{{ block.settings.url}}">{% if block.settings.image %}<img src="{{block.settings.image | img_url: '50x' }}" alt="" /> {% endif %}{{ block.settings.title}}</a>
</div>
{% endif %}
{% endfor %}

</div>
</div>
</div>
{%- endcapture -%}
{{ topInfoBar | strip_newlines | remove: " " | remove: " " }}

<style>
{%- if settings.classic_header %}
.template-index #shopify-section-top-information-bar {display:none;}
{%- endif -%}
.top-bar { background:{{section.settings.info_bg}}; }
.top-bar a,
.top-bar { color:{{ section.settings.text_clr}}; font-size:{{section.settings.info_font}}px; text-decoration: none;}

.top-bar .slick-prev,
.top-bar .slick-next { background:none;}

.top-bar .slick-prev:before,
.top-bar .slick-next:before { color:{{ section.settings.text_clr}}; }
.top-bar .flex-item { padding:7px; text-align:center; }
.top-bar img { display:inline-block; vertical-align:text-bottom; margin-right:8px; }
@media only screen and (min-width:1025px) {
.top-bar .flex-item.left { text-align:left; }
.top-bar .flex-item.center { text-align:center; }
.top-bar .flex-item.right { text-align: right; }
}
@media only screen and (max-width:766px) {
.top-bar .flex { display:block; }
.top-bar a, .top-bar {
font-size: 11px;
}
}
.slick-slide-container {
overflow: hidden;
}
.flex-item {
display: none;
width:100%;
}
/* .slick-slide:nth-child(n+1) {
display: none;
}

.slick-initialized .slick-slide:first-child {
display: block;
} */
.slick-initialized .flex-item{
display: block !important;
}
</style>
<script>
$(document).ready(function(){


$('.top-info-bar').slick({
slidesToShow: 2,
slidesToScroll:1,
autoplay: true,
pauseOnDotsHover:false,
autoplaySpeed: 0,
dots: false,
arrows: false,
infinite: true,
speed: 15000,
pauseOnHover: true,
cssEase: 'linear',
swipe:false,
touchMove:false,
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 2,
slidesToScroll: 2
},
},
{
breakpoint: 600,
settings: {
slidesToShow: 1,
slidesToScroll: 1,
},
}
]

});
// var styleBackup = '', restOfTimeout = 500, currentState = '', freeze = false;
// $('.top-info-bar').on('init', function(event, slick, direction){
// const observer = new MutationObserver(function(mutationsList, observer){
// for(const mutation of mutationsList) {
// if (mutation.type === 'attributes' && mutation.attributeName == 'style' && freeze) {
// $('.top-info-bar .slick-track').css('transform', currentState);
// }
// }
// });
// observer.observe($('.top-info-bar .slick-track')[0], { attributes: true });
// $('.top-info-bar .slick-track').mouseover(function() {
// styleBackup = $('.top-info-bar .slick-track').attr('style');
// currentState = getComputedStyle($('.top-info-bar .slick-track')[0]).transform;
// freeze = true;
// $('.top-info-bar').slick('slickPause');
// let translateDone = parseFloat(currentState.split(',')[4])*(-1);
// let regex = /translate3d\(([^,]*),/gm;
// if((m = regex.exec(styleBackup)) !== null) {
// let translateNeed = parseFloat(m[1])*(-1);
// let slideWidth = $('.top-info-bar .slick-slide').first().width();
// let speed = 5000/slideWidth;
// restOfTimeout = (translateNeed-translateDone)*speed;
// var report = "Should be: "+translateNeed+"\n";
// report += "Did on hover moment: "+translateDone+"\n";
// report += "Still has to scroll: "+(translateNeed-translateDone)+"px\n";
// report += "Speed of scroll: "+speed+"ms\n";
// report += "Desired timeout: "+restOfTimeout+"ms\n";
// $('#report').text(report);
// } else {
// restOfTimeout = 500;
// }
// $('.top-info-bar .slick-track').css('transform', currentState);
// });
// $('.top-info-bar .slick-track').mouseout(function() {
// freeze = false;
// $('.top-info-bar .slick-track').attr('style', styleBackup.replace('5000ms', restOfTimeout+'ms'));
// $('.top-info-bar').slick('slickPlay');
// });
// });
});

</script>

{% schema %}
{
"name": "Top Information Bar",
"class": "index-section",
"settings":[
{
"type": "checkbox",
"id": "fullwidth",
"label": "Fullwidth?",
"default": false
},
{
"type":"checkbox",
"id":"topbarmobile",
"label":"Hide in Mobile?",
"default":true,
"info":"Hide this option for mobile view"
},
{
"type": "color",
"id": "info_bg",
"label": "Background",
"default": "#111"
},
{
"type": "color",
"id": "text_clr",
"label": "Text",
"default": "#fff"
},
{
"type": "range",
"id": "info_font",
"label": "Font Size",
"default": 12,
"min": 10,
"max": 16,
"step": 1,
"unit": "px"
}
],
"blocks": [
{
"type": "text_block",
"name": "Column",
"settings": [
{
"type": "image_picker",
"id": "image",
"label": "Upload Image"
},
{
"type": "textarea",
"id": "title",
"label": "Heading",
"default": "Add a title or tagline",
"info":"use <strong> for bold text, [Find icons here](http:\/\/adornthemes.com\/ad-icons\/)"
},
{
"type": "select",
"id": "align_text",
"label": "Horizontal alignment",
"default": "center",
"options": [
{"value": "left", "label": "Left"},
{"value": "center", "label": "Centered"},
{"value": "right", "label": "Right"}
]
},
{
"type": "url",
"id": "url",
"label": "URL"
}

]
}
]
}
{% endschema %}