I’m trying to build a Swiper Marquee/Ticker for a logo garden, but the I’m experiencing some issues, I cannot get the Swiper to actually start moving on its with AutoPlay. When I interact with the Swiper it will start playing automatically, but until then it just stays frozen.
import Swiper from 'swiper'
import { Autoplay } from 'swiper/modules'
import 'swiper/css'
const Ticker = () => {
const swiper = new Swiper('.image-ticker', {
modules: [Autoplay],
slidesPerView: 'auto',
spaceBetween: 120,
loop: true,
speed: 4000,
autoplay: {
delay: 1,
disableOnInteraction: false,
},
})
}
export default Ticker
<div class="swiper image-ticker">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="someimage.jpg"></div>
<div class="swiper-slide"><img src="someimage.jpg"></div>
<div class="swiper-slide"><img src="someimage.jpg"></div>
<div class="swiper-slide"><img src="someimage.jpg"></div>
<div class="swiper-slide"><img src="someimage.jpg"></div>
<div class="swiper-slide"><img src="someimage.jpg"></div>
<div class="swiper-slide"><img src="someimage.jpg"></div>
<div class="swiper-slide"><img src="someimage.jpg"></div>
</div>
</div>