<div class="scrolling-wrap">
	<div class="weekly-special">
		<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit</span>
		<span class="dot"> • </span>
		<span>sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</span>
		<span class="dot"> • </span>
		<span>Ut enim ad minim veniam, quis nostrud exercitation</span>
	</div>
</div>



<script>
	$(document).ready(function() {
		var $scrollingWrap = $('.scrolling-wrap');
		var $weeklySpecial = $('.weekly-special');

		// Clone the content to create an endless scrolling effect
		$weeklySpecial.clone().appendTo($scrollingWrap);

		// Adjust the animation duration based on the content width
		var totalWidth = $weeklySpecial.outerWidth();
		var duration = (totalWidth / 50) + 's'; // Adjust speed by changing the divisor
		$scrollingWrap.find('.weekly-special').css('animation-duration', duration);
	});

</script>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<style>
	.scrolling-wrap {
		width: 100%;
		 /* Adjust height as needed */
		overflow: hidden;
		position: relative;
		color: #fff;
		font-size: 18px;
		display: flex;
		align-items: center;
		height: auto;
		min-height: 30px;
	}
	.weekly-special {
		white-space: nowrap;
		position: absolute;
		animation: scroll-text 50s linear infinite;
	}
	@keyframes scroll-text {
		0% { transform: translateX(100%); }
		100% { transform: translateX(-100%); }
	}
</style>